Next 15 버전 마이그레이션

기존 React 프로젝트를 Next.js 의 15.0.1v 로 마이그레이션을 진행합니다. 새로운 레포지토리를 개설하지 않고 기존 레포지토리에서 진행하는 과정을 담습니다.

node 설치

우선 next 의 15 버전은 18.18버전 이상의 node를 요구합니다.

• 18.18 이하일 경우 아래 명령어를 통해 설치합니다.
  nvm install 18.18
  • nvm 이 설치돼 있지 않은 경우 아래 명령어를 통해 설치 후 터미널을 재실행합니다.
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
• 설치가 완료되면 아래 명령어로 버전을 변경합니다.
  nvm use 18.18
  • prefix 관련 에러가 발생한다면 아래 명령어를 통해 설정을 제거합니다.
    nvm use --delete-prefix v18.18

next 설치

• 아래명령어를 실행합니다.
  npm install next@latest react@latest react-dom@latest
• pagage.json 의 스크립트를 수정합니다.

  "scripts": {
      "test": "craco test",
      "eject": "react-scripts eject",
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
    },

설치가 완료되면 로컬에 띄워봅니다.
npm run dev

next 는 app 혹은 page 를 찾지만 기존에는 react 환경이므로 에러가 발생합니다.
app 라우터를 사용할 것이기 때문에 기존의 LoginPage.tsx 등은 page.tsx 로 통일합니다.
하지만 내부에는 파스칼 케이스로 작성해야함.

TypeError: Cannot read properties of undefined (reading 'bg')
코드에서는 힌트도 주지만 theme 를 참조하지 못하는 것 같습니다.

next 로 넘어오면서 styled 를 사용하기 위한 next 설정도 해줘야하기 때문
레지스트리 설정과 rootlayout 을 통해 래핑까지 해줘야합니다.

참고자료

그리고 기존 App.tsx 내부의 주입된 내용들을 layout.tsx 으로 옮겨옵니다.
과정에서 route 를 위한 코드는 지워주고
next.js 는 파일 기반 라우팅을 지원하기 때문에

클라이언트 컴포넌트들은 use client 붙혀주고

const navigate = useNavigate();
next 에서는 useRouter() 를 사용합니다. (next/navigation)
Link 태그 역시 마찬가지

다음

Missing required parameter client_id.
구글 클라이언트 아이디를 못찾는다고 하는데 env 때문인거같네요
env prefix 도 변경해줍니다.
REACT_APP -> NEXT_PUBLIC

다음

.gitignore 폴더에 .next 추가 해줍니다.

다음

next 로 대체 가능한 패키지 제거해줍니다.
react-scripts
react-router-dom
craco (깔려있다면)

다음

기존의 react 에서 마이그레이션 할 경우 기존 버전을 따라가기 때문에
react 버전업을 해줘야합니다.

npm install --save-exact react@rc react-dom@rc