diff --git a/packages/next/src/client/app-next-dev.ts b/packages/next/src/client/app-next-dev.ts
index a97caf4bcc231..cac83496b36b2 100644
--- a/packages/next/src/client/app-next-dev.ts
+++ b/packages/next/src/client/app-next-dev.ts
@@ -1,9 +1,9 @@
 // TODO-APP: hydration warning
 
+import './app-webpack'
 import { appBootstrap } from './app-bootstrap'
 
 appBootstrap(() => {
-  require('./app-webpack')
   const { hydrate } = require('./app-index')
   hydrate()
 })
diff --git a/packages/next/src/client/app-next.ts b/packages/next/src/client/app-next.ts
index 29e1dab5c91f3..1ac94dc017f2a 100644
--- a/packages/next/src/client/app-next.ts
+++ b/packages/next/src/client/app-next.ts
@@ -1,9 +1,9 @@
+// This import must go first because it needs to patch webpack chunk loading
+// before React patches chunk loading.
+import './app-webpack'
 import { appBootstrap } from './app-bootstrap'
 
 appBootstrap(() => {
-  // This import must go first because it needs to patch webpack chunk loading
-  // before React patches chunk loading.
-  require('./app-webpack')
   const { hydrate } = require('./app-index')
   // Include app-router and layout-router in the main chunk
   require('next/dist/client/components/app-router')
diff --git a/test/e2e/app-dir/navigation/app/router/dynamic-gsp/[slug]/error.js b/test/e2e/app-dir/navigation/app/router/dynamic-gsp/[slug]/error.js
new file mode 100644
index 0000000000000..488098e6e921c
--- /dev/null
+++ b/test/e2e/app-dir/navigation/app/router/dynamic-gsp/[slug]/error.js
@@ -0,0 +1,8 @@
+// Add error.js to let this file be added to the flight manifest,
+// and get url encoded, and load through react RSC renderer.
+
+'use client'
+
+export default function Error() {
+  return <div>My Error</div>
+}
diff --git a/test/e2e/app-dir/navigation/app/router/dynamic-gsp/[slug]/page.js b/test/e2e/app-dir/navigation/app/router/dynamic-gsp/[slug]/page.js
new file mode 100644
index 0000000000000..d46142399e584
--- /dev/null
+++ b/test/e2e/app-dir/navigation/app/router/dynamic-gsp/[slug]/page.js
@@ -0,0 +1,7 @@
+export default function Page({ params }) {
+  return <div id="dynamic-gsp-content">{'slug:' + params.slug}</div>
+}
+
+export function generateStaticParams() {
+  return [{ slug: '1' }, { slug: '2' }, { slug: '3' }]
+}
diff --git a/test/e2e/app-dir/navigation/app/router/page.js b/test/e2e/app-dir/navigation/app/router/page.js
new file mode 100644
index 0000000000000..97b02cb1cc8e1
--- /dev/null
+++ b/test/e2e/app-dir/navigation/app/router/page.js
@@ -0,0 +1,23 @@
+'use client'
+
+import Script from 'next/script'
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <div>
+      <button
+        id="dynamic-link"
+        onClick={() => router.push('/router/dynamic-gsp/1/')}
+      >
+        Test routing
+      </button>
+      {/* adding a script here to make sure app internals might execute earlier */}
+      <Script
+        src="https://connect.facebook.net/en_US/sdk.js"
+        strategy="beforeInteractive"
+      />
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/navigation/navigation.test.ts b/test/e2e/app-dir/navigation/navigation.test.ts
index b0d753951df0a..4bf3238bb5308 100644
--- a/test/e2e/app-dir/navigation/navigation.test.ts
+++ b/test/e2e/app-dir/navigation/navigation.test.ts
@@ -618,6 +618,19 @@ createNextDescribe(
           }
         }
       })
+
+      it('should load chunks correctly without double encoding of url', async () => {
+        const browser = await next.browser('/router')
+
+        await browser
+          .elementByCss('#dynamic-link')
+          .click()
+          .waitForElementByCss('#dynamic-gsp-content')
+
+        expect(await browser.elementByCss('#dynamic-gsp-content').text()).toBe(
+          'slug:1'
+        )
+      })
     })
 
     describe('SEO', () => {