[Next.js] create-next-app 없이 프로젝트 생성하기

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.)

모던 리액트 Deep Dive

 

package.json 생성하기

create-next-app 없이 next.js 프로젝트를 만들기 위해 먼저 package.json 을 만들어야 한다.

먼저 npm init 를 입력해서 package.json 을 생성한다.

npm init

 

react, react-dom, next 설치

그 다음으로 Next.js 프로젝트를 실행하는데 필요한 핵심 라이브러리인 react, react-dom, next 를 설치한다.

npm i react react-dom next

 

devDependencies 에 필요한 패키지 설치

typescript 와, 타입스크립트 타입 지원에 필요한 @types/react, @types/react-dom, @types/node 그리고 ESLint 에 필요한 eslint, eslint-config-next 를 설치한다.

npm i @types/node @types/react @types/react-dom eslint eslint-config-next typescript --save-dev

 

pagkage.json 작성 완료

그러면 필요한 패키지들이 모두 정상적으로 설치된다.

package.json

 

tsconfig.json 생성하기

타입스크립트 관련된 설정을 tsconfig.json 에 작성한다.

 

$schema 작성

tsconfig.json 파일을 작성하기 위해 상단에 $schema 를 작성해야 한다.

 

$schema 란?
schemaStore 에서 제공해 주는 정보로, 해당 JSON 파일이 무엇을 의미하는지, 또 어떤 key 와 value 가 들어갈 수 있는지 알려주는 도구

 

tsconfig.json 작성

tsconfig.json 파일을 만들고 JSON 문서를 작성한다.

{
  "$schema": "https://json.schemastore.org/tsconfig.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

 

위에 코드와 같이 tsconfig.json 파일을 작성했고 이 밖에도 다양한 옵션은 https://www.typescriptlang.org/tsconfig/ 에서 확인할 수 있다.

TSConfig Reference - Docs on every TSConfig option

 

next.config.mjs 생성하기

Next.js 설정을 위한 next.config.mjs 파일을 생성해야 한다.

 

옵션 확인하기

Next.js 깃허브 저장소에서 본인이 사용중인 버전의 태그를 찾아서 해당 버전에서 사용 가능한 옵션을 확인하여 사용할 수 있다.

next.js/packages/next/src/server/config-shared.ts at canary · vercel/next.js

옵션 확인하기

 

next.config.mjs 작성

아래 코드처럼 작성하여 리액트 엄격 모드를 활성화하고, 보안 취약점으로 취급되는 X-Powered-By 헤더를 제거하고, 빌드 시 ESLint 를 무시하도록 설정한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  poweredByHeader: false,
  eslint: {
    ignoreDuringBuilds: true,
  },
};

export default nextConfig;

 

ESLint 와 Prettier 설정하기

앞에서 설치한 eslint 와 eslint-config-next 로만은 부족하기 때문에 ESLint 와 Prettier 를 다시 설정한다.

 

eslint-config 설치

eslint-config 인 @titicaca/eslint-config-triple 를 설치한다.(airbnb, naver 등 다양한 eslint-config 있음)

npm i @titicaca/eslint-config-triple --save-dev

 

prettier, eslint-config-prettier 설치

Prettier 를 사용하기 위해 prettier 를 설치하고, ESLint 와 prettier 가 충돌나는 것을 방지하기 위해 eslint-config-prettier 를 설치한다.

npm install eslint-config-prettier prettier --save-dev

 

.eslintrc.json 작성

.eslintrc.json 파일을 생성하고 위에서 설치해준 것을 extends 에 추가해준다.

{
  "extends": [
    "next/core-web-vitals",
    "@titicaca/eslint-config-triple/create-config",
    "prettier"
  ],
  "plugins": [],
  "rules": {},
  "settings": {}
}

 

.prettierrc 작성

.prettierrc 파일을 생성하고 원하는 규칙을 설정한다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "arrowParens": "always"
}

 

애플리케이션 코드 작성

폴더 및 파일 생성

Next.js 애플리케이션 구동에 필요한 기본적인 폴더와 파일을 생성한다.

폴더구조

 

실행, 빌드, 린트 관련 명령어 기재

Next.js 프로젝트를 실행, 빌드, 린트 관련 명령어를 package.json 에 작성한다.

{
  // 생략
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  // 생략
}

 

프로젝트 실행

npm run dev 를 입력하여 프로젝트를 실행한다.

npm run dev

위에 적힌 주소로 들어가면 프로젝트가 정상적으로 실행되는 것을 확인할 수 있다.

결과

 

마치며...

책을 보고 따라했지만 직접 Next.js 애플리케이션을 create-next-app 없이 처음부터 설정하고 애플리케이션이 구동되는 것까지 구현해보았는데, 프로젝트가 성공적으로 실행이 될 때 놀라웠고 성취감이 느껴졌다. 하나하나 파일을 설정하는 과정에서 각 파일이 무슨 역할을 하고 그 내용이 무엇을 의미하는지 알 수 있게 되었고 동작 원리도 알 게 되었다!