fix: passes serverURL through to all formatAdminURL calls (#14869)

Fixes issues with basePath and NextJS. Many of the links created in the
admin panel were not passing a `serverURL` through to the
`formatAdminURL` helper.

This PR adds all the missing `serverURL` instances and adds a new helper
`formatApiURL` that allows for similar route creation but for api
routes.

Author: JarrodMFlesch

packages/next/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { SanitizedConfig } from 'payload'
 
-import { Button } from '@payloadcms/ui'
+import { Button, useConfig } from '@payloadcms/ui'
 import { useParams, usePathname, useSearchParams } from 'next/navigation.js'
 import { formatAdminURL } from 'payload/shared'
 import React from 'react'
@@ -25,6 +25,7 @@ export const DocumentTabLink: React.FC<{
 }) => {
   const pathname = usePathname()
   const params = useParams()
+  const { config } = useConfig()
 
   const searchParams = useSearchParams()
 
@@ -36,6 +37,7 @@ export const DocumentTabLink: React.FC<{
   let docPath = formatAdminURL({
     adminRoute,
     path: `/${isCollection ? 'collections' : 'globals'}/${entitySlug}`,
+    serverURL: config.serverURL,
   })
 
   if (isCollection) {

packages/next/src/elements/Nav/index.client.tsx

@@ -28,6 +28,7 @@ export const DefaultNavClient: React.FC<{
       },
       folders,
       routes: { admin: adminRoute },
+      serverURL,
     },
   } = useConfig()
 
@@ -36,6 +37,7 @@ export const DefaultNavClient: React.FC<{
   const folderURL = formatAdminURL({
     adminRoute,
     path: foldersRoute,
+    serverURL,
   })
 
   const viewingRootFolderView = pathname.startsWith(folderURL)
@@ -51,12 +53,12 @@ export const DefaultNavClient: React.FC<{
               let id: string
 
               if (type === EntityType.collection) {
-                href = formatAdminURL({ adminRoute, path: `/collections/${slug}` })
+                href = formatAdminURL({ adminRoute, path: `/collections/${slug}`, serverURL })
                 id = `nav-${slug}`
               }
 
               if (type === EntityType.global) {
-                href = formatAdminURL({ adminRoute, path: `/globals/${slug}` })
+                href = formatAdminURL({ adminRoute, path: `/globals/${slug}`, serverURL })
                 id = `nav-global-${slug}`
               }
 

packages/next/src/utilities/handleAuthRedirect.ts

@@ -31,6 +31,7 @@ export const handleAuthRedirect = ({ config, route, searchParams, user }: Args):
   const redirectTo = formatAdminURL({
     adminRoute,
     path: user ? unauthorizedRoute : loginRouteFromConfig,
+    serverURL: config.serverURL,
   })
 
   const parsedLoginRouteSearchParams = qs.parse(redirectTo.split('?')[1] ?? '')

packages/next/src/views/Account/ResetPreferences/index.tsx

@@ -2,6 +2,7 @@
 import type { TypedUser } from 'payload'
 
 import { Button, ConfirmationModal, toast, useModal, useTranslation } from '@payloadcms/ui'
+import { formatApiURL } from 'payload/shared'
 import * as qs from 'qs-esm'
 import { Fragment, useCallback } from 'react'
 
@@ -34,13 +35,20 @@ export const ResetPreferences: React.FC<{
     )
 
     try {
-      const res = await fetch(`${apiRoute}/payload-preferences${stringifiedQuery}`, {
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
+      const res = await fetch(
+        formatApiURL({
+          apiRoute,
+          path: `/payload-preferences${stringifiedQuery}`,
+          serverURL: undefined,
+        }),
+        {
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          method: 'DELETE',
         },
-        method: 'DELETE',
-      })
+      )
 
       const json = await res.json()
       const message = json.message

packages/next/src/views/CreateFirstUser/index.client.tsx

@@ -20,6 +20,7 @@ import {
   useTranslation,
 } from '@payloadcms/ui'
 import { abortAndIgnore, handleAbortRef } from '@payloadcms/ui/shared'
+import { formatApiURL } from 'payload/shared'
 import React, { useEffect } from 'react'
 
 export const CreateFirstUserClient: React.FC<{
@@ -84,7 +85,11 @@ export const CreateFirstUserClient: React.FC<{
 
   return (
     <Form
-      action={`${serverURL}${apiRoute}/${userSlug}/first-register`}
+      action={formatApiURL({
+        apiRoute,
+        path: `/${userSlug}/first-register`,
+        serverURL,
+      })}
       initialState={{
         ...initialState,
         'confirm-password': {

packages/next/src/views/Dashboard/Default/index.tsx

@@ -47,6 +47,7 @@ export function DefaultDashboard(props: DashboardViewServerProps) {
           components: { afterDashboard, beforeDashboard },
         },
         routes: { admin: adminRoute },
+        serverURL,
       },
     },
     payload,
@@ -96,11 +97,16 @@ export function DefaultDashboard(props: DashboardViewServerProps) {
 
                         buttonAriaLabel = t('general:showAllLabel', { label: title })
 
-                        href = formatAdminURL({ adminRoute, path: `/collections/${slug}` })
+                        href = formatAdminURL({
+                          adminRoute,
+                          path: `/collections/${slug}`,
+                          serverURL,
+                        })
 
                         createHREF = formatAdminURL({
                           adminRoute,
                           path: `/collections/${slug}/create`,
+                          serverURL,
                         })
 
                         hasCreatePermission = permissions?.collections?.[slug]?.create
@@ -116,6 +122,7 @@ export function DefaultDashboard(props: DashboardViewServerProps) {
                         href = formatAdminURL({
                           adminRoute,
                           path: `/globals/${slug}`,
+                          serverURL,
                         })
 
                         // Find the lock status for the global

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

@@ -22,7 +22,7 @@ import { isEditing as getIsEditing } from '@payloadcms/ui/shared'
 import { buildFormState } from '@payloadcms/ui/utilities/buildFormState'
 import { notFound, redirect } from 'next/navigation.js'
 import { isolateObjectProperty, logError } from 'payload'
-import { formatAdminURL, hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared'
+import { formatAdminURL, formatApiURL, hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared'
 import React from 'react'
 
 import type { GenerateEditViewMetadata } from './getMetaBySegment.js'
@@ -274,11 +274,15 @@ export const renderDocument = async ({
 
   const apiQueryParams = `?${formattedParams.toString()}`
 
-  const apiURL = collectionSlug
-    ? `${serverURL}${apiRoute}/${collectionSlug}/${idFromArgs}${apiQueryParams}`
-    : globalSlug
-      ? `${serverURL}${apiRoute}/${globalSlug}${apiQueryParams}`
-      : ''
+  const apiURL = formatApiURL({
+    apiRoute,
+    path: collectionSlug
+      ? `/${collectionSlug}/${idFromArgs}${apiQueryParams}`
+      : globalSlug
+        ? `/${globalSlug}${apiQueryParams}`
+        : '',
+    serverURL,
+  })
 
   let View: ViewToRender = null
 

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

@@ -24,6 +24,7 @@ export function ForgotPasswordView({ initPageResult }: AdminViewServerProps) {
       routes: { account: accountRoute, login: loginRoute },
     },
     routes: { admin: adminRoute },
+    serverURL,
   } = config
 
   if (user) {
@@ -38,6 +39,7 @@ export function ForgotPasswordView({ initPageResult }: AdminViewServerProps) {
                     href={formatAdminURL({
                       adminRoute,
                       path: accountRoute,
+                      serverURL,
                     })}
                     prefetch={false}
                   >
@@ -65,6 +67,7 @@ export function ForgotPasswordView({ initPageResult }: AdminViewServerProps) {
         href={formatAdminURL({
           adminRoute,
           path: loginRoute,
+          serverURL,
         })}
         prefetch={false}
       >

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

@@ -346,6 +346,7 @@ export const renderListView = async (
     const newDocumentURL = formatAdminURL({
       adminRoute,
       path: `/collections/${collectionSlug}/create`,
+      serverURL: config.serverURL,
     })
 
     const hasCreatePermission = permissions?.collections?.[collectionSlug]?.create

packages/next/src/views/Login/LoginForm/index.tsx

@@ -16,7 +16,7 @@ import {
   useConfig,
   useTranslation,
 } from '@payloadcms/ui'
-import { formatAdminURL, getLoginOptions, getSafeRedirect } from 'payload/shared'
+import { formatAdminURL, formatApiURL, getLoginOptions, getSafeRedirect } from 'payload/shared'
 
 import type { LoginFieldProps } from '../LoginField/index.js'
 
@@ -37,6 +37,7 @@ export const LoginForm: React.FC<{
       user: userSlug,
     },
     routes: { admin: adminRoute, api: apiRoute },
+    serverURL,
   } = config
 
   const collectionConfig = getEntityConfig({ collectionSlug: userSlug })
@@ -85,7 +86,11 @@ export const LoginForm: React.FC<{
 
   return (
     <Form
-      action={`${apiRoute}/${userSlug}/login`}
+      action={formatApiURL({
+        apiRoute,
+        path: `/${userSlug}/login`,
+        serverURL,
+      })}
       className={baseClass}
       disableSuccessStatus
       initialState={initialState}
@@ -109,6 +114,7 @@ export const LoginForm: React.FC<{
         href={formatAdminURL({
           adminRoute,
           path: forgotRoute,
+          serverURL,
         })}
         prefetch={false}
       >