Next.js - Redirect

Redirects

유저가 보는 URL의 path를 리다이렉트 시켜서 다른 path로 이동시킨다.

next.config.js 에서 redirect를 설정할 수 있다.

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

리다이렉션은 동기(async)함수로 source, destination, permanent 프로퍼티를 가지고 있는 매핑된 배열 객체를 반환한다.

• source : 유입되는 요청 경로 패턴
• destination : 라우팅하려는 경로
• permanent : true / false
  • true : 클라이언트/검색 엔진에 리다이렉션을 영원히 캐싱하는 경우 (308 code)
  • false : 일시적으로 사용하고 캐싱되지 않는 경우 (307 code)
• basePath : false / undefined
  • 외부 링크로 리다이렉트 되는 경우에만 사용 가능
• locale : false / undefined
• has : has objects를 매핑한 배열 (type, key, value 속성을 가짐)
• missing : missing objects를 매핑한 배열 (type, key, value 속성을 가짐)

리다이렉션은 페이지가 포함된 파일시스템이나 /public 파일들을 체크하기 전에 일어난다.

그리고, 적용되면 요청에 제공된 모든 쿼리 값이 Redirects 대상으로 전달된다. 예를 들어 아래와 같이 요청되면

/old-blog/post/12?page=1 은 /blog/post/12?page=1로 리다이렉트 된다.

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

 

1. Path Matching

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

경로가 일치하면 리다이렉트 된다.

예를 들어 /old/hello-world 는 /new/hello-world로 리다이렉트 된다.

 

• Wildcard Path Matching

module.exports = {
  async redirects() {
    return [
      {
        source: '/old/:path*',
        destination: '/new/:path*',
        permanent: true,
      },
    ];
  },
};

예를 들어, /old/page=1?12=&details=apple로 접속하게 되면,  /new/page=1?12=&details=apple로 리다이렉트 된다.

 

• Regex Path Matching

정규식 경로를 일치시키려면 매개변수 뒤를 괄호로 묶어주면 된다.

module.exports = {
  async redirects() {
    return [
      {
        source: '/old/:path(\\d{1,})',
        destination: '/news/:path',
        permanent: false,
      },
    ];
  },
};

예를 들어, /old/123 로 접속하게 되면,  /new/123으로 리다이렉트 된다.

 

추가적으로  (, ), {, }, :, *, +, ? 와 같은 특수문자를 함께 사용하려면 이스케이프 문자를(\\) 활용해서 작성해야 한다.

source: '/english\\(default\\)/:slug'

 

2. Header, Cookie, and Query Matching

Header, Cookie, Query value가 일치하는 경우에만 redirect 시킬 수도 있다.

has와 missing 필드를 사용하면 되는데, has는 모든 항목과 일치해야 하고 missing 은 리다이렉션이 적용되는 모든 것들과 일치하지 않아야 한다.

 

• has, missing object field
  • type : header, cookie, host, query
  • key : type에 맞는 형식의 키 값
  • value : key에 매핑되는 값

ex)

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',
      },
    ];
  },
};