[ NextJS ] next.config.js 파일

next.config.js 란?

NextJS에서 커스텀 설정을 하기 위해 프로젝트 디렉터리의 루트폴더에 next.config.js or next.config.mjs 파일을 만들 수 있습니다.

이는 JSON파일이 아닌 NodeJS 모듈입니다.

NextJS 서버 및 빌드 단계에서 사용되며, 브라우저 빌드에는 포함되지 않습니다.

 

몇가지 기능들

 

Base Path

// next.config.js
module.exports = {
    basePath: "/docs"
}

// app.js
<Link href="/about">About으로 이동</Link>
<Image src="/docs/new.png" alt="이미지" />

 

위처럼 basePath를 적용시키면 라우터 이동시에 /about이 아닌 /docs/about으로 이동하게 됩니다.

Image는 위처럼 /docs를 추가해서 해주어야 이미지가 제대로 제공됩니다.

 

 

Rewrites

async rewrites() {
    return [
        {
            source: "/about",
            destination: "/"
        }
    ]
}

rewrites는 클라이언트 측 라우팅에 <Link href="/about">~</Link> 적용되며, 위처럼 재작성이 적용됩니다.

간단하게 말하면 source URL로 이동을 하면 destination이 실행됩니다.

예를 들어 긴 URL을 감추거나 API키를 감추거나 하는데 사용할 수 있습니다.

 

Redirects

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

redirects를 사용하면 들어오는 요청 경로를 다른 대상 경로로 리디렉션할 수 있습니다.

permanent는 boolean으로 설정할 수 있으며, true면 클라이언트 / 검색 엔진이 리디렉션을 영구적으로 캐싱하도록 지시하는 308 상태 코드를 사용하고, false면 일시적이며 캐시되지 않는 307 상태 코드를 사용합니다.

 

redirects은 source URL이 destination URL로 변경되는 것을 유저가 확인할 수 있지만, rewrites는 source URL만 유저가 확인할 수 있고, destination URL은 유저가 알 수 없습니다.

 

images

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      "www.notion.so"
    ]
  }
}

remotePatterns와 맟찬가지로 도메인 구성을 사용하여 외부 이미지에 허용된 호스트 이름 목록을 제공할 수 있습니다.

간단하게 말하면 외부에서 이미지를 가져올 때, 외부 URL을 함부로 사용할 수 없기 때문에 next.config.js에서 사용할 수 있도록 도와준다고 생각하면 됩니다.