Use push for Server Action redirections

packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts

@@ -185,6 +185,13 @@ export function serverActionReducer(
       action.mutable.inFlightServerAction!
     ) as Awaited<FetchServerActionResult>
 
+    // Make sure the redirection is a push instead of a replace.
+    // Issue: https://github.com/vercel/next.js/issues/53911
+    if (redirectLocation) {
+      state.pushRef.pendingPush = true
+      mutable.pendingPush = true
+    }
+
     mutable.previousTree = state.tree
 
     if (!flightData) {

test/e2e/app-dir/actions/app-action.test.ts

@@ -74,6 +74,24 @@ createNextDescribe(
       }, 'same')
     })
 
+    it('should push new route when redirecting', async () => {
+      const browser = await next.browser('/header')
+
+      await browser.elementByCss('#setCookieAndRedirect').click()
+      await check(async () => {
+        return (await browser.elementByCss('#redirected').text()) || ''
+      }, 'redirected')
+
+      // Ensure we can navigate back
+      await browser.back()
+
+      await check(async () => {
+        return (
+          (await browser.elementByCss('#setCookieAndRedirect').text()) || ''
+        )
+      }, 'setCookieAndRedirect')
+    })
+
     it('should support headers in client imported actions', async () => {
       const logs: string[] = []
       next.on('stdout', (log) => {

test/e2e/app-dir/actions/app/header/ui.js

@@ -67,6 +67,7 @@ export default function UI({
       </button>
       <form>
         <button
+          id="setCookieAndRedirect"
           formAction={async () => {
             await setCookieAndRedirect(
               'redirect',