Dev Diary
[ 살펴보기 ] NextJS - Configuration

[ 살펴보기 ] NextJS - Configuration

Chan's photo
Chan
·

4 min read

NextJS를 통해 프로젝트를 개바하면 Typescirpt, ESLint, 환경변수 등과 같은 추가적인 package, tools과 함께 개발이 진행된다. 이번 포스트를 통해 next.config.js 파일 외에 프로젝트 진행시 알아두면 좋은 configuration에 대해 살펴보자.

환경변수

NextJS project는 기본적으로 project root에 위치한 .env, .env.local 파일과 같이 .env* 파일에 설정한 환경변수를 processs.env에 추가한다.

// .env.local
DB_USER=testuser

...
return (
  <div>
    <h3>Test Page</h3>
    <div>{process.env.DB_USER}</div> // testuser
  </div>
);
...

위와 같이 설정된 환경변수는 server 환경에서만 접근이 가능하다. 만약 client side에서 접근 가능한 public 환경 변수를 .env* 파일에서 관리하고자 한다면 환경변수 이름앞에 NEXT_PUBLIC_을 붙인다.

// .env.local
DB_USER=testuser
NEXT_PUBLIC_DEFAULT_COLOR=blue

"use client"

...
return (
  <div>
    <h3>Test Page</h3>
    <div>{process.env.NEXT_PUBLIC_DEFAULT_COLOR}</div> 
    // blue
  </div>
);
...

주의할 점은 위와 같이 NEXT_PUBLIC_ prefix가 붙은 public 환경변수의 값은 project build시 bundle 파일에 포함된다. 그렇기에 절대로 민감한 정보를 public 환경변수에 설정해서는 안된다.

만약 환경변수를 개발환경 또는 배포환경에 따라 다르게 설정하고 싶으면 다음과 같이 env 파일을 구성할 수 있다.

  • .env.production : production 환경에서 적용될 환경변수를 설정한다. 여기서 선언된 환경변수는 build된 project를 실행할 때 적용된다

  • .env.development : development 환경에서 적용될 환경변수를 설정한다. 여기에 선언된 환경변수는 npm run dev로 실행되는 개발 환경에서 적용된다.

  • .env : production, developement 환경에 무관하게 적용될 환경변수를 설정한다.

  • .env.local : version control에서 제외되는 민감한 정보를 가진 환경변수를 적용할 때 사용한다. 만약 .env.local 파일에 다른 .env 파일과 같은 환경변수가 있다면 .env.local에 선언된 환경변수가 적용된다.

create-next-app을 통해 프로젝트를 생성하면 default로 .gitignore에 추가되어 있는 .env 파일은 .env*.local뿐이다. 어떤 .env파일을 version control에서 제외시킬 것인지는 project를 진행하는 개발자의 몫이지만 NextJS에서는 기본적으로 .env.production, .env.development에는 version control에 포함 되어도 무관한 개발환경별 기본 설정과 같은 값을 관리하고 .env.local 파일에는 노출되서는 안되는 민감한 정보를 가진 환경변수를 관리하는 패턴을 default로 사용하는 것으로 보인다. ( Documentation - Default Environment Variables )

동일한 환경 변수가 여러 파일에 있을 때 환경 변수가 적용되는 파일의 우선순위는 다음과 같다.

  1. process.env

  2. .env.$(NODE_ENV).local

  3. .env.local

  4. .env.$(NODE_ENV)

  5. .env

예를 들어 NODE_ENV 환경변수가 development고 DB_USER라는 환경변수가 .env.development.local에도 선언되어 있고 .env.development에도 선언되어 있으면 .env.development.local에 선언된 DB_USER가 사용된다.

NextJS에서 NODE_ENV 환경변수 값은 production, development 또는 test로만 설정할 수 있다. 주의할 점은 만약 NODE_ENV가 test일 때는 .env.test, .env.test.local .env 파일에 선언된 환경변수만 load된다.

ESLint

create-next-app을 통해 프로젝트를 생성했다면 ESLint의 기본 설정을 자동으로 추가된다. create-next-app을 통해 프로젝트를 생성했다면 lint script 역시 package.json에 추가해주기에 기본적인 lint 테스트는 npm run lint script를 통해 가능하다.

