Combine redirect function in new router

packages/next/client/components/hooks-server-context.ts

@@ -11,22 +11,22 @@ export class DynamicServerError extends Error {
 // https://github.com/facebook/react/blob/dd2d6522754f52c70d02c51db25eb7cbd5d1c8eb/packages/react/src/ReactServerContext.js#L101
 const createContext = <T>(name: string, defaultValue: T | null = null) => {
   // @ts-expect-error __NEXT_DEV_SERVER_CONTEXT__ is a global
-  if (!global.__NEXT_DEV_SERVER_CONTEXT__) {
-    // @ts-expect-error __NEXT_DEV_SERVER_CONTEXT__ is a global
-    global.__NEXT_DEV_SERVER_CONTEXT__ = {}
+  if (!global.__NEXT_SERVER_CONTEXT__) {
+    // @ts-expect-error __NEXT_SERVER_CONTEXT__ is a global
+    global.__NEXT_SERVER_CONTEXT__ = {}
   }
 
-  // @ts-expect-error __NEXT_DEV_SERVER_CONTEXT__ is a global
-  if (!global.__NEXT_DEV_SERVER_CONTEXT__[name]) {
-    // @ts-expect-error __NEXT_DEV_SERVER_CONTEXT__ is a global
-    global.__NEXT_DEV_SERVER_CONTEXT__[name] = createServerContext(
+  // @ts-expect-error __NEXT_SERVER_CONTEXT__ is a global
+  if (!global.__NEXT_SERVER_CONTEXT__[name]) {
+    // @ts-expect-error __NEXT_SERVER_CONTEXT__ is a global
+    global.__NEXT_SERVER_CONTEXT__[name] = createServerContext(
       name,
       defaultValue
     )
   }
 
-  // @ts-expect-error __NEXT_DEV_SERVER_CONTEXT__ is a global
-  return global.__NEXT_DEV_SERVER_CONTEXT__[name]
+  // @ts-expect-error __NEXT_SERVER_CONTEXT__ is a global
+  return global.__NEXT_SERVER_CONTEXT__[name]
 }
 
 export const CONTEXT_NAMES = {

packages/next/client/components/redirect.ts

@@ -1,6 +1,21 @@
+import React, { experimental_use as use } from 'react'
+import { AppRouterContext } from '../../shared/lib/app-router-context'
+import { createInfinitePromise } from './infinite-promise'
+
 export const REDIRECT_ERROR_CODE = 'NEXT_REDIRECT'
 
 export function redirect(url: string) {
+  if (process.browser) {
+    const router = use(AppRouterContext)
+    setTimeout(() => {
+      // @ts-ignore startTransition exists
+      React.startTransition(() => {
+        router.replace(url, {})
+      })
+    })
+    // setTimeout is used to start a new transition during render, this is an intentional hack around React.
+    use(createInfinitePromise())
+  }
   // eslint-disable-next-line no-throw-literal
   throw {
     url,

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

@@ -1,6 +1,6 @@
 'client'
 
-import { redirect } from 'next/dist/client/components/redirect-client'
+import { redirect } from 'next/dist/client/components/redirect'
 import React from 'react'
 
 export default function Page() {