feat(next): redirect non-existent documents to list view with banner (#13062)

Currently, when a nonexistent document is accessed via the URL, a
`NotFound` page is displayed with a button to return to the dashboard.

In most cases, the next step the user will take is to navigate to the
list of documents in that collection. If we automatically redirect users
to the list view and display the error in a banner, we can save them a
couple of redirects.

This is a very common scenario when writing tests or restarting the
local environment.


## Before


![image](https://github.com/user-attachments/assets/ea7af410-5567-4dd2-b44b-67177aa795e6)


## After

![image](https://github.com/user-attachments/assets/72b38d2f-63f2-4a2b-94c4-76ea90d80c24)

Author: GermanJablo

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

@@ -120,7 +120,18 @@ export const renderDocument = async ({
     }))
 
   if (isEditing && !doc) {
-    throw new Error('not-found')
+    // If it's a collection document that doesn't exist, redirect to collection list
+    if (collectionSlug) {
+      const redirectURL = formatAdminURL({
+        adminRoute,
+        path: `/collections/${collectionSlug}?notFound=${encodeURIComponent(idFromArgs)}`,
+        serverURL,
+      })
+      redirect(redirectURL)
+    } else {
+      // For globals or other cases, keep the 404 behavior
+      throw new Error('not-found')
+    }
   }
 
   const [

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

@@ -225,6 +225,9 @@ export const renderListView = async (
 
     const hasCreatePermission = permissions?.collections?.[collectionSlug]?.create
 
+    // Check if there's a notFound query parameter (document ID that wasn't found)
+    const notFoundDocId = typeof searchParams?.notFound === 'string' ? searchParams.notFound : null
+
     const serverProps: ListViewServerPropsOnly = {
       collectionConfig,
       data,
@@ -248,6 +251,7 @@ export const renderListView = async (
       },
       collectionConfig,
       description: staticDescription,
+      notFoundDocId,
       payload,
       serverProps,
     })

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

@@ -16,12 +16,15 @@ import type {
   ViewDescriptionServerPropsOnly,
 } from 'payload'
 
+import { Banner } from '@payloadcms/ui/elements/Banner'
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
+import React from 'react'
 
 type Args = {
   clientProps: ListViewSlotSharedClientProps
   collectionConfig: SanitizedCollectionConfig
   description?: StaticDescription
+  notFoundDocId?: null | string
   payload: Payload
   serverProps: ListViewServerPropsOnly
 }
@@ -30,6 +33,7 @@ export const renderListViewSlots = ({
   clientProps,
   collectionConfig,
   description,
+  notFoundDocId,
   payload,
   serverProps,
 }: Args): ListViewSlots => {
@@ -75,13 +79,31 @@ export const renderListViewSlots = ({
     })
   }
 
-  if (collectionConfig.admin.components?.beforeListTable) {
-    result.BeforeListTable = RenderServerComponent({
-      clientProps: clientProps satisfies BeforeListTableClientProps,
-      Component: collectionConfig.admin.components.beforeListTable,
-      importMap: payload.importMap,
-      serverProps: serverProps satisfies BeforeListTableServerPropsOnly,
-    })
+  // Handle beforeListTable with optional banner
+  const existingBeforeListTable = collectionConfig.admin.components?.beforeListTable
+    ? RenderServerComponent({
+        clientProps: clientProps satisfies BeforeListTableClientProps,
+        Component: collectionConfig.admin.components.beforeListTable,
+        importMap: payload.importMap,
+        serverProps: serverProps satisfies BeforeListTableServerPropsOnly,
+      })
+    : null
+
+  // Create banner for document not found
+  const notFoundBanner = notFoundDocId ? (
+    <Banner type="error">
+      {serverProps.i18n.t('error:documentNotFound', { id: notFoundDocId })}
+    </Banner>
+  ) : null
+
+  // Combine banner and existing component
+  if (notFoundBanner || existingBeforeListTable) {
+    result.BeforeListTable = (
+      <React.Fragment>
+        {notFoundBanner}
+        {existingBeforeListTable}
+      </React.Fragment>
+    )
   }
 
   if (collectionConfig.admin.components?.Description) {

packages/translations/src/clientKeys.ts

@@ -65,6 +65,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'error:autosaving',
   'error:correctInvalidFields',
   'error:deletingTitle',
+  'error:documentNotFound',
   'error:emailOrPasswordIncorrect',
   'error:usernameOrPasswordIncorrect',
   'error:loadingDocument',

packages/translations/src/languages/ar.ts

@@ -86,6 +86,8 @@ export const arTranslations: DefaultTranslationsObject = {
     deletingFile: 'حدث خطأ أثناء حذف الملف.',
     deletingTitle:
       'حدث خطأ أثناء حذف {{title}}. يرجى التحقق من الاتصال الخاص بك والمحاولة مرة أخرى.',
+    documentNotFound:
+      'لم يتم العثور على المستند بالمعرف {{id}}. قد يكون قد تم حذفه أو لم يكن موجودًا أصلاً ، أو قد لا يكون لديك الوصول إليه.',
     emailOrPasswordIncorrect: 'البريد الإلكتروني أو كلمة المرور المقدمة غير صحيحة.',
     followingFieldsInvalid_one: 'الحقل التالي غير صالح:',
     followingFieldsInvalid_other: 'الحقول التالية غير صالحة:',

packages/translations/src/languages/az.ts

@@ -86,6 +86,8 @@ export const azTranslations: DefaultTranslationsObject = {
     deletingFile: 'Faylın silinməsində xəta baş verdi.',
     deletingTitle:
       '{{title}} silinərkən xəta baş verdi. Zəhmət olmasa, bağlantınızı yoxlayın və yenidən cəhd edin.',
+    documentNotFound:
+      '{{id}} ID-li sənəd tapılmadı. Bu, onun silinmiş və ya heç vaxt mövcud olmamış ola bilər və ya sizin ona giriş hüququnuz olmayabilir.',
     emailOrPasswordIncorrect: 'Təqdim olunan e-poçt və ya şifrə yanlışdır.',
     followingFieldsInvalid_one: 'Aşağıdakı sahə yanlışdır:',
     followingFieldsInvalid_other: 'Aşağıdaki sahələr yanlışdır:',

packages/translations/src/languages/bg.ts

@@ -86,6 +86,8 @@ export const bgTranslations: DefaultTranslationsObject = {
     deletingFile: 'Имаше грешка при изтриването на файла.',
     deletingTitle:
       'Имаше проблем при изтриването на {{title}}. Моля провери връзката си и опитай отново.',
+    documentNotFound:
+      'Документът с ID {{id}} не можа да бъде намерен. Възможно е да е бил изтрит или никога да не е съществувал или може би нямате достъп до него.',
     emailOrPasswordIncorrect: 'Имейлът или паролата не са правилни.',
     followingFieldsInvalid_one: 'Следното поле е некоректно:',
     followingFieldsInvalid_other: 'Следните полета са некоректни:',

packages/translations/src/languages/bnBd.ts

@@ -86,6 +86,8 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     deletingFile: 'ফাইল মুছতে একটি ত্রুটি হয়েছে।',
     deletingTitle:
       '{{title}} মুছতে একটি ত্রুটি হয়েছে। আপনার সংযোগ পরীক্ষা করুন এবং আবার চেষ্টা করুন।',
+    documentNotFound:
+      'আইডি {{id}} এর সাথে সম্পর্কিত ডকুমেন্টটি পাওয়া যাচ্ছে না। এটি মোছা হয়েছে বা কখনই না থাকতে পারে, অথবা আপনার এর প্রবেশাধিকার না থ',
     emailOrPasswordIncorrect: 'প্রদত্ত ইমেইল বা পাসওয়ার্ড ভুল।',
     followingFieldsInvalid_one: 'নিম্নলিখিত ক্ষেত্রটি অবৈধ:',
     followingFieldsInvalid_other: 'নিম্নলিখিত ক্ষেত্রগুলি অবৈধ:',

packages/translations/src/languages/bnIn.ts

@@ -86,6 +86,8 @@ export const bnInTranslations: DefaultTranslationsObject = {
     deletingFile: 'ফাইল মুছতে একটি ত্রুটি হয়েছে।',
     deletingTitle:
       '{{title}} মুছতে একটি ত্রুটি হয়েছে। আপনার সংযোগ পরীক্ষা করুন এবং আবার চেষ্টা করুন।',
+    documentNotFound:
+      'ID সহ {{id}} ডকুমেন্টটি পাওয়া যায়নি। এটি মুছে ফেলা হতে পারে বা কখনই ছিল না, অথবা আপনার এটির অ্যাক্সেস নেই।',
     emailOrPasswordIncorrect: 'প্রদত্ত ইমেইল বা পাসওয়ার্ড ভুল।',
     followingFieldsInvalid_one: 'নিম্নলিখিত ক্ষেত্রটি অবৈধ:',
     followingFieldsInvalid_other: 'নিম্নলিখিত ক্ষেত্রগুলি অবৈধ:',

packages/translations/src/languages/ca.ts

@@ -86,6 +86,8 @@ export const caTranslations: DefaultTranslationsObject = {
     deletingFile: "Hi ha hagut un error en eliminar l'arxiu.",
     deletingTitle:
       "Hi ha hagut un error mentre s'eliminava {{title}}. Si us plau, comprova la teva connexió i torna-ho a intentar.",
+    documentNotFound:
+      "El document amb ID {{id}} no s'ha pogut trobar. Pot haver estat esborrat o mai haver existit, o potser no tens accés a aquest.",
     emailOrPasswordIncorrect:
       'El correu electrònic o la contrasenya proporcionats no són correctes.',
     followingFieldsInvalid_one: 'El següent camp no és vàlid:',