Перенаправления

Перенаправления позволяют перенаправить входящий путь запроса на другой целевой путь.

Для использования перенаправлений вы можете использовать ключ redirects в next.config.js.

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

redirects — это асинхронная функция, которая ожидает возврата массива, содержащего объекты с source, destination, и permanent свойствами:

• source — это шаблон входящего пути запроса.
• destination — это путь, на который вы хотите перенаправить.
• permanent true или false — если true, будет использоваться код состояния 308, который сообщает клиентам/поисковым системам о том, что перенаправление должно храниться в кэше навсегда, если false, будет использоваться код состояния 307, который является временным и не кэшируется.

Почему Next.js использует 307 и 308? Традиционно для временного перенаправления использовался код 302, а для постоянного — 301, но многие браузеры изменили метод запроса перенаправления на GET, независимо от исходного метода. Например, если браузер отправил запрос на POST /v1/users, который вернул код состояния 302 с местоположением /v2/users, последующий запрос мог быть GET /v2/users вместо ожидаемого POST /v2/users. Next.js использует коды состояния временного перенаправления 307 и постоянного перенаправления 308, чтобы явно сохранить метод запроса, который был использован.

• basePath: false или undefined — если false, basePath не будет включен при сопоставлении, может использоваться только для внешних перенаправлений.
• locale: false или undefined — нужно ли не включать локаль при сопоставлении.
• has — массив объектов со свойствами type, key и value.
• missing — массив пропущенных объектов со свойствами type, key и value.

Перенаправления проверяются до файловой системы, которая включает страницы и /public файлы.

При использовании маршрутизатора страниц перенаправления не применяются к клиентскому маршрутизации (Link, router.push) , если не присутствует

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

Когда применяется перенаправление, любые значения запроса, предоставленные в запросе, будут переданы в место назначения перенаправления. Например, см. следующую конфигурацию перенаправления:

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

При запросе /old-blog/post-1?hello=world, клиент будет перенаправлен на /blog/post-1?hello=world.

Сопоставление путей

Разрешены совпадения по пути, например /old-blog/:slug будет соответствовать /old-blog/hello-world (без вложенных путей):

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/news/:slug', // Matched parameters can be used in the destination
        permanent: true,
      },
    ]
  },
}

Сопоставление путей с подстановкой

Чтобы сопоставить путь с подстановкой, вы можете использовать * после параметра, например /blog/:slug* будет соответствовать /blog/a/b/c/d/hello-world.

module.exports = {
  async redirects() {
    return [
      {
        source: '/blog/:slug*',
        destination: '/news/:slug*', // Matched parameters can be used in the destination
        permanent: true,
      },
    ]
  },
}

Сопоставление путей с использованием регулярных выражений

Чтобы сопоставить путь с использованием регулярного выражения, вы можете заключить регулярное выражение в скобки после параметра, например /post/:slug(\\d{1,}) будет соответствовать /post/123, но не /post/abc:

module.exports = {
  async redirects() {
    return [
      {
        source: '/post/:slug(\\d{1,})',
        destination: '/news/:slug', // Matched parameters can be used in the destination
        permanent: false,
      },
    ]
  },
}

Следующие символы (, ), {, }, :, *, +, ? используются для сопоставления путей с использованием регулярных выражений, поэтому при использовании в source в качестве неспециальных значений они должны быть экранированы путем добавления \\ перед ними:

module.exports = {
  async redirects() {
    return [
      {
        // this will match `/english(default)/something` being requested
        source: '/english\\(default\\)/:slug',
        destination: '/en-us/:slug',
        permanent: false,
      },
    ]
  },
}

Сопоставление заголовков, cookie и параметров запроса

Для того, чтобы перенаправление срабатывало только при совпадении значений заголовков, cookie или параметров запроса с полем has или если они не совпадают с полем missing , можно использовать. Для срабатывания перенаправления, должны совпадать все элементы source, а все элементы has должны не совпадать.

Элементы has и missing могут иметь следующие поля:

