fix(next): properly construct local req url (#14907)

Fixes #14900. Supersedes
#14901.

Since #14869, loading the
admin panel with a `serverURL` crashes with the following error:

```
⨯ [TypeError: Invalid URL] {
  code: 'ERR_INVALID_URL',
  input: 'http://localhost:3000http://localhost:3000/admin',
  digest: '185251315'
}
[12:26:08] ERROR: Failed to create URL object from URL: http://localhost:3000http://localhost:3000/admin, falling back to http://localhost:3000http://localhost:3000/admin
```

This is because the suffix used to create a local req object was changed
to include the server URL. As the name implies, it should be a relative
path that appends onto the base URL.

Author: jacobsfletch

.github/workflows/main.yml

@@ -326,6 +326,7 @@ jobs:
           - plugin-redirects
           - plugin-seo
           - sort
+          - server-url
           - trash
           - versions
           - uploads

packages/next/src/views/NotFound/index.tsx

@@ -48,6 +48,7 @@ export const NotFoundPage = async ({
 
   const searchParams = await searchParamsPromise
   const queryString = `${qs.stringify(searchParams ?? {}, { addQueryPrefix: true })}`
+
   const {
     locale,
     permissions,
@@ -65,7 +66,8 @@ export const NotFoundPage = async ({
           ignoreQueryPrefix: true,
         }),
       },
-      urlSuffix: `${formatAdminURL({ adminRoute, path: '/not-found', serverURL: config.serverURL })}${searchParams ? queryString : ''}`,
+      // intentionally omit `serverURL` to keep URL relative
+      urlSuffix: `${formatAdminURL({ adminRoute, path: '/not-found' })}${searchParams ? queryString : ''}`,
     },
   })
 

packages/next/src/views/Root/index.tsx

@@ -120,6 +120,7 @@ export const RootPage = async ({
   }
 
   const queryString = `${qs.stringify(searchParams ?? {}, { addQueryPrefix: true })}`
+
   const {
     cookies,
     locale,
@@ -138,7 +139,11 @@ export const RootPage = async ({
           ignoreQueryPrefix: true,
         }),
       },
-      urlSuffix: `${currentRoute}${searchParams ? queryString : ''}`,
+      // intentionally omit `serverURL` to keep URL relative
+      urlSuffix: `${formatAdminURL({
+        adminRoute,
+        path: Array.isArray(params.segments) ? `/${params.segments.join('/')}` : null,
+      })}${searchParams ? queryString : ''}`,
     },
   })
 

test/server-url/.gitignore

@@ -0,0 +1,2 @@
+/media
+/media-gif

test/server-url/config.ts

@@ -0,0 +1,31 @@
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import { fileURLToPath } from 'node:url'
+import path from 'path'
+
+import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
+import { devUser } from '../credentials.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export default buildConfigWithDefaults({
+  serverURL: 'http://localhost:3000',
+  admin: {
+    importMap: {
+      baseDir: path.resolve(dirname),
+    },
+  },
+  editor: lexicalEditor({}),
+  onInit: async (payload) => {
+    await payload.create({
+      collection: 'users',
+      data: {
+        email: devUser.email,
+        password: devUser.password,
+      },
+    })
+  },
+  typescript: {
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
+  },
+})

test/server-url/e2e.spec.ts

@@ -0,0 +1,35 @@
+import type { Page } from '@playwright/test'
+
+import { expect, test } from '@playwright/test'
+import * as path from 'path'
+import { fileURLToPath } from 'url'
+
+import { ensureCompilationIsDone, initPageConsoleErrorCatch } from '../helpers.js'
+import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
+import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
+import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+test.describe('serverURL', () => {
+  let page: Page
+  let url: AdminUrlUtil
+
+  test.beforeAll(async ({ browser }, testInfo) => {
+    testInfo.setTimeout(TEST_TIMEOUT_LONG)
+
+    const { payload, serverURL } = await initPayloadE2ENoConfig({ dirname })
+    url = new AdminUrlUtil(serverURL, 'posts')
+
+    const context = await browser.newContext()
+    page = await context.newPage()
+    initPageConsoleErrorCatch(page)
+    await ensureCompilationIsDone({ page, serverURL })
+  })
+
+  test('can load admin panel when serverURL is set', async () => {
+    await page.goto(url.admin)
+    await expect(page.getByText('Dashboard')).toBeVisible()
+  })
+})