Next.js | next.config.js

블로그 이사 완료·2022년 12월 7일

next.config.js next.js redirects rewrites

📍 next.config.js

next.config.js 는 JSON 파일이 아닌, NodeJS 모듈이다. next.config.js는 파일명에서도 알 수 있듯 NextJS 프로젝트에서 추가적인 설정을 할 수 있도록 하는 NodeJS 모듈이며 프로젝트 루트에 생성해서 사용하면 된다. 해당 파일은 NextJS의 서버 및 빌드 단계에서 사용되며 브라우저 빌드에서는 포함되지 않는다.

기본적으로 아래와 같이 next config를 설정할 수 있으며 module.export로 export하여 사용할 수 있다.

이외에도 여러 상황마다의 적용방법이 있다.

사용 가능한 phase 참고
https://github.com/vercel/next.js/blob/5e6b008b561caf2710ab7be63320a3d549474a5b/packages/next/shared/lib/constants.ts#L19-L2

Next.config.js의 설정은 모두 '옵션'이고 필수가 아니다. 따라서 필요한 설정만 찾아서 변경을 하는 것을 추천한다고 한다.

전체 옵션은 Github에서 확인할 수 있으나, 모든 옵션을 볼 필요는 없고 필요한 feature들만 검색해서 변경하면 된다. Next.js 공식 문서에서 해당 내용들을 확인할 수 있다.

아래는 자주 사용하는 다섯가지 next.config.js 옵션들이다.

#1. Redirects

Redirects를 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect할 수 있다. Redirects을 사용하려면 next.config.js에서 redirects 키를 사용할 수 있다. 이때는 이름 그대로 Redirect 되는 것 이기 때문에 페이지 내용과 함께 url도 바뀐다.

위 코드의 경우, 사용자가 /about경로에 접근하면 바로 / 루트 페이지로 리다이렉트 시켜버린다.

넣을 수 있는 옵션은 source destination permanent 가 있다.

source: 사용자가 접근하는 요청 경로 패턴
destination: source 에 맞는 패턴 경로로 들어온 사용자들을 라우팅(Redirect)할 경로
permanent(Boolean) : true면 클라이언트/검색 엔진에 리디렉션을 영구적으로 캐시하도록 지시하는 308 상태 코드를 사용하고, false면 307 임시 상태 코드를 사용해 캐시되지 않도록 한다.
코드 예시

* : 이후에 어떤 url이라도 그대로 가져온다.

Next.js 공식 문서 : Redirects

#2.Rewrites

Rewrites는 Redirect와 매우 유사하다. 다만, Rewrites의 경우 url을 바꾸지 않고, 페이지 내용만 다른 경로의 페이지로 매핑해서 보여준다. 즉, redirect는 페이지 내용과 url이 모두 바뀌지만, rewrites는 url은 유지된 채 페이지 내용만 변경되는 것이 차이점이다.

Next.js 공식 문서 : Rewrites 에서 추가적인 옵션 확인이 가능하다.

#3. Environment Variables

next.config.js 파일의 env 옵션에 환경 변수를 추가하여 사용할 수 있다.

위와 같이 추가함 경우, 코드에서 바로 process.env.KEY 형식으로 환경 변수에 접근할 수 있다.

이렇게 설정을 해주면, NextJS는 빌드 시간에 process.env.KEY 를 my-value 라는 값으로 대체한다. 따라서, 빌드를 한 후 아래와 같이 나타난다:

#4. Base Path

만약 NextJS 프로젝트를 서브도메인 혹은 서브 path로 배포하고 싶다면 basePath 옵션을 설정할 수 있다. 기본적으로 base path는 / 루트 path로 설정되어 있는데, 해당 옵션을 추가하여 내가 원하는 도메인을 루트 도메인으로 변경할 수 있다.
예를 들어 /docs 라는 basePath를 설정하면, 모든 페이지들이 /docs 라는 경로 아래에 추가된다.

해당 설정은 빌드 타임에 세팅 되므로 값을 변경하고 싶다면 꼭 re-building 단계를 거쳐야한다.

basePath를 설정하면 next/link 와 next/router 의 기본 루트 경로도 해당 basePath로 기본 설정이 된다.
예를 들어 <Link href="/about"> 라는 next/link 태그를 사용하면, 해당 링크는 /about가 아닌 /docs/about 경로로 적용된다.

위 페이지의 HTML결과

#5. Custom Webpack Config

next.config.js 파일에서 커스텀 Wepack 설정을 할 수도 있다.예외 사항이 있으니 자세한 내용은 Next.js 공식 문서 : Custom Webpack Config를 참고하면 된다.

webpack 함수에 대한 두 번째 인수 객체는 아래과 같다

buildId(String): 빌드 간의 고유 식별자로 사용되는 빌드 ID
dev(Boolean): 컴파일을 개발 중에 수행할지 여부를 나타내는 필드
isServer(Boolean): 서버 측 컴파일의 경우 true이고, 클라이언트 측 컴파일은 false로 적용
nextRuntime(String | undefined): 서버 컴파일의 target 런타임. "edge" 또는 "nodejs"로 적용하고, 클라이언트 컴파일은 "undefined"로 적용
defaultLoaders(Object): Next.js에서 내부적으로 사용하는 기본 로더babel(Object): 기본 babel-loader 구성

📍 Redirect와 Rewirtes를 사용하여 API Key숨기기

#1. API Key 를 숨겨야 하는 이유

유료 결제한 API Key 일 수 있다.
API 사용 횟수가 제한되는 경우가 있다.
API Key 를 누군가 남용할 수도 있다.

API를 요청할 때 네트워크에서 API key 가 쉽게 노출된다.

#2. Redirect 사용

유저를 Redirect시켜 url을 변경한다. API Key 자체를 숨기지는 않는다.

위와 동일한 코드다.( redirects 함수는 비동기적으로 동작하므로 async를 작성한다.)

#3. Rewirtes 사용

유저를 Redirect 시키지만 url은 바뀌지 않아서 유저가 알 수 없다. API Key를 직접 숨기는 방법이다.

Redirects와 대부분 동일하지만 Rewrites 를 활용해서 가짜 API url을 만들어 주고 컴포넌트에서 가짜 API url을 사용하면 API key를 숨길 수 있다. 추가로 API key를 .env파일에 작성해 관리하면 API Key를 숨기는 보다 나은 방법이다. (물론 이것도 털릴 수는 있다.)