[Next] next.config.js
목차11
next.config.js
next.config.js 는 JSON 파일이 아닌, NodeJS 모듈이다.
next.config.js는 파일명에서도 알 수 있듯 Next 프로젝트에서 추가적인 설정을 할 수 있도록 하는 NodeJS 모듈이며 프로젝트 루트에 생성해서 사용하면 된다.
해당 파일은 Next의 서버 및 빌드 단계에서 사용되며 브라우저 빌드에서는 포함되지 않는다.
기본적으로 아래와 같이 next config를 설정할 수 있으며 module.export로 export하여 사용할 수 있다.
const nextConfig = {
// 옵션 코드...
};
module.exports = nextConfig;이외에도 여러 상황마다의 적용방법이 있다.
// 1. ECMAScript 모듈의 경우
const nextConfig = {
// 옵션 코드...
};
module.exports = nextConfig;// 2. 함수형으로 사용하는 경우
module.exports = (phase, { defaultConfig }) => {
const nextConfig = {
// 옵션 코드...
};
return nextConfig;
};// 3. Next.js 12.1.0 이상에서는 async 함수로 사용 가능
module.exports = async (phase, { defaultConfig }) => {
const nextConfig = {
// 옵션 코드...
};
return nextConfig;
};// 4. next/constants의 phase를 참고하여 원하는 단계(phase)에만 적용할 수 있음
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = (phase, { defaultConfig }) => {
if (phase === PHASE_DEVELOPMENT_SERVER) {
return {
// 개발모드 전용 옵션 코드...
};
}
return {
// 개발모드를 제외한 모든 단계(phase)에서 적용할 옵션 코드
};
};사용 가능한 phase
GitHub - vercel/next.js: The React Framework
Next.config.js의 설정은 모두 '옵션'이고 필수가 아니다.
따라서 필요한 설정만 찾아서 변경을 하는 것을 추천한다고 한다.
전체 옵션은 Github에서 확인할 수 있으나, 모든 옵션을 볼 필요는 없고 필요한 feature들만 검색해서 변경하면 된다.
Next.js 공식 문서에서 해당 내용들을 확인할 수 있다.
next.config.js: Introduction | Next.js
아래는 자주 사용하는 다섯가지 next.config.js 옵션들이다.
Redirects
Redirects를 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect할 수 있다.
Redirects을 사용하려면 next.config.js에서 redirects 키를 사용할 수 있다.
이때는 이름 그대로 Redirect 되는 것 이기 때문에 페이지 내용과 함께 url도 바뀐다.
module.exports = {
async redirects() {
return [
{
source: '/about',
destination: '/',
permanent: true,
},
];
},
};위 코드의 경우, 사용자가 /about경로에 접근하면 바로 / 루트 페이지로 리다이렉트 시켜버린다.
넣을 수 있는 옵션은 source, destination, permanent 가 있다.
- source: 사용자가 접근하는 요청 경로 패턴
- destination: source 에 맞는 패턴 경로로 들어온 사용자들을 라우팅(Redirect)할 경로
- permanent(Boolean) : true면 클라이언트/검색 엔진에 리디렉션을 영구적으로 캐시하도록 지시하는 308 상태 코드를 사용하고, false면 307 임시 상태 코드를 사용해 캐시되지 않도록 한다.
- * : 이후에 어떤 url이라도 그대로 가져온다.
// pattern-matching X
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
async redirects() {
return [
{
source: '/sub',
destination: '/detail',
permanent: false,
},
];
},
};
module.exports = nextConfig;// pattern-matching O
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
async redirects() {
return [
{
source: '/old/:path*',
destination: '/new/:path*',
permanent: false,
},
];
},
};
module.exports = nextConfig;next.config.js: Redirects | Next.js
Rewrites
Rewrites는 Redirect와 매우 유사하다.
다만, Rewrites의 경우 url을 바꾸지 않고, 페이지 내용만 다른 경로의 페이지로 매핑해서 보여준다.
즉, redirect는 페이지 내용과 url이 모두 바뀌지만, rewrites는 url은 유지된 채 페이지 내용만 변경되는 것이 차이점이다.
const nextConfig = {
async rewrites() {
return [
{
source: '/about',
destination: '/',
},
];
},
};next.config.js: Rewrites | Next.js
Environment Variables
next.config.js 파일의 env 옵션에 환경 변수를 추가하여 사용할 수 있다.
module.exports = {
env: {
customKey: 'my-value',
},
};위와 같이 추가함 경우, 코드에서 바로 process.env.KEY 형식으로 환경 변수에 접근할 수 있다.
export default function Page(){
return <h1>The value of customKey is : {ProcessingInstruction.env.KEY}</h1>
}이렇게 설정을 해주면, Next는 빌드 시간에 process.env.KEY 를 my-value 라는 값으로 대체한다.
따라서, 빌드를 한 후 아래와 같이 나타난다:
return <h1>The value of KEY is: {'my-value'}</h1>;Base Path
만약 Next 프로젝트를 서브도메인 혹은 서브 path로 배포하고 싶다면 basePath 옵션을 설정할 수 있다.
기본적으로 base path는 / 루트 path로 설정되어 있는데, 해당 옵션을 추가하여 내가 원하는 도메인을 루트 도메인으로 변경할 수 있다.
예를 들어 /docs 라는 basePath를 설정하면, 모든 페이지들이 /docs 라는 경로 아래에 추가된다.
module.exports = {
basePath: '/docs',
};해당 설정은 빌드 타임에 세팅 되므로 값을 변경하고 싶다면 꼭 re-building 단계를 거쳐야한다.
basePath를 설정하면 next/link 와 next/router 의 기본 루트 경로도 해당 basePath로 기본 설정이 된다.
예를 들어 <Link href="/about"> 라는 next/link 태그를 사용하면, 해당 링크는 /about가 아닌 /docs/about 경로로 적용된다.
import Link from 'next/link';
export default function HomePage() {
return (
<>
<Link href='/about'>About Page</Link>
</>
);
}위 페이지의 HTML결과
<a href='/docs/about'>About Page</a>;Custom Webpack Config
next.config.js 파일에서 커스텀 Wepack 설정을 할 수도 있다.
예외 사항이 있으니 자세한 내용은 Next.js 공식 문서 : Custom Webpack Config를 참고하면 된다.
next.config.js: Custom Webpack Config | Next.js
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, wepack }) => {
// 중요 : 수정된 config를 반환할 것
return 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숨기기
API Key 를 숨겨야 하는 이유
- 유료 결제한 API Key 일 수 있다.
- API 사용 횟수가 제한되는 경우가 있다.
- API Key 를 누군가 남용할 수도 있다.
API를 요청할 때 네트워크에서 API key 가 쉽게 노출된다.
Redirect 사용
유저를 Redirect시켜 url을 변경한다.
API Key 자체를 숨기지는 않는다.
위와 동일한 코드다.( redirects 함수는 비동기적으로 동작하므로 async를 작성한다.)
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
async redirects() {
return [
{
source: '/sub',
destination: '/detail',
permanent: false,
},
];
},
};
module.exports = nextConfig;Rewirtes 사용
유저를 Redirect 시키지만 url은 바뀌지 않아서 유저가 알 수 없다.
API Key를 직접 숨기는 방법이다.
Redirects와 대부분 동일하지만 Rewrites 를 활용해서 가짜 API url을 만들어 주고 컴포넌트에서 가짜 API url을 사용하면 API key를 숨길 수 있다.
추가로 API key를 .env파일에 작성해 관리하면 API Key를 숨기는 보다 나은 방법이다. (물론 이것도 털릴 수는 있다.)
// next.config.js
const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
async rewrites() {
return [
{
source: '/api/movies',
destination: `https://...?api_key=${API_KEY}`,
},
];
},// .env
NEXT_PUBLIC_API_KEY=xxxxxxxxxxxxxxxxxxxxx반응형