Handle redirects in new router

packages/next/client/components/redirect.ts

@@ -0,0 +1,14 @@
+export const REDIRECT_ERROR_CODE = 'NEXT_REDIRECT'
+
+class Redirect extends Error {
+  url: string
+  code: typeof REDIRECT_ERROR_CODE = REDIRECT_ERROR_CODE
+  constructor(url: string) {
+    // Message is not used.
+    super('redirect')
+    this.url = url
+  }
+}
+export function redirect(url: string) {
+  throw new Redirect(url)
+}

packages/next/server/app-render.tsx

@@ -27,6 +27,7 @@ import {
 } from '../build/webpack/plugins/flight-manifest-plugin'
 import { FlushEffectsContext } from '../client/components/hooks-client'
 import type { ComponentsType } from '../build/webpack/loaders/next-app-loader'
+import { REDIRECT_ERROR_CODE } from '../client/components/redirect'
 
 // this needs to be required lazily so that `next-server` can set
 // the env before we require
@@ -1189,6 +1190,10 @@ export async function renderToHTMLOrFlight(
         flushEffectsToHead: true,
       })
     } catch (err) {
+      if (err.code === REDIRECT_ERROR_CODE) {
+        throw err
+      }
+
       // TODO-APP: show error overlay in development. `element` should probably be wrapped in AppRouter for this case.
       const renderStream = await renderToInitialStream({
         ReactDOMServer,
@@ -1221,5 +1226,19 @@ export async function renderToHTMLOrFlight(
     }
   }
 
-  return new RenderResult(await bodyResult())
+  try {
+    return new RenderResult(await bodyResult())
+  } catch (err) {
+    if (err.code === REDIRECT_ERROR_CODE) {
+      ;(renderOpts as any).pageData = {
+        pageProps: {
+          __N_REDIRECT: err.url,
+          __N_REDIRECT_STATUS: 307,
+        },
+      }
+      ;(renderOpts as any).isRedirect = true
+      return RenderResult.fromStatic('')
+    }
+    throw err
+  }
 }

test/e2e/app-dir/app/app/redirect/clientcomponent/page.client.js

@@ -0,0 +1,6 @@
+import { redirect } from 'next/dist/client/components/redirect'
+
+export default function Page() {
+  redirect('/redirect/result')
+  return <></>
+}

test/e2e/app-dir/app/app/redirect/result/page.server.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1 id="result-page">Result Page</h1>
+}

test/e2e/app-dir/app/app/redirect/servercomponent/page.server.js

@@ -0,0 +1,6 @@
+import { redirect } from 'next/dist/client/components/redirect'
+
+export default function Page() {
+  redirect('/redirect/result')
+  return <></>
+}

test/e2e/app-dir/index.test.ts

@@ -1417,6 +1417,24 @@ describe('app dir', () => {
         expect(errors).toInclude('Error during SSR')
       })
     })
+
+    describe('redirect', () => {
+      it('should redirect in a server component', async () => {
+        const browser = await webdriver(next.url, '/redirect/servercomponent')
+        await browser.waitForElementByCss('#result-page')
+        expect(await browser.elementByCss('#result-page').text()).toBe(
+          'Result Page'
+        )
+      })
+
+      it('should redirect in a client component', async () => {
+        const browser = await webdriver(next.url, '/redirect/clientcomponent')
+        await browser.waitForElementByCss('#result-page')
+        expect(await browser.elementByCss('#result-page').text()).toBe(
+          'Result Page'
+        )
+      })
+    })
   }
 
   describe('without assetPrefix', () => {