루트 디렉토리에 있는 next.config.js의 설정법을 알아봅시다.

환경 변수

앱에 런타임 환경변수를 추가하려면 env를 활용해 추가하면 됩니다.

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

process.env.customKey에 엑세스 할 수 있습니다.

🚨 next.config.js를 이용한 env설정은 모두 런타임 중 적용되며 public합니다.

기본 경로

도메인 하위 경로 아래에 NextJS 앱을 배포하려면 basePath로 구성 할 수 있습니다.

module.exports = {
  basePath: '/docs',
}

루트 경로가 /에서 docs로 변경되었습니다.

Link

다음과 같이 Link에 경로를 설정하면

export default function HomePage() {
  return (
    <>
      <Link href="/about">About Page</Link>
    </>
  )
}

설정한 기본 경로가 적용되어 출력 됩니다.

<a href="/docs/about">About Page</a>

Image

기본 경로를 사용하고 next/image를 사용할 땐 설정한 basePath를 추가해야합니다.

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/docs/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

마스크

마스크를 사용하면 요청 경로를 바꾸어 매핑이 가능합니다.

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

/about으로 접근하면 /재작성되어 집니다.

• source : String 요청 경로 패턴입니다.
• destination : String 실제 라우팅 될 요청 경로입니다.
• basePath : true일 경우 basePath를 적용합니다.
• locale : true일 경우 로케일을 적용합니다.
• has : has객체입니다. 헤더,쿠키,쿼리값도 일치 조건에 넣고 싶을때 사용합니다.
  - type : header,cookie,host,query
  • key : 일치시킬 키값 입니다.
  • value : 일치시킬 데이터 값입니다.

리다이렉션

리다이렉션을 사용하면 요청 경로를 다른 경로로 리다이렉션이 가능합니다.

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

/about요청시 /경로로 리다이렉션합니다.

• source : 들어오는 요청 경로 패턴입니다.
• destination : 라우팅하려는 경로입니다.
• permanent : true시 308 리다이렉션, false시 307리다이렉션으로 처리합니다.
• basePath : true일 경우 basePath를 적용합니다.
• locale : true일 경우 로케일을 적용합니다.
• has : has객체입니다. 헤더,쿠키,쿼리값도 일치 조건에 넣고 싶을때 사용합니다.
  - type : header,cookie,host,query
  • key : 일치시킬 키값 입니다.
  • value : 일치시킬 데이터 값입니다.

📌 307, 308 리다이렉션?
기존 301,302 리다이렉션은 모든 요청을 Get Method로 변환하여 처리하였지만
307, 308은 원래 요청 Method를 그대로 가지고 처리합니다.
301은 307, 302는 308와 대응됩니다.

압축

NextJS는 빌드시 기본적으로 랜더링된 콘텐츠와 정적파일을 압축하여 제공합니다.
압축을 비활성화 할려면 다음과 같이 설정합니다.

module.exports = {
  compress: false,
}

x-powered-by

기본적으로 NextJS는 x-powered-by헤더를 추가합니다.
보안상의 문제로 제거 하고싶다면 다음과 같이 비활성화가 가능합니다.

module.export = {
	poweredByHeader:false,
}

빌드 ID

NextJS는 빌드시 생성된 상수 id를 이용해서 애플리케이션 버전을 식별합니다.
하지만 여러 서버를 배포한다면 문제를 일으킬 가능성이 있기 때문에
커스텀 빌드 ID가 필요한 경우 다음과 같이 설정합니다.

module.exports = {
  generateBuildId: async () => {
    // 마지막 git commit hash를 넣는 방식으로 많이 씁니다.
    return 'my-build-id'
  },
}

ESLint

프로덕트 단계에서 ESLint오류가 있으면 빌드가 실패 할 수 있습니다.
때문에 오류가 있더라도 원할한 빌드를 위해 사용을 잠시 꺼둘수 있습니다.

  eslint: {
    ignoreDuringBuilds: true,
  },
}

TypeScript

프로덕트 단계에서 Typescript오류가 있으면 빌드가 실패 할 수 있습니다.
때문에 오류가 있더라도 원할한 빌드를 위해 사용을 잠시 꺼둘수 있습니다.

module.exports = {
  typescript: {
    ignoreBuildErrors: true,
  },
}