rewrite, redirect가 뭔데

전준연·2025년 4월 13일

목적

최근에 프로젝트를 하면서 "이런 게 있구나" 수준으로 알고만 있던 Next.js의 rewrite와 redirect 중에 rewrite 기능을 실제로 프로젝트에 적용시켜 보았는데, 이 참에 확실하게 정리도 해보면 좋을 것 같다는 생각이 들어서 이렇게 블로그로 작성해보았다.

공통점

각각에 대한 사용법을 알아보기 전에, 간단하게 공통점과 차이점부터 알아보자.

공통점은 정말 단순하다. rewrite, redirect 두 가지 기능 모두 유저가 특정 path로 이동했을 때 정해진 화면이 보이도록 해준다. 한마디로 둘 다 경로에 따라 어떤 페이지를 보여줄지 제어할 수 있다는 점에서 공통점을 가진다.

차이점

두 기능의 차이점으로는,

rewrite는 유저가 특정 path에 접근하면 url은 그대로 유지되지만, 실제로는 다른 path의 내용을 불러와서 보여주는 기능이고,

redirect는 유저가 특정 path에 접근했을 때 url 자체를 아예 다른 path로 변경시켜버리는 기능이다.

한마디로 정리하면, rewrite는 겉모습만 그대로고 속은 다른 페이지, redirect는 겉모습도 속도 다른 페이지라고 보면 된다.

사용법

rewrite, redirect 두 기능 다 Next.js 설정 파일인 next.config.ts에 설정을 추가해서 사용할 수 있다.

rewrite

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: "/rewrite", // 유저가 접속한 path
        destination: "/",   // 유저에게 실제로 보이는 path
      },
    ];
  },
};

export default nextConfig;

이런 식으로 설정을 하면, 유저가 브라우저에서 /rewrite로 접속했을 때 url은 /rewrite 그대로 유지되지만, 실제로 보여지는 것은 /의 내용이 되는 것이다.

:path

:를 사용해 다양한 path 값을 받아와 사용할 수 있다.

source: "/old-page/:path",      // 유저가 접속한 path
destination: "/new-page/:path", // 유저에게 실제로 보이는 path

이런 식으로 설정을 하면, 유저가 /old-page/profile로 접속 시 /new-page/profile이 표시되게 된다.

하지만 /old-page/profile/edit과 같은 url로 접속하면, 일치하는 경로가 없기 때문에 접속한 url 그대로가 표시된다.

:path*

하지만 : 옆에 *을 붙여 쓰게 되면, 경로의 길이에 상관없이 사용할 수 있게 된다.

source: "/old-page/:path*",      // 유저가 접속한 path
destination: "/new-page/:path*", // 유저에게 실제로 보이는 path

이런 식으로 설정을 하면, 유저가 /old-page/profile/edit으로 접속 시 /new-page/profile/edit이 표시되게 된다.

redirect

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async redirects() {
    return [
      {
        source: "/redirect",  // 유저가 접속한 path
        destination: "/",     // 이동할 경로
        permanent: true,
      },
    ];
  },
};

export default nextConfig;