[13 | Next.js] Redirects & Rewrites 기능

Redirects

리다이렉트 기능, 컴포넌트 내에서 사용하던 redirect 함수와는 다르다. 물론 기능 자체의 개념은 같다. 웹 페이지를 캐시 해둔 모든 곳(클라이언트 및 검색 엔진)에서 혼란스러운 상황을 방지할 수 있도록 활용한다.

라우트별 리다이렉트 기능은 next.config.js 에서 설정해줄 수 있다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    dirs: ["src"],
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
  async redirects() {
    return [
      {
        source: "/products/deleted_forever",
        destination: "/products",
        permanent: true,
      },
      {
        source: "/products/deleted_temp",
        destination: "/products",
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

• async redirects 코드에 객체를 담은 배열을 리턴해주는데 여기서 source, destination, permanent 를 지정해준다.
• source ⇒ destination은 해당 경로로 진입했을 때, destination으로 리다이렉트 시킨다는 것이다.
• permanent 는 boolean값을 줄 수 있다.
  • true: 308 상태값을 리턴하고 클라이언트와 검색엔진에게 이 리다이렉트를 영구히 캐시하라는 뜻
  • false: 307 상태값을 리턴하고 일시적으로 리다이렉트하는 것일뿐 캐시하지 말라는 의미

 

Q. 넥스트가 307 과 308을 사용하는 이유?

A. 보편적으로 302 가 일시적인 리다이렉트, 301 이 영구적인 리다이렉트를 의미했는데 많은 브라우저에서 원래 방식과 상관없이 리다이렉션 요청 메서드를 GET으로 변경하였다. 예를 들어, 브라우저가 302를 리턴하는 POST 요청을 보냈을 때, 요청 메서드를 POST가 아닌 GET으로 변형됨

이런 현상에서 Next는 307을 임시 리다이렉트 308을 영구 리다이렉트 상태 코드로 명시적으로하여 사용된 요청메서드를 보존하도록 했다.

 

Q. 이 기능은 어떨 때 사용하면 좋을까?

A. 웹 어플리케이션을 개편하면서 페이지 경로를 개편하거나 그룹화할 때, 기존의 사용자이나 검색 엔진이 이전 경로를 북마크해놨을수도 있기 때문에 기존 경로를 무작정 변경하는 것보다 redirect 시켜주는 것이 고객 유치와 편의성에 좋을 것이라고 생각한다.

• 예전 경로 없애고 새로운 경로로 변경하기 (x)
• 예전 경로를 새로운 경로로 리다이렉트 (o)

next.config.js Options: redirects | Next.js

---

Rewrites

재작성 기능을 통해 요청 경로(path)를 다르 대상 경로에 매핑(mapping)할 수 있다.

rewrites 는 URL 프록시 역할을 하며 대상 경로를 마스킹하여 사용자가 사이트에서 자신의 위치를 변경하지 않는 것처럼 보이게 한다. 반대로, 리다이렉션은 새 페이지로 경로를 재지정하고 URL 변경 사항을 표시한다.

• 클라이언트 측 라우팅에 적용된다.
• 리다이렉트처럼 배열이나 객체를 담은 배열을 반환하는데 source, destination 등의 프로퍼티를 취하고 있다.
• Redirects 기능처럼 next.config.js 에 작성한다.

예시 코드

async rewrites() {
    return [
      {
        source: "/about",
        destination: "/",
      },
			{
        source: "/items/:slug",
        destination: "/products/:slug",
      },
    ];
  },

• source : 들어오는 요청 경로 패턴(대체해서 클라이언트에 보여줄 url 경로) ==덮어씌우려는 URL path 라고 생각하면 된다.
• destination : 라우팅하고 싶은 경로 (실제 내 넥스트 프로젝트의 라우트 경로)

+2023 09 13 추가

아래의 예시 코드의 rewrites가 동작하지 않는 문제

 {
        source: "/about",
        destination: "/",
      },

동작하지 않는 원인에 대해서 유추해보았다. 

1. "/"의 기준이 되는 경로가 제대로 설정되어 있지 않아서 적용이 안되는 것이다.
   • 네트워크 요청을 보니 제대로 컨텐츠가 불러와지고 요청 경로 를 봐도 제대로 들어가는 것을 확인했다. 또한, 홈과 어바웃 페이지만 안될 뿐 아래의 프로덕트 페이지를 item 경로로 보여주는 것은 정상 작동했다.
2. 1번의 결과를 토대로 위의 경로와 아래 경로의 차이점에 대해서 생각해보았을 때. rewrites 는 클라이언트 라우팅이라는 점을 기억해냈다. 또한, products 페이지는 동적 라우팅을 하고 클라이언트 컴포넌트를 포함하고 있다.
   • rewrites가 기본적으로 클라이언트 사이드 라우팅*이라면 컴포넌트가 전부 마운트된 시점에 라우팅이 적용된다는 것인데.. 그렇다면 rewrites의 동작 시점에 대해서 제대로 알고있어야 원인이 분석될 것이다.
   • [개념] 클라이언트 사이드 라우팅: SPA내 화면 전환 및 주소값 변환의 주체가 클라이언트이고 클라이언트 측에서 일어나기 때문에 클라이언트 사이드 라우팅이라고 한다.
3. rewrites의 동작원리를 보니 beforeFiles 라는 배열에 이 경로를 지정해주면 원하는대로 동작할 것이다. (해결방법)
   • afterFiles 배열에도 넣어봤지만 beforeFiles가 아니면 동작하지 않았다. 아래의 설명을 읽어도 사실 정확히는 이해가 가지않아서 나중에 더 찾아봐야 할 거 같다.
   • 어느 한국분의 블로그 내용을 보니 기존에 없는 페이지에 대한 rewrites 는 동작하지만 이미 존재하는 path에 대한 rewrites는 동작하지 않는다고 되어있다. ⇒ 이 부분이 아래의 넥스트 라우트 체크 순서와 관련있어 보이고 4번인 SSG 페이지보다 먼저 체킹되는 것이 beforeFiles 라서 내가 원하는대로 동작하는 거 같다.

아래는 next docs의 설명 인용문이다. 

🙋‍♂️ Good to know
: rewrites in beforeFiles do not check the filesystem/dynamic routes immediately after matching a source, they continue until all beforeFiles have been checked.

 ✅ The order Next.js routes are checked is:

1. headers are checked/applied
2. redirects are checked/applied
3. beforeFiles rewrites are checked/applied
4. static files from the public directory, _next/static files, and non-dynamic pages are checked/served
5. afterFiles rewrites are checked/applied, if one of these rewrites is matched we check dynamic routes/static files after each match
6. fallback rewrites are checked/applied, these are applied before rendering the 404 page and after dynamic routes/all static assets have been checked. If you use fallback: true/'blocking' in getStaticPaths, the fallback rewrites defined in your next.config.js will not be run.

ref: https://nextjs.org/docs/app/api-reference/next-config-js/rewrites

next.config.js Options: rewrites | Next.js

 

fix된 예시 코드

async rewrites() {
    return {
      beforeFiles: [{ source: "/about", destination: "/" }],
      fallback: [
        {
          source: "/items/:slug",
          destination: "/products/:slug",
        },
      ],
    };
  },

• beforeFiles, afterFiles,fallback 세 가지 옵션으로 더 세분화하여 rewrites를 사용할 수 있다. 
• 위의 코드에서는 afterFiles 배열을 사용하지 않았지만 공식 next docs에 나와있다. 

 

---

 

Q. Rewrites를 사용하면 좋은 이유?

A. 복잡하고 긴 url 을 다른 url 주소로 변경할 수 있다. ⇒ 프로젝트 구조가 다 노출되기도하고 사용자에게 보여주기 싫을 때 이 기능을 활용하면 좋다.

경로 이름을 변경할 때 대체하기 좋다. 예를 들어 /products 라는 단어가 너무 길어서 items 로 변경하고 싶을 때 클라이언트에서 items URL로 접근이 가능하지만 내부적으로는 products URL에 있는 페이지가 보이는 것이다.

 

결론

URL path를 다른 곳으로 우회시켜주는 것은 Redirect 기능을 활용하고 사용자에게 URL path를 심플하게 혹은 숨겨서 원하는 주소로 보여주고 싶다면 Rewrites를 활용하자.