diff --git a/docs/01-app/02-guides/redirecting.mdx b/docs/01-app/02-guides/redirecting.mdx index d93f42247e8cc..4d463984ffbcf 100644 --- a/docs/01-app/02-guides/redirecting.mdx +++ b/docs/01-app/02-guides/redirecting.mdx @@ -14,13 +14,13 @@ There are a few ways you can handle redirects in Next.js. This page will go thro -| API | Purpose | Where | Status Code | -| -------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------- | -------------------------------------- | -| [`redirect`](#redirect-function) | Redirect user after a mutation or event | Server Components, Server Actions, Route Handlers | 307 (Temporary) or 303 (Server Action) | -| [`permanentRedirect`](#permanentredirect-function) | Redirect user after a mutation or event | Server Components, Server Actions, Route Handlers | 308 (Permanent) | -| [`useRouter`](#userouter-hook) | Perform a client-side navigation | Event Handlers in Client Components | N/A | -| [`redirects` in `next.config.js`](#redirects-in-nextconfigjs) | Redirect an incoming request based on a path | `next.config.js` file | 307 (Temporary) or 308 (Permanent) | -| [`NextResponse.redirect`](#nextresponseredirect-in-middleware) | Redirect an incoming request based on a condition | Middleware | Any | +| API | Purpose | Where | Status Code | +| -------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------- | +| [`redirect`](#redirect-function) | Redirect user after a mutation or event | Server Components, Client Components, Server Actions, Route Handlers | 307 (Temporary) or 303 (Server Action) | +| [`permanentRedirect`](#permanentredirect-function) | Redirect user after a mutation or event | Server Components, Client Components, Server Actions, Route Handlers | 308 (Permanent) | +| [`useRouter`](#userouter-hook) | Perform a client-side navigation | Event Handlers in Client Components | N/A | +| [`redirects` in `next.config.js`](#redirects-in-nextconfigjs) | Redirect an incoming request based on a path | `next.config.js` file | 307 (Temporary) or 308 (Permanent) | +| [`NextResponse.redirect`](#nextresponseredirect-in-middleware) | Redirect an incoming request based on a condition | Middleware | Any | @@ -82,7 +82,7 @@ export async function createPost(id) { > > - `redirect` returns a 307 (Temporary Redirect) status code by default. When used in a Server Action, it returns a 303 (See Other), which is commonly used for redirecting to a success page as a result of a POST request. > - `redirect` throws an error so it should be called **outside** the `try` block when using `try/catch` statements. -> - `redirect` can be called in Client Components during the rendering process but not in event handlers. You can use the [`useRouter` hook](#userouter-hook) instead. +> - Although `redirect` can be used anywhere in Client Components, in client-side callbacks it is preferable to use the `push` and `replace` methods from the [`useRouter` hook](#userouter-hook). > - `redirect` also accepts absolute URLs and can be used to redirect to external links. > - If you'd like to redirect before the render process, use [`next.config.js`](#redirects-in-nextconfigjs) or [Middleware](#nextresponseredirect-in-middleware). diff --git a/docs/01-app/03-api-reference/04-functions/permanentRedirect.mdx b/docs/01-app/03-api-reference/04-functions/permanentRedirect.mdx index fb29d2434b6c9..5ab701ff0454a 100644 --- a/docs/01-app/03-api-reference/04-functions/permanentRedirect.mdx +++ b/docs/01-app/03-api-reference/04-functions/permanentRedirect.mdx @@ -6,12 +6,14 @@ related: - app/api-reference/functions/redirect --- -The `permanentRedirect` function allows you to redirect the user to another URL. `permanentRedirect` can be used in Server Components, Client Components, [Route Handlers](/docs/app/api-reference/file-conventions/route), and [Server Actions](/docs/app/getting-started/updating-data). +The `permanentRedirect` function allows you to redirect the user to another URL. `permanentRedirect` can be used in [Server and Client Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/api-reference/file-conventions/route), and [Server Actions](/docs/app/getting-started/updating-data). It can also be used from client-side callbacks (e.g. effects or event handlers) if needed. When used in a streaming context, 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 308 (Permanent) HTTP redirect response to the caller. If a resource doesn't exist, you can use the [`notFound` function](/docs/app/api-reference/functions/not-found) instead. +The [behavior of `permanentRedirect`](/docs/app/api-reference/functions/redirect#behavior) is very similar to `redirect`, different only in the status code (308) served to the caller. + > **Good to know**: If you prefer to return a 307 (Temporary) HTTP redirect instead of 308 (Permanent), you can use the [`redirect` function](/docs/app/api-reference/functions/redirect) instead. ## Parameters diff --git a/docs/01-app/03-api-reference/04-functions/redirect.mdx b/docs/01-app/03-api-reference/04-functions/redirect.mdx index 9c218afab9eab..c1eed96b02aa0 100644 --- a/docs/01-app/03-api-reference/04-functions/redirect.mdx +++ b/docs/01-app/03-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 while rendering in [Server and Client Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/api-reference/file-conventions/route), and [Server Actions](/docs/app/getting-started/updating-data). +The `redirect` function allows you to redirect the user to another URL. `redirect` can be used while rendering in [Server and Client Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/api-reference/file-conventions/route), and [Server Actions](/docs/app/getting-started/updating-data). It can also be used from client-side callbacks (e.g. effects or event handlers) if needed. When used in a [streaming context](/docs/app/getting-started/linking-and-navigating#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. @@ -50,7 +50,7 @@ The `type` parameter has no effect when used in Server Components. - In Server Actions and Route Handlers, redirect should be called **outside** the `try` block when using `try/catch` statements. - If you prefer to return a 308 (Permanent) HTTP redirect instead of 307 (Temporary), you can use the [`permanentRedirect` function](/docs/app/api-reference/functions/permanentRedirect) instead. - `redirect` throws an error so it should be called **outside** the `try` block when using `try/catch` statements. -- `redirect` can be called in Client Components during the rendering process but not in event handlers. You can use the [`useRouter` hook](/docs/app/api-reference/functions/use-router) instead. +- `redirect` can also be used in Client Components. - `redirect` also accepts absolute URLs and can be used to redirect to external links. - If you'd like to redirect before the render process, use [`next.config.js`](/docs/app/guides/redirecting#redirects-in-nextconfigjs) or [Middleware](/docs/app/guides/redirecting#nextresponseredirect-in-middleware). @@ -146,7 +146,7 @@ export function ClientRedirect() { > **Good to know**: When using `redirect` in a Client Component on initial page load during Server-Side Rendering (SSR), it will perform a server-side redirect. -`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. +`redirect` can also be used in a Client Component through a Server Action. ```tsx filename="app/client-redirect.tsx" switcher 'use client' @@ -217,6 +217,7 @@ The `redirect()` method uses a `307` by default, instead of a `302` temporary re ## Version History -| Version | Changes | -| --------- | ---------------------- | -| `v13.0.0` | `redirect` introduced. | +| Version | Changes | +| --------- | ------------------------------------- | +| `v15.0.0` | Allowed in Client Component callbacks | +| `v13.0.0` | `redirect` introduced. |