redirect

redirect işlevi, kullanıcıyı başka bir URL'ye yönlendirmenize olanak tanır. redirect Sunucu Bileşenlerinde, Rota İşleyicilerinde ve Sunucu Eylemlerinde kullanılabilir.

Bir akış bağlamında kullanıldığında, bu, istemci tarafında yönlendirmeyi yaymak için bir meta etiket ekleyecektir. Bir sunucu eyleminde kullanıldığında, arayan kişiye 303 HTTP yönlendirme yanıtı sunar. Aksi takdirde, arayan kişiye 307 HTTP yönlendirme yanıtı sunar.

Bir kaynak mevcut değilse, bunun yerine notFound işlevini kullanabilirsiniz.

Bilmekte fayda var: 307 (Geçici) yerine 308 (Kalıcı) HTTP yönlendirmesi döndürmeyi tercih ediyorsanız, bunun yerine permanentRedirect işlevini kullanabilirsiniz.

Parameters

redirect işlevi iki bağımsız değişken kabul eder:

redirect(path, type)

Varsayılan olarak, redirect Sunucu Eylemlerinde push (tarayıcı geçmişi yığınına yeni bir girdi ekleme) ve diğer her yerde replace (tarayıcı geçmişi yığınındaki geçerli URL'yi değiştirme) kullanacaktır. Bu davranışı type parametresini belirterek geçersiz kılabilirsiniz.

type parametresinin Sunucu Bileşenlerinde kullanıldığında hiçbir etkisi yoktur.

Returns

redirect herhangi bir değer döndürmez.

Example

Server Component

redirect() işlevinin çağrılması bir NEXT_REDIRECT hatası verir ve hatanın verildiği rota segmentinin işlenmesini sonlandırır.

import { redirect } from 'next/navigation'
 
async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}

Bilmekte fayda var: redirect, TypeScript'i kullandığı için return redirect() kullanmanızı gerektirmez never tip.

Client Component

redirect bir Sunucu Eylemi aracılığıyla bir İstemci Bileşeninde kullanılabilir. Kullanıcıyı yeniden yönlendirmek için bir olay işleyici kullanmanız gerekiyorsa useRouter Kanca.

'use client'
 
import { navigate } from './actions'
 
export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'use server'
 
import { redirect } from 'next/navigation'
 
export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`)
}

FAQ

Why does redirect use 307 and 308?

redirect() kullanırken, kullanılan durum kodlarının geçici yönlendirme için 307 ve kalıcı yönlendirme için 308 olduğunu fark edebilirsiniz. Geleneksel olarak geçici bir yönlendirme için 302 ve kalıcı bir yönlendirme için 301 kullanılırken, birçok tarayıcı, köken istek yöntemine bakılmaksızın bir 302 kullanırken yönlendirmenin istek yöntemini bir POST 'den GET isteğine değiştirdi.

Aşağıdaki /users adresinden /people adresine yönlendirme örneğini ele alırsak, yeni bir kullanıcı oluşturmak için /users adresine bir POST isteği yaparsanız ve bir 302 geçici yönlendirmesine uyuyorsanız, istek yöntemi bir POST isteğinden bir GET isteğine değiştirilecektir. Bu mantıklı değildir, çünkü yeni bir kullanıcı oluşturmak için /people adresine POST isteği yapmalısınız, GET isteği değil.

307 durum kodunun eklenmesi, istek yönteminin POST olarak korunduğu anlamına gelir.

• 302 - Geçici yönlendirme, istek yöntemini POST adresinden GET
• 307 - Geçici yönlendirme, istek yöntemini şu şekilde koruyacaktır POST

redirect() yöntemi, 302 geçici yönlendirmesi yerine varsayılan olarak bir 307 kullanır, yani istekleriniz her zaman POST istekleri olarak korunacaktır.

HTTP Yönlendirmeleri hakkında adresinden daha fazla bilgi edinin.

Version History