Nextjs Redirects 관련 팁

특정 url을 입력했을 때 다른 곳으로 Redirect (Nextjs 12버전)

---

Nextjs에서 어떤 특정 url을 입력했을 때 다른 페이지로 redirect하고 싶은 경우가 있습니다.

예를 들어 http://localhost:3000 로 접속 시 http://localhost:3000/dev 로 redirect하고자 하는 경우 특정 설정들을 건드려야 합니다.

이때 어떻게 하면 되는지 살펴보겠습니다.

 

깃헙 링크: https://github.com/biglol10/tistory_source/tree/main/basepath_redirects

 

우선 nextjs 프로젝트 폴더에서 next.config.js가 생성되어 있어야 합니다.

 

• next.config.js 파일소스

const prodEnv = process.env.NODE_ENV === "production";

module.exports = {
  ...nextConfig,
  basePath: prodEnv ? "/production" : "/dev",
  async redirects() {
    return [
      {
        source: "/",
        destination: `/${prodEnv ? "production" : "dev"}`,
        basePath: false,
        permanent: false,
      },
    ];
  },
};

이렇게 해주면 http://localhost:3000 로 접속 시 http://localhost:3000/dev 또는 production 으로 redirect 됩니다.

 

만약에 http://localhost:3000/dev/ 에서 숫자나 영문자 3개를 입력했을 때 다른 페이지로 이동하고 싶을 경우

{
	source: `/${prodEnv ? "production" : "dev"}/:a([A-Za-z1-9]{3})`,
	destination: `/${prodEnv ? "production" : "dev"}/redirect`,
	basePath: false,
	permanent: false,
},

를 next.config.js 추가해주시면 됩니다

 

예시: 

로 입력 후 엔터를 치면

로 이동되는 것을 확인할 수 있습니다.