React Vite -> Next 마이그레이션

React에서 Next로 변경한 이유

저희 프로젝트의 주 컨텐츠는 뉴스레터 게시와 커뮤니티에 있습니다.
2가지의 콘텐츠를 통해 서비스를 제공하는데 SEO 최적화에 대해 고민하게 되었고, 그렇다면 React보다 SEO 측면에서 뛰어난 Next.js를 사용하는 것이 좋다고 판단하여 NextJs 프로젝트로 마이그레이션을 진행하게 되었습니다.

next install

• 패키지 설치

npm install next@latest

• Next.config.js 설정 파일 만들기

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    distDir: './dist',
    basePath: process.env.NEXT_PUBLIC_BASE_PATH, // `/some-base-path`.
};

tsconfig

React Vite 프로젝트로 생성 시 tsconfig.app.json파일 과 tsconfig.node.json 파일이 각각 생성됩니다.

이 상황에서 Next 프로젝트로 마이그레이션 하면서 tscofing.json파일로 통합하였습니다.

기존에 tsconfig.json 관련 설정에서 아래의 내용만 추가해주었습니다.

"compilerOptions": {
    "esModuleInterop": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true
},

 "include": [
    "./dist/types/**/*.ts",
    "./next-env.d.ts",
    "src",
    ".next/types/**/*.ts"
, "__test__"  ],
  "exclude": [
    "./node_modules"
  ]

forceConsistentCasingInFileNames
파일 이름의 대소문자를 일관되게 유지하도록 강제합니다. 이는 대소문자가 다른 두 파일을 같은 파일로 오인하는 문제를 방지합니다. 예를 들어, myComponent.tsx와 MyComponent.tsx는 서로 다른 파일로 취급됩니다.

Eslint

-패키지 설치

npm install eslint-plugin-next

• .eslintrc.json

 "env": {
        "browser": true,
        "es2021": true,
        "node":true
    },
  "extends":[
  	        "next/core-web-vitals"
  ],
  "parserOptions":{
  	"project": ["tsconfig.json"],
  },
  "ignorePatterns": ["build", "dist", "public","next.config.js"]

중점적으로 봐야할 사항은 extends에서 next/core-web-vitals 코드를 추가해야합니다.

그리고 parserOptions에서 기존 project에서 tsconfig.app.json파일 과 tsconfig.node.json내용을 삭제하고 tsconfig.json으로 수정해주어야 합니다.

그리고 eslint 설정을 완료하였다면

• eslint-plugin-react
• eslint-plugin-react-hooks를 삭제하였습니다.

위 2가지의 plugin을 삭제 한 이유는 eslint-plugin-next 기본 eslint 설정에 포함되어 있기 때문입니다.

• package.json script 수정

 "dev": "next dev",
    "build": "tsc -b && next build",

이제 Vite와 관련된 파일과 패키지를 제거하면 됩니다.

• main.tsx 삭제
• index.html 삭제
• vite-env.d.ts 삭제하기
• vite.config.ts 삭제하기
• vite와 연관된 패키지들 제거하기

출처

https://book.hajoeun.dev/friendly-next-js/part-2/next.js-2/vite-next.js