diff --git a/docs/02-app/02-api-reference/04-functions/redirect.mdx b/docs/02-app/02-api-reference/04-functions/redirect.mdx index 67cbe3a86ed69c..8ba399dfe2b00b 100644 --- a/docs/02-app/02-api-reference/04-functions/redirect.mdx +++ b/docs/02-app/02-api-reference/04-functions/redirect.mdx @@ -6,7 +6,7 @@ related: - app/api-reference/functions/permanentRedirect --- -The `redirect` function allows you to redirect the user to another URL. `redirect` can be used in Server Components, Client Components, [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations). +The `redirect` function allows you to redirect the user to another URL. `redirect` can be used in Server Components, [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations). When used in a [streaming context](/docs/app/building-your-application/routing/loading-ui-and-streaming#what-is-streaming), this will insert a meta tag to emit the redirect on the client side. When used in a server action, it will serve a 303 HTTP redirect response to the caller. Otherwise, it will serve a 307 HTTP redirect response to the caller. @@ -37,6 +37,8 @@ The `type` parameter has no effect when used in Server Components. ## Example +### Server Component + Invoking the `redirect()` function throws a `NEXT_REDIRECT` error and terminates rendering of the route segment in which it was thrown. > **Good to know**: If you need to programmatically redirect the user after a certain event in a Client Component, you can use the [`useRouter`](/docs/app/api-reference/functions/use-router) hook. @@ -62,6 +64,60 @@ export default async function Profile({ params }) { > **Good to know**: `redirect` does not require you to use `return redirect()` as it uses the TypeScript [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never) type. +### Client Component + +`redirect` can be used in a Client Component through a Server Action. If you need to use an event handler to redirect the user, you can use the [`useRouter`](/docs/app/api-reference/functions/use-router) hook. + +```tsx filename="app/client-redirect.tsx" switcher +'use client' + +import { navigate } from './actions' + +export function ClientRedirect() { + return ( +
+ + +
+ ) +} +``` + +```jsx filename="app/client-redirect.jsx" switcher +'use client' + +import { navigate } from './actions' + +export function ClientRedirect() { + return ( +
+ + +
+ ) +} +``` + +```ts filename="app/actions.ts" switcher +'use server' + +import { redirect } from 'next/navigation' + +export async function navigate(data: FormData) { + redirect(`/posts/${data.get('id')}`) +} +``` + +```js filename="app/actions.js" switcher +'use server' + +import { redirect } from 'next/navigation' + +export async function navigate(data) { + redirect(`/posts/${data.get('id')}`) +} +``` + ## FAQ ### Why does `redirect` use 307 and 308?