개발/Next.js

Next.js 커스텀 서버 환경에서 cannot find module 에러 해결 방법 feat. typescript

Next.js의 TypeScript 커스텀 서버 환경에서 모듈 경로 문제는 `tsconfig-paths`를 사용해서 해결할 수 있습니다. 해결방법 1. 프로젝트 루트에 있는 tsconfig.json 파일에 baseUrl 및 paths 속성을 추가합니다. { "compilerOptions": { ... "baseUrl": ".", "paths": { "@/components/*": ["components/*"], "@/pages/*": ["pages/*"], "@/utils/*": ["utils/*"] } }, ... } 2. tsconfig-paths 및 ts-node 패키지를 설치합니다. npm install tsconfig-paths ts-node // or yarn add tsconfig-paths..

개발/Next.js

[Next.js] AWS Amplify withSSRContext the user is not authenticated 이슈 해결방법

Next.js 프로젝트에서 인증 라이브러리로 AWS Cognito Amplify를 활용하고 있는데, 서버사이드에서 인증 체크를 위해 withSSRContext에서 쿠키 기반으로 체크할 때 계속 the user is not authenticated 에러를 뱉어내는 이슈가 생겼습니다. 클라이언트 사이드에서 체크하는 useAuth hook에서는 정상적으로 잘 작동하는데 이상하게 서버에서만.. Dependencies "aws-amplify": "^4.3.21" "next": "^12.1.6" 원인 저의 경우 이메일 기반으로 유저이름을 세팅하였고, 이메일 계정 ruden91@naver.com로 로그인을 할 경우 아래와 같이 쿠키 키가 세팅되었습니다. CognitoIdentityServiceProvider.{use..

개발/Next.js

SWR useSWRInfinite fallback 처리하는 방법

Next.js에서 SWR을 활용할 때 기본 데이터를 활용해서 Pre-rendering을 처리해야 할 경우가 있습니다. 아래와 같이 useSWRInfinite에서 fallback 데이터를 처리하려고 했으나 Pre-rendering가 되지 않았습니다. fallbackData로 처리하려고 했지만 예상과는 다른 동작으로 인해 fallback으로 처리하는 방법을 좀 더 고민했어야 했습니다. const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite( getKey, fetchFinder, { fallback: { "hello": [] } } ); 아래와 같이 useSWRConfig를 통해 캐시된 key들을 살펴보는 와중에 useSWRInf..

개발/Next.js

Next.js, Redux toolkit, next-redux-wrapper 연동하는 방법 feat. typescript

버전 next@^12.0.8 next-redux-wrapper@^7.0.5 @reduxjs/toolkit@^1.7.1 Next.js에서 SSR(Server Side Rendering), SSG(Server Side Generation)를 사용할 때 next-redux-wrapper 라이브러리를 활용해서 redux 스토어를 간편하게 연동할 수 있습니다. next-redux-wrapper 설치 yarn add next-redux-wrapper redux toolkit을 활용해서 스토어를 생성할 때 아래와 같이 next-redux-wrapper로 스토어 생성 함수를 감싸줍니다. import { configureStore, combineReducers, AnyAction } from "@reduxjs/toolk..

개발/Next.js

[Next.js@^11] Typescript, Prettier, ESLint 통합하기 with VSCode

들어가기 전에 버전정보 VSCode@1.60.2 Next.js@^11 prettier@^2.4.1 eslint@8.0.1 typescript@4.4.4 VSCode에서 Next.js Typescript, Prettier, ESLint 통합하는 과정은 아래와 같습니다. VSCode 기본 설정 Next.js 설치 ESLint 기본구조 개선 Prettier 플러그인 설치 및 ESLint 연동, 자동 포맷팅 적용 ESLint + Typescript 연동 VSCode 기본 설정 세팅을 위해 비주얼 스튜디오 코드(VSCode, Visual Studio Code) 기본 설정을 진행하시기 바랍니다. VSCode용 ESLint 플러그인 설치 VSCode 설정에 아래 구성 추가 "editor.formatOnSave": f..