redirects

Yönlendirmeler, gelen bir istek yolunu farklı bir hedef yola yönlendirmenize olanak tanır.

Yönlendirmeleri kullanmak için next.config.js adresindeki redirects anahtarını kullanabilirsiniz:

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

redirects source , destination ve permanent özelliklerine sahip nesneleri içeren bir dizinin döndürülmesini bekleyen bir asenkron işlevdir:

Next.js neden 307 ve 308 kullanıyor? Geleneksel olarak geçici bir yönlendirme için 302 ve kalıcı bir yönlendirme için 301 kullanılırdı, ancak birçok tarayıcı, orijinal yönteme bakılmaksızın yönlendirmenin istek yöntemini GET olarak değiştirdi. Örneğin, tarayıcı POST /v1/users adresine bir istekte bulunduysa ve bu istek /v2/users konumuyla 302 durum kodunu döndürdüyse, sonraki istek beklenen POST /v2/users yerine GET /v2/users olabilir. Next.js, kullanılan istek yöntemini açıkça korumak için 307 geçici yönlendirme ve 308 kalıcı yönlendirme durum kodlarını kullanır.

Yönlendirmeler, sayfaları ve /public dosyalarını içeren dosya sisteminden önce kontrol edilir.

Yönlendirmeler, Orta Yazılım mevcut olmadığı ve yolla eşleşmediği sürece istemci tarafı yönlendirmeye (Link, router.push) uygulanmaz.

Bir yönlendirme uygulandığında, istekte sağlanan tüm sorgu değerleri yönlendirme hedefine aktarılır. Örneğin, aşağıdaki yönlendirme yapılandırmasına bakın:

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

/old-blog/post-1?hello=world talep edildiğinde, istemci /blog/post-1?hello=world adresine yönlendirilecektir.

Path Matching

Yol eşleşmelerine izin verilir, örneğin /old-blog/:slug, /old-blog/hello-world ile eşleşir (iç içe geçmiş yollar yoktur):

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

Wildcard Path Matching

Bir joker karakter yolunu eşleştirmek için bir parametreden sonra * kullanabilirsiniz; örneğin /blog/:slug*, /blog/a/b/c/d/hello-world ile eşleşecektir:

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

Regex Path Matching

Bir regex yolunu eşleştirmek için regex'i bir parametreden sonra parantez içine alabilirsiniz; örneğin /post/:slug(\\d{1,}), /post/123 ile eşleşir ancak /post/abc ile eşleşmez:

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

Aşağıdaki karakterler (, ), {, }, :, *, +, ? regex yol eşleştirmesi için kullanılır, bu nedenle source içinde özel olmayan değerler olarak kullanıldıklarında önlerine \\ eklenerek kaçılmalıdır:

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

Bir yönlendirmeyi yalnızca başlık, çerez veya sorgu değerleri de has alanıyla eşleştiğinde veya missing alanıyla eşleşmediğinde eşleştirmek için kullanılabilir. Yönlendirmenin uygulanabilmesi için hem source hem de tüm has öğeleri eşleşmeli ve tüm missing öğeleri eşleşmemelidir.

has ve missing öğeleri aşağıdaki alanlara sahip olabilir:

next.config.js
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',
      },
    ]
  },
}

Redirects with basePath support

Yönlendirmelerle basePath desteğinden yararlanırken, yönlendirmeye basePath: false eklemediğiniz sürece her source ve destination 'nin önüne otomatik olarak basePath eklenir:

next.config.js
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,
      },
    ]
  },
}

Redirects with i18n support

Yönlendirmelerle i18n desteğinden yararlanırken, yönlendirmeye locale: false eklemediğiniz sürece her source ve destination yapılandırılmış locales 'u işlemek için otomatik olarak öneklenir. locale: false kullanılıyorsa, doğru şekilde eşleşmesi için source ve destination 'nin önüne bir yerel ayar eklemelisiniz.

next.config.js
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,
      },
    ]
  },
}

Bazı nadir durumlarda, eski HTTP İstemcilerinin düzgün şekilde yönlendirilmesi için özel bir durum kodu atamanız gerekebilir. Bu durumlarda, permanent özelliği yerine statusCode özelliğini kullanabilirsiniz, ancak ikisini birden kullanamazsınız. IE11 uyumluluğunu sağlamak için, 308 durum kodu için otomatik olarak bir Refresh başlığı eklenir.

Other Redirects

Version History

VersionChanges
v13.3.0missing added.
v10.2.0has added.
v9.5.0redirects added.