fix: App Router with assetPrefix: / (#49622)

This is a follow-up PR for #49403. #49403 validates `assetPrefix` is not a relative path. But App Router throws an error with the `assetPrefix: "/"` option. So I've fixed this. <img width="964" alt="Screenshot 2023-05-10 at 23 41 56" src="https://github.com/vercel/next.js/assets/250407/6e83cb57-468c-46d6-a91a-747ad39d6c3c"> `assetPrefix: "/"` has no meaning, but it shouldn't fail.
vercel · Jun 7, 2023 · 675dec0 · 675dec0
1 parent e19007d
commit 675dec0
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 1 deletion.
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -1810,7 +1810,13 @@ export default async function getBaseWebpackConfig(
     output: {
       // we must set publicPath to an empty value to override the default of
       // auto which doesn't work in IE11
-      publicPath: `${config.assetPrefix || ''}/_next/`,
+      publicPath: `${
+        config.assetPrefix
+          ? config.assetPrefix.endsWith('/')
+            ? config.assetPrefix.slice(0, -1)
+            : config.assetPrefix
+          : ''
+      }/_next/`,
       path: !dev && isNodeServer ? path.join(outputPath, 'chunks') : outputPath,
       // On the server we don't use hashes
       filename:

diff --git a/test/integration/app-config-asset-prefix/app/layout.js b/test/integration/app-config-asset-prefix/app/layout.js
@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/integration/app-config-asset-prefix/app/page.js b/test/integration/app-config-asset-prefix/app/page.js
@@ -0,0 +1,3 @@
+export default function Index(props) {
+  return <p id="title">IndexPage</p>
+}
diff --git a/test/integration/app-config-asset-prefix/next.config.js b/test/integration/app-config-asset-prefix/next.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  assetPrefix: '/',
+}
diff --git a/test/integration/app-config-asset-prefix/test/index.test.js b/test/integration/app-config-asset-prefix/test/index.test.js
@@ -0,0 +1,35 @@
+/* eslint-env jest */
+import { join } from 'path'
+import {
+  killApp,
+  findPort,
+  launchApp,
+  hasRedbox,
+  waitFor,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+const appDir = join(__dirname, '../')
+
+describe('App assetPrefix config', () => {
+  let appPort
+  let app
+
+  beforeAll(async () => {
+    appPort = await findPort()
+    app = await launchApp(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+
+  it('should render correctly with assetPrefix: "/"', async () => {
+    const browser = await webdriver(appPort, '/')
+    try {
+      await waitFor(2000)
+      expect(await hasRedbox(browser, false)).toBe(false)
+      const title = await browser.elementById('title').text()
+      expect(title).toBe('IndexPage')
+    } finally {
+      await browser.close()
+    }
+  })
+})