[NextJS] Redirects

next.config.js에서 redirect를 처리해보자.

'/about' 페이지에 진입했을 때 '/' 페이지로 redirect하고 싶은 경우,

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

• source > 대상 페이지
• destination > 이동할 페이지
• permanent (true,false) > 응답코드 true = 308, false = 307
  • 308 영구 Redirect > 이 페이지는 영구적으로 이동
  • 307 임시 Redirect > 이 페이지는 임시적으로 이동
• basePath > 선언된 모든 redirect의 source, destination 요소에 predix를 설정해요.
• has, missing (type, key, value) > header, query, cookie에 따라 추가 조건을 붙이고 싶을 때 사용할 수 속성이에요.
• locale

Path Matching

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

 

Wildcard Path Matching

하위 URL 페이지가 모두 포함 (/blog/:slug* -> /blog/a/b/c/d/.../hello-world)

module.exports = {
  async redirects() {
    return [
      {
        source: '/blog/:slug*',
        destination: '/news/:slug*', // Matched parameters can be used in the destination
        permanent: true,
      },
    ]
  },
}

 

Regex Path Matching

module.exports = {
  async redirects() {
    return [
      {
        source: '/post/:slug(\\d{1,})',
        destination: '/news/:slug', // Matched parameters can be used in the destination
        permanent: false,
      },
    ]
  },
}

 

Header, Cookie and Query Matching

module.exports = {
  async redirects() {
    return [
      // if the header `x-redirect-me` is present,
      // this redirect will be applied
      {
        source: '/:path((?!another-page$).*)',
        has: [
          {
            type: 'header',
            key: 'x-redirect-me',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
      // if the header `x-dont-redirect` is present,
      // this redirect will NOT be applied
      {
        source: '/:path((?!another-page$).*)',
        missing: [
          {
            type: 'header',
            key: 'x-do-not-redirect',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
      // if the source, query, and cookie are matched,
      // this redirect will be applied
      {
        source: '/specific/:path*',
        has: [
          {
            type: 'query',
            key: 'page',
            // the page value will not be available in the
            // destination since value is provided and doesn't
            // use a named capture group e.g. (?<page>home)
            value: 'home',
          },
          {
            type: 'cookie',
            key: 'authorized',
            value: 'true',
          },
        ],
        permanent: false,
        destination: '/another/:path*',
      },
      // if the header `x-authorized` is present and
      // contains a matching value, this redirect will be applied
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        permanent: false,
        destination: '/home?authorized=:authorized',
      },
      // if the host is `example.com`,
      // this redirect will be applied
      {
        source: '/:path((?!another-page$).*)',
        has: [
          {
            type: 'host',
            value: 'example.com',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
    ]
  },
}

 

Redirects with basePath support 

basePath 속성은 source, destination에 모두 predix를 적용해요.

모든 Redirect 요소에 적용되고 사용하지 않으려면 basePath: false를 따로 선언해야해요.

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

  async redirects() {
    return [
      {
        source: '/with-basePath', // automatically becomes /docs/with-basePath
        destination: '/another', // automatically becomes /docs/another
        permanent: false,
      },
      {
        // does not add /docs since basePath: false is set
        source: '/without-basePath',
        destination: 'https://example.com',
        basePath: false,
        permanent: false,
      },
    ]
  },
}

 

 

https://nextjs.org/docs/api-reference/next.config.js/redirects