Next.js를 사용하여 요청 경로 매핑

Next.js 응용 프로그램 내에서 next.config.js 파일은 응용 프로그램에 대한 재작성 및 리디렉션을 구성할 수 있는 서버 및 빌드 단계에서 사용되는 일반 노드 모듈입니다. 그들 사이의 차이점은 무엇입니까?

Rewrites 요청 경로를 URL 프록시로 다른 대상에 매핑할 수 있습니다(사용자 위치를 전혀 변경하지 않고 대상 경로를 마스킹). 반대로 redirects은 대상 URL을 완전히 공개하는 새 페이지로 경로를 변경합니다.

둘 다 source , destination , permanent (리디렉션 전용) 키-값 쌍이 필요한 개체 배열을 최소한 반환하는 비동기 함수입니다. 다시 쓰기는 이전 경로(/old-blog/:slug에서 /new-blog/:slug로 일시적으로 매핑하여 응용 프로그램에 끊어진 링크가 없는지 확인하는 데 매우 유용할 수 있습니다. 그러나 /github를 GH 프로필에 매핑하려는 경우를 가정해 보겠습니다. 여기서는 리디렉션을 대신 사용합니다.

/*** next.config.js ***/
module.exports = {
  async redirects() {
    return [
      {
        source: '/github',
        // `source` type `String` - is the incoming request path pattern
        destination: 'https://github.com/ekqt',
        // `destination` type `String` - is the path you want to route to
        permanent: true,
        // `permanent` type `Boolean` Only for Redirects
        // `true` will use 308 to cache the redirect
        // `false` will use 307 as temporary
      },
    ]
  },
}

Vercel은 또한 vercel.json Project config 파일 내에서 리디렉션 및 재작성을 위한 솔루션을 제공합니다. 여기서 redirects 및 rewrites은 프레임워크에 구애받지 않습니다. 해당 플랫폼에서 지원되는 모든 프레임워크와 함께 사용할 수 있습니다. 그러나 Next.js 애플리케이션의 경우 Vercel은 프레임워크 수준 리디렉션이 플랫폼 수준 리디렉션보다 우선하므로 권장합니다. project config file 입니다.

하위 도메인은 어떻습니까?

subdomain.domain.com 와 같은 하위 도메인을 사용하여 Vercel은 이를 매우 쉽게 설명합니다(여기에는 redirecting subdomain guide ). 간단히 말해서 app.acme.com를 acme.com/app로 다시 작성하려면 has 필드를 사용하여 다시 작성을 구성해야 합니다.

/*** vercel.json ***/
{
  "rewrites": [
    // Requests to app.acme.com, will be rewritten to acme.com/app.
    {
      "source": "/:path*",
      "has": [
        {
          "type": "host",
          "value": "app.acme.com"
        }
      ],
      "destination": "/app/:path*"
    }
  ]
}

최초 게시: Mapping request paths using Next.js