• type: String — должно быть header, cookie, host, или query.
• key: String — ключ из выбранного типа для сопоставления.
• value: String или undefined — значение для проверки, если undefined, то любое значение будет соответствовать. Можно использовать регулярное выражение в виде строки для захвата определенной части значения, например, если значение first-(?<paramName>.*) используется для first-second, то second можно использовать в пункте назначения с :paramName.

module.exports = {
  async redirects() {
    return [
      // if the header `x-redirect-me` is present,
      // this redirect will be applied
      {
        source: '/:path((?!another-page$).*)',
        has: [
          {
            type: 'header',
            key: 'x-redirect-me',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
      // if the header `x-dont-redirect` is present,
      // this redirect will NOT be applied
      {
        source: '/:path((?!another-page$).*)',
        missing: [
          {
            type: 'header',
            key: 'x-do-not-redirect',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
      // if the source, query, and cookie are matched,
      // this redirect will be applied
      {
        source: '/specific/:path*',
        has: [
          {
            type: 'query',
            key: 'page',
            // the page value will not be available in the
            // destination since value is provided and doesn't
            // use a named capture group e.g. (?<page>home)
            value: 'home',
          },
          {
            type: 'cookie',
            key: 'authorized',
            value: 'true',
          },
        ],
        permanent: false,
        destination: '/another/:path*',
      },
      // if the header `x-authorized` is present and
      // contains a matching value, this redirect will be applied
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        permanent: false,
        destination: '/home?authorized=:authorized',
      },
      // if the host is `example.com`,
      // this redirect will be applied
      {
        source: '/:path((?!another-page$).*)',
        has: [
          {
            type: 'host',
            value: 'example.com',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
    ]
  },
}

Перенаправления с поддержкой basePath

При использовании поддержки basePath с перенаправлениями каждый source и destination автоматически предваряются basePath, если вы не добавите basePath: false в перенаправление:

module.exports = {
  basePath: '/docs',
 
  async redirects() {
    return [
      {
        source: '/with-basePath', // automatically becomes /docs/with-basePath
        destination: '/another', // automatically becomes /docs/another
        permanent: false,
      },
      {
        // does not add /docs since basePath: false is set
        source: '/without-basePath',
        destination: 'https://example.com',
        basePath: false,
        permanent: false,
      },
    ]
  },
}

Перенаправления с поддержкой i18n

При использовании поддержки i18n с перенаправлениями каждый source и destination автоматически предваряются, чтобы обработать настроенный locales, если вы не добавите locale: false в перенаправление. Если используется locale: false, вы должны предварять source и destination локалью, чтобы она соответствовала правильно.

module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  },
 
  async redirects() {
    return [
      {
        source: '/with-locale', // automatically handles all locales
        destination: '/another', // automatically passes the locale on
        permanent: false,
      },
      {
        // does not handle locales automatically since locale: false is set
        source: '/nl/with-locale-manual',
        destination: '/nl/another',
        locale: false,
        permanent: false,
      },
      {
        // this matches '/' since `en` is the defaultLocale
        source: '/en',
        destination: '/en/another',
        locale: false,
        permanent: false,
      },
      // it's possible to match all locales even when locale: false is set
      {
        source: '/:locale/page',
        destination: '/en/newpage',
        permanent: false,
        locale: false,
      },
      {
        // this gets converted to /(en|fr|de)/(.*) so will not match the top-level
        // `/` or `/fr` routes like /:path* would
        source: '/(.*)',
        destination: '/another',
        permanent: false,
      },
    ]
  },
}

В некоторых редких случаях вам может потребоваться назначить пользовательский код состояния для старых HTTP-клиентов, чтобы правильно перенаправить. В таких случаях вы можете использовать свойство statusCode вместо permanent, но не оба одновременно. Для обеспечения совместимости с IE11 заголовок Refresh автоматически добавляется для кода состояния 308.

Другие перенаправления

• Внутри маршрутов API и обработчиков маршрутов вы можете перенаправлять на основе входящего запроса.
• Внутри getStaticProps и getServerSideProps вы можете перенаправлять определенные страницы во время запроса.

История версий