[Next.js] Redirect 사용하기

이번 글에서는 Redirect 경로를 설정하는 방법을 말씀드리고자 합니다.

루트 디렉터리에 next.config.js 에 대해 이전에 말씀드렸었는데, 이는 설정 파일로 클라이언트가 어떻게 접근하였을 때 경로를 우회하여 전송해주는 방법을 명시하고 설정하는 파일입니다.

Redirect, 즉 다른 페이지로 사용자를 이동시키고 싶다면 아래와 같이 redirect() 함수를 만들어 적용하면 됩니다.

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,

  async redirects() {
    return [
      {
        source: "/oldpath/:path", // 사용자가 localhost:3000/oldpath/abc 와 같이 접근
        destination: "/newpath/:path", // 사용자를 localhost:3000/newpath/abc 로 튕겨냄
        permanent: false,
      }
    ]
  }
}

이 떄 :path 의 값은 임의의 아이디 값이나 string 등 어떤 value 도 사용 가능합니다. 

또 depth1 뿐만 아닌 여러 개의 path (localhost:3000/path1/path2/path3/path4...) 처럼 '/' 가 여러 개 묶인 소스의 경우도 수정이 가능한데, 이 때는 :path 뒤에 *만 붙여 antPattern화 시킬 수 있습니다. 

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,

  async redirects() {
    return [
      {
        source: "/oldpath/:path*",
        destination: "/newpath/:path*",
        permanent: false,
      }
    ]
  }
}

설정을 적용하시려면 재기동을 하셔야 합니다

명령어: npm run dev