Project를 build할 때 default로 lint 검사도 함께 진행된다. 그리고 ESLint 검사 중 에러가 발생하면 build도 실패한다.

create-next-app을 통한 프로젝트 생성 단계에서 typescript 옵션을 선택하여 생성했다면 eslint configuration 파일인 .eslintrc.json의 내용은 다음과 같을 것이다.

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

위의 설정에서 eslint는 next/core-web-vitals은 next에서 제공하는 eslint-config-next 설정이 제공하는 eslint rule과 더불어 core web vitals과 관련된 eslint rule을 추가로 제공한다.

위와 같이 next/core-web-vitals설정을 추가하면 다음 plugin의 eslint rule들이 자동으로 포함된다.

  • eslint-plugin-react

  • eslint-plugin-react-hooks

  • eslint-plugin-next

추가로 위의 예제와 같이 next/typescript 설정을 추가하면 plugin:@typescript-eslint/recomended 설정의 eslint rule이 추가된다.

만약 lint를 특정 폴더안에 있는 파일에만 적용하고 싶다면 다음과 같이 next.config.js 파일을 수정할 수 있다. 다음은 src/components 폴더 안에 위치한 파일에만 lint 검사를 적용하는 예제다.

module.exports = {
  eslint: {
    dirs: ['src/components'], 
  },
}

만약 code editor에 prettier를 적용하여 사용하고 있다면 eslint가 제공하는 formatting rule가 충돌을 방지하기 위해 prettier관련 eslint 설정을 추가하는 것이 좋다.

다음 package를 설치하고 .eslintrc.json에 prettier관련 설정을 추가 extend 해준다.

npm install --D eslint-config-prettier

// .eslintrc.json
{
  "extends": ["next/core-web-vitals", "next/typescript", "prettier"]
}

특정 eslint rule을 disable 시키고 싶다면 다음과 같이 .eslintrc.json에서 특정 rule을 disable시킬 수 있다.

{
  "extends": ["next/core-web-vitals", "next/typescript", "prettier"],
  "rules": {
    "@next/next/google-font-display": "off",
    "@next/next/google-font-preconnect": "off"
  }
}

만약 프로젝트 생성 시 ESLint를 선택하지 않고 프로젝트를 생성해서 ESLint가 설치되지 않은 상태라면 npm run lint를 실행하면 다음과 같은 prompt가 나타나고 원하는 세팅을 설정할 수 있다.

? How would you like to configure ESLint?

❯ Strict (recommended)
Base
Cancel

위에서 Strict나 Base를 선택하면 필요한 eslint package를 설치하고 .eslintrc.json 파일을 추가해준다. Strict는 기본적으로 제공되는 next eslint 설정에 더불어 core web vitals 관련 eslint 설정까지 추가해서 적용하며 base는 기본적인 next eslint 설정만 적용한다.

Absolute Path import

Directory 구조가 아래와 같다고 가정해보자

tsconfig.json
/src
    /component
        - TestComp.tsx
    /app
        /test
          - page.ts
/types
    - test.ts

만약 tsconfig.json에서 baseUrl이나 path 속성을 설정하지 않은 상태에서 test/page.ts에서 types/test.ts에서 export하는 testVar 변수를 import 한다면 import path는 다음과 같을 것이다.

// src/app/test/page.ts

import { testVar } from "../../../types/test";

component, 변수, 함수등을 import할 때 relative가 아닌 absolute path로 import하고자 한다면 다음과 같이 tsconfig.json 에 baseUrl 속성을 설정해준다.

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

위와 같이 설정하면 모든 import는 tsconfig.json 파일이 있는 프로젝트의 root 위치를 기준으로 absolute path로 import된다.

// src/app/test/page.ts

import { testVar } from "types/test";

추가로 paths option을 통해 특정 import경로에 alias를 설정할 수 있다. 예제로 다음과 같이 설정하면 /src 아래에 있는 파일을 import할 때 import 경로가 @/로 시작한다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// src/app/test/page.ts

import { testVar } from "types/test";
import TestComp from "@/component/TestComp";
Next.js