chore(release): v3.0.0-beta.113 [skip ci]

Closes https://github.com/payloadcms/payload/issues/8635

`withPayload.cjs` is now correctly named in the exports

The final exports in package.json looks like this
```
"./withPayload": {
  "import": "./dist/withPayload.js",
  "require": "./dist/cjs/withPayload.cjs",
  "default": "./dist/withPayload.js"
},
```

You can now use withPayload with require inside `next.config.js` files
```
const { withPayload } = require('@payloadcms/next/withPayload')

const nextConfig = {
  // Your Next.js config here
  experimental: {
    reactCompiler: false,
  },
}

module.exports = withPayload(nextConfig)
```

.github/workflows/label-author.yml

@@ -32,8 +32,26 @@ jobs:
           script: |
             const type = context.payload.pull_request ? 'pull_request' : 'issue';
             const association = context.payload[type].author_association;
-            let label = ''
-            if (association === 'MEMBER' || association === 'OWNER') {
+            let label = '';
+            if (
+              association === 'MEMBER' ||
+              association === 'OWNER' ||
+              [
+                'denolfe',
+                'jmikrut',
+                'danribbens',
+
+                'alessiogr',
+                'jacobsfletch',
+                'jarrodmflesch',
+                'jesschowdhury',
+                'kendelljoseph',
+                'patrikkozak',
+                'paulpopus',
+                'r1tsuu',
+                'tylandavis',
+              ].includes(context.actor.toLowerCase())
+            ) {
               label = 'created-by: Payload team';
             } else if (association === 'CONTRIBUTOR') {
               label = 'created-by: Contributor';
@@ -47,4 +65,4 @@ jobs:
               repo: context.repo.repo,
               labels: [label],
             });
-            console.log('Added created-by: Payload team label');
+            console.log(`Added '${label}' label`);

.github/workflows/post-release.yml

@@ -15,7 +15,6 @@ jobs:
           fetch-depth: 0
           # Only needed if debugging on a branch other than default
           # ref: ${{ github.event.release.target_commitish || github.ref }}
-      - run: echo "npm_version=$(npm pkg get version | tr -d '"')" >> "$GITHUB_ENV"
       - uses: ./.github/actions/release-commenter
         continue-on-error: true
         env:

.github/workflows/pr-title.yml

@@ -38,6 +38,7 @@ jobs:
             db-\*
             db-mongodb
             db-postgres
+            db-vercel-postgres
             db-sqlite
             drizzle
             email-nodemailer
@@ -46,7 +47,6 @@ jobs:
             live-preview
             live-preview-react
             next
-            payload
             plugin-cloud
             plugin-cloud-storage
             plugin-form-builder
@@ -62,6 +62,7 @@ jobs:
             storage-\*
             storage-azure
             storage-gcs
+            storage-uploadthing
             storage-vercel-blob
             storage-s3
             translations

.gitignore

@@ -314,3 +314,6 @@ test/app/(payload)/admin/importMap.js
 /test/app/(payload)/admin/importMap.js
 test/pnpm-lock.yaml
 test/databaseAdapter.js
+/filename-compound-index
+/media-with-relation-preview
+/media-without-relation-preview

.vscode/launch.json

@@ -10,14 +10,14 @@
       "cwd": "${workspaceFolder}"
     },
     {
-      "command": "node --no-deprecation test/dev.js _community",
+      "command": "pnpm tsx --no-deprecation test/dev.ts _community",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Community",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js storage-uploadthing",
+      "command": "pnpm tsx --no-deprecation test/dev.ts storage-uploadthing",
       "cwd": "${workspaceFolder}",
       "name": "Uploadthing",
       "request": "launch",
@@ -25,7 +25,7 @@
       "envFile": "${workspaceFolder}/test/storage-uploadthing/.env"
     },
     {
-      "command": "node --no-deprecation test/dev.js live-preview",
+      "command": "pnpm tsx --no-deprecation test/dev.ts live-preview",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Live Preview",
       "request": "launch",
@@ -43,28 +43,28 @@
       }
     },
     {
-      "command": "node --no-deprecation test/dev.js admin",
+      "command": "pnpm tsx --no-deprecation test/dev.ts admin",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Admin",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js auth",
+      "command": "pnpm tsx --no-deprecation test/dev.ts auth",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Auth",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js fields-relationship",
+      "command": "pnpm tsx --no-deprecation test/dev.ts fields-relationship",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Fields-Relationship",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js login-with-username",
+      "command": "pnpm tsx --no-deprecation test/dev.ts login-with-username",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Login-With-Username",
       "request": "launch",
@@ -81,21 +81,21 @@
       }
     },
     {
-      "command": "node --no-deprecation test/dev.js collections-graphql",
+      "command": "pnpm tsx --no-deprecation test/dev.ts collections-graphql",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev GraphQL",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js fields",
+      "command": "pnpm tsx --no-deprecation test/dev.ts fields",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Fields",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js versions",
+      "command": "pnpm tsx --no-deprecation test/dev.ts versions",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Postgres",
       "request": "launch",
@@ -105,35 +105,35 @@
       }
     },
     {
-      "command": "node --no-deprecation test/dev.js versions",
+      "command": "pnpm tsx --no-deprecation test/dev.ts versions",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Versions",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js localization",
+      "command": "pnpm tsx --no-deprecation test/dev.ts localization",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Localization",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js locked-documents",
+      "command": "pnpm tsx --no-deprecation test/dev.ts locked-documents",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Locked Documents",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js uploads",
+      "command": "pnpm tsx --no-deprecation test/dev.ts uploads",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Uploads",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js field-error-states",
+      "command": "pnpm tsx --no-deprecation test/dev.ts field-error-states",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Field Error States",
       "request": "launch",

README.md

@@ -100,6 +100,10 @@ If you want to add contributions to this repository, please follow the instructi
 
 The [Examples Directory](./examples) is a great resource for learning how to setup Payload in a variety of different ways, but you can also find great examples in our blog and throughout our social media.
 
+If you'd like to run the examples, you can either copy them to a folder outside this repo or run them directly by (1) navigating to the example's subfolder (`cd examples/your-example-folder`) and (2) using the `--ignore-workspace` flag to bypass workspace restrictions (e.g., `pnpm --ignore-workspace install` or `pnpm --ignore-workspace dev`).
+
+You can see more examples at:
+
 - [Examples Directory](./examples)
 - [Payload Blog](https://payloadcms.com/blog)
 - [Payload YouTube](https://www.youtube.com/@payloadcms)

app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,19 +1,19 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
 
 import { importMap } from '../importMap.js'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,19 +1,19 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
 
 import { importMap } from '../importMap.js'
 
 type Args = {
-  params: {
+  params: Promise<{
     segments: string[]
-  }
-  searchParams: {
+  }>
+  searchParams: Promise<{
     [key: string]: string | string[]
-  }
+  }>
 }
 
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>

app/(payload)/api/[...slug]/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 

app/(payload)/api/graphql-playground/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
 

app/(payload)/api/graphql/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_POST } from '@payloadcms/next/routes'
 

app/(payload)/layout.tsx

@@ -1,13 +1,11 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import configPromise from '@payload-config'
 import { RootLayout } from '@payloadcms/next/layouts'
-
-import { importMap } from './admin/importMap.js'
-
 // import '@payloadcms/ui/styles.css' // Uncomment this line if `@payloadcms/ui` in `tsconfig.json` points to `/ui/dist` instead of `/ui/src`
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from 'react'
 
+import { importMap } from './admin/importMap.js'
 import './custom.scss'
 
 type Args = {

app/global-error.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable no-restricted-exports */
+'use client'
+
+import * as Sentry from '@sentry/nextjs'
+import NextError from 'next/error.js'
+import { useEffect } from 'react'
+
+export default function GlobalError({ error }: { error: { digest?: string } & Error }) {
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+      Sentry.captureException(error)
+    }
+  }, [error])
+
+  return (
+    <html lang="en-US">
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        {/* @ts-expect-error types repo */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  )
+}

docs/admin/collections.mdx

@@ -25,23 +25,23 @@ export const MyCollection: CollectionConfig = {
 
 The following options are available:
 
-| Option                       | Description                                                                                                                                                                                           |
-| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`group`**                      | Text used as a label for grouping Collection and Global links together in the navigation.                                                                                                             |
-| **`hidden`**                     | Set to true or a function, called with the current user, returning true to exclude this Collection from navigation and admin routing.                                                                 |
-| **`hooks`**                      | Admin-specific hooks for this Collection. [More details](../hooks/collections).                                                                                                                                        |
-| **`useAsTitle`**                 | Specify a top-level field to use for a document title throughout the Admin Panel. If no field is defined, the ID of the document is used as the title.                                                |
+| Option                           | Description                                                                                                                                                                                                           |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`group`**                      | Text used as a label for grouping Collection and Global links together in the navigation.                                                                                                                             |
+| **`hidden`**                     | Set to true or a function, called with the current user, returning true to exclude this Collection from navigation and admin routing.                                                                                 |
+| **`hooks`**                      | Admin-specific hooks for this Collection. [More details](../hooks/collections).                                                                                                                                       |
+| **`useAsTitle`**                 | Specify a top-level field to use for a document title throughout the Admin Panel. If no field is defined, the ID of the document is used as the title. A field with `virtual: true` cannot be used as the title.      |
 | **`description`**                | Text to display below the Collection label in the List View to give editors more information. Alternatively, you can use the `admin.components.Description` to render a React component. [More details](#components). |
-| **`defaultColumns`**             | Array of field names that correspond to which columns to show by default in this Collection's List View.                                                                                              |
-| **`hideAPIURL`**                 | Hides the "API URL" meta field while editing documents within this Collection.                                                                                                                        |
-| **`enableRichTextLink`**         | The [Rich Text](../fields/rich-text) field features a `Link` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.         |
-| **`enableRichTextRelationship`** | The [Rich Text](../fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
-| **`meta`**                       | Page metadata overrides to apply to this Collection within the Admin Panel. [More details](./metadata).                                                                           |
-| **`preview`**                    | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](#preview).                                                                                                |
-| **`livePreview`**                | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                                                              |
-| **`components`**                 | Swap in your own React components to be used within this Collection. [More details](#components).                                                                                       |
-| **`listSearchableFields`**       | Specify which fields should be searched in the List search view. [More details](#list-searchable-fields).                                                                                                      |
-| **`pagination`**             | Set pagination-specific options for this Collection. [More details](#pagination).                                                                                                                              |
+| **`defaultColumns`**             | Array of field names that correspond to which columns to show by default in this Collection's List View.                                                                                                              |
+| **`hideAPIURL`**                 | Hides the "API URL" meta field while editing documents within this Collection.                                                                                                                                        |
+| **`enableRichTextLink`**         | The [Rich Text](../fields/rich-text) field features a `Link` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.                            |
+| **`enableRichTextRelationship`** | The [Rich Text](../fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.                    |
+| **`meta`**                       | Page metadata overrides to apply to this Collection within the Admin Panel. [More details](./metadata).                                                                                                               |
+| **`preview`**                    | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](#preview).                                                                                                        |
+| **`livePreview`**                | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                                                                         |
+| **`components`**                 | Swap in your own React components to be used within this Collection. [More details](#components).                                                                                                                     |
+| **`listSearchableFields`**       | Specify which fields should be searched in the List search view. [More details](#list-searchable-fields).                                                                                                             |
+| **`pagination`**                 | Set pagination-specific options for this Collection. [More details](#pagination).                                                                                                                                     |
 
 ### Components
 

docs/admin/customizing-css.mdx

@@ -33,6 +33,19 @@ Here is an example of how you might target the Dashboard View and change the bac
   If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
 </Banner>
 
+### Specificity rules
+
+All Payload CSS is encapsulated inside CSS layers under `@layer payload-default`. Any custom css will now have the highest possible specificity.
+
+We have also provided a layer `@layer payload` if you want to use layers and ensure that your styles are applied after payload.
+
+To override existing styles in a way that the previous rules of specificity would be respected you can use the default layer like so
+```css
+@layer payload-default {
+  // my styles within the payload specificity
+}
+```
+
 ## Re-using Payload SCSS variables and utilities
 
 You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.

docs/admin/fields.mdx

@@ -40,21 +40,21 @@ export const CollectionConfig: CollectionConfig = {
 
 The following options are available:
 
-| Option              | Description                                                                                                                                                                                                                      |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`condition`**         | Programmatically show / hide fields based on other fields. [More details](../admin/fields#conditional-logic).                                                                                               |
-| **`components`**        | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. [More details](../admin/fields).                                                                             |
-| **`description`**       | Helper text to display alongside the field to provide more information for the editor. [More details](../admin/fields#description).                                                                                                 |
+| Option                  | Description                                                                                                                                                                                                                      |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`condition`**         | Programmatically show / hide fields based on other fields. [More details](../admin/fields#conditional-logic).                                                                                                                    |
+| **`components`**        | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. [More details](../admin/fields).                                                                                           |
+| **`description`**       | Helper text to display alongside the field to provide more information for the editor. [More details](../admin/fields#description).                                                                                              |
 | **`position`**          | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`.                                                                                                                                        |
 | **`width`**             | Restrict the width of a field. You can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
-| **`style`**         | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field.                                                                                                           |
-| **`className`**         | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field.                                                                                                                                                                      |
+| **`style`**             | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field.                                                                                                                 |
+| **`className`**         | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field.                                                                                             |
 | **`readOnly`**          | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value.                                                            |
-| **`disabled`**          | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview).                                                                                                                                                         |
-| **`disableBulkEdit`**   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents.                                                                                                 |
+| **`disabled`**          | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview).                                                                                                                                    |
+| **`disableBulkEdit`**   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents. Defaults to `true` for UI fields.                                                               |
 | **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                             |
 | **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                              |
-| **`hidden`**            | Will transform the field into a `hidden` input type. Its value will still submit with requests in the Admin Panel, but the field itself will not be visible to editors.        |
+| **`hidden`**            | Will transform the field into a `hidden` input type. Its value will still submit with requests in the Admin Panel, but the field itself will not be visible to editors.                                                          |
 
 ## Field Components
 

docs/admin/overview.mdx

@@ -98,6 +98,7 @@ The following options are available:
 | **`livePreview`** | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                         |
 | **`meta`**        | Base metadata to use for the Admin Panel. [More details](./metadata). |
 | **`routes`**      | Replace built-in Admin Panel routes with your own custom routes. [More details](#customizing-routes).                                                                 |
+| **`theme`**       | Restrict the Admin Panel theme to use only one of your choice. Default is `all`.
 | **`user`**        | The `slug` of the Collection that you want to allow to login to the Admin Panel. [More details](#the-admin-user-collection).                                          |
 
 <Banner type="success">

docs/configuration/i18n.mdx

@@ -40,7 +40,6 @@ export default buildConfig({
   // highlight-start
   i18n: {
     fallbackLanguage: 'en', // default
-    debug: false, // default
   }
   // highlight-end
 })
@@ -51,7 +50,6 @@ The following options are available:
 | Option                | Description                                                                                                                                                                                                                   |
 | --------------------- | --------------------------------|
 | **`fallbackLanguage`**     | The language to fall back to if the user's preferred language is not supported. Default is `'en'`.                                                                                                                           |
-| **`debug`**           | Whether to log debug information to the console. Default is `false`.                                                                                                                                                         |
 | **`translations`**    | An object containing the translations. The keys are the language codes and the values are the translations.                                                                                                                |
 | **`supportedLanguages`** | An object containing the supported languages. The keys are the language codes and the values are the translations.                                                                                                         |
 
@@ -178,60 +176,80 @@ Anywhere in your Payload app that you have access to the `req` object, you can a
 
 In order to use custom translations in your project, you need to provide the types for the translations.
 
-Here is an example of how you can define the types for the custom translations in a [Custom Component](../admin/components):
+Here we create a shareable translations object. We will import this in both our custom components and in our Payload config.
 
 ```ts
-'use client'
+// <rootDir>/custom-translations.ts
+
+import type { Config } from 'payload'
 import type { NestedKeysStripped } from '@payloadcms/translations'
-import type React from 'react'
 
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
-
-const customTranslations = {
+export const customTranslations: Config['i18n']['translations'] = {
   en: {
     general: {
-      test: 'Custom Translation',
+      myCustomKey: 'My custom english translation',
     },
+    fields: {
+      addLabel: 'Add!',
+    }
   },
 }
 
-type CustomTranslationObject = typeof customTranslations.en
-type CustomTranslationKeys = NestedKeysStripped<CustomTranslationObject>
+export type CustomTranslationsObject = typeof customTranslationsObject.en
+export type CustomTranslationsKeys = NestedKeysStripped<CustomTranslationsObject>
+```
+
+Import the shared translations object into our Payload config so they are available for use:
+
+```ts
+// <rootDir>/payload.config.ts
+
+import { buildConfig } from 'payload'
+
+import { customTranslations } from './custom-translations'
+
+export default buildConfig({
+  //...
+  i18n: {
+    translations: customTranslations,
+  },
+  //...
+})
+```
+
+Import the shared translation types to use in your [Custom Component](../admin/components):
+
+```ts
+// <rootDir>/components/MyComponent.tsx
+
+'use client'
+import type React from 'react'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+
+import type { CustomTranslationsObject, CustomTranslationsKeys } from '../custom-translations'
 
 export const MyComponent: React.FC = () => {
-  const { i18n, t } = useTranslation<CustomTranslationObject, CustomTranslationKeys>() // These generics merge your custom translations with the default client translations
+  const { i18n, t } = useTranslation<CustomTranslationsObject, CustomTranslationsKeys>() // These generics merge your custom translations with the default client translations
 
-  return t('general:test')
+  return t('general:myCustomKey')
 }
-
 ```
 
 Additionally, Payload exposes the `t` function in various places, for example in labels. Here is how you would type those:
 
 ```ts
-import type {
-  DefaultTranslationKeys,
-  NestedKeysStripped,
-  TFunction,
-} from '@payloadcms/translations'
+// <rootDir>/fields/myField.ts
+
+import type { DefaultTranslationKeys, TFunction } from '@payloadcms/translations'
 import type { Field } from 'payload'
 
-const customTranslations = {
-  en: {
-    general: {
-      test: 'Custom Translation',
-    },
-  },
-}
-
-type CustomTranslationObject = typeof customTranslations.en
-type CustomTranslationKeys = NestedKeysStripped<CustomTranslationObject>
+import { CustomTranslationsKeys } from '../custom-translations'
 
 const field: Field = {
   name: 'myField',
   type: 'text',
   label: (
-    { t }: { t: TFunction<CustomTranslationKeys | DefaultTranslationKeys> }, // The generic passed to TFunction does not automatically merge the custom translations with the default translations. We need to merge them ourselves here
+    { t }: { t: TFunction<CustomTranslationsKeys | DefaultTranslationKeys> }, // The generic passed to TFunction does not automatically merge the custom translations with the default translations. We need to merge them ourselves here
   ) => t('fields:addLabel'),
 }
 ```

docs/configuration/localization.mdx

@@ -35,7 +35,8 @@ import { buildConfig } from 'payload'
 export default buildConfig({
   // ...
   localization: {
-    locales: ['en', 'es', 'de'] // highlight-line
+    locales: ['en', 'es', 'de'] // required
+    defaultLocale: 'en', // required
   },
 })
 ```
@@ -63,7 +64,7 @@ export default buildConfig({
         rtl: true,
       },
     ],
-    defaultLocale: 'en',
+    defaultLocale: 'en', // required
     fallback: true,
   },
 })

docs/database/migrations.mdx

@@ -33,10 +33,6 @@ A migration file has two exports - an `up` function, which is called when a migr
 that will be called if for some reason the migration fails to complete successfully. The `up` function should contain
 all changes that you attempt to make within the migration, and the `down` should ideally revert any changes you make.
 
-For an added level of safety, migrations should leverage Payload [transactions](/docs/database/transactions). Migration
-functions should make use of the `req` by adding it to the arguments of your Payload Local API calls such
-as `payload.create` and Database Adapter methods like `payload.db.create`.
-
 Here is an example migration file:
 
 ```ts
@@ -53,6 +49,14 @@ export async function down({ payload, req }: MigrateDownArgs): Promise<void> {
 }
 ```
 
+## Using Transactions
+
+When migrations are run, each migration is performed in a new [transactions](/docs/database/transactions) for you. All
+you need to do is pass the `req` object to any [local API](/docs/local-api/overview) or direct database calls, such as
+`payload.db.updateMany()`, to make database changes inside the transaction. Assuming no errors were thrown, the transaction is committed
+after your `up` or `down` function runs. If the migration errors at any point or fails to commit, it is caught and the
+transaction gets aborted. This way no change is made to the database if the migration fails.
+
 ## Migrations Directory
 
 Each DB adapter has an optional property `migrationDir` where you can override where you want your migrations to be

docs/database/postgres.mdx

@@ -63,6 +63,8 @@ export default buildConfig({
 | `localesSuffix`             | A string appended to the end of table names for storing localized fields. Default is '_locales'.                                                                                 |
 | `relationshipsSuffix`       | A string appended to the end of table names for storing relationships. Default is '_rels'.                                                                                       |
 | `versionsSuffix`            | A string appended to the end of table names for storing versions. Defaults to '_v'.                                                                                              |
+| `beforeSchemaInit`          | Drizzle schema hook. Runs before the schema is built. [More Details](#beforeschemainit)                                                                                          |
+| `afterSchemaInit`           | Drizzle schema hook. Runs after the schema is built. [More Details](#afterschemainit)                                                                                            |
 
 ## Access to Drizzle
 
@@ -97,3 +99,134 @@ Alternatively, you can disable `push` and rely solely on migrations to keep your
 In Postgres, migrations are a fundamental aspect of working with Payload and you should become familiar with how they work.
 
 For more information about migrations, [click here](/docs/beta/database/migrations#when-to-run-migrations).
+
+## Drizzle schema hooks
+
+### beforeSchemaInit
+
+Runs before the schema is built. You can use this hook to extend your database structure with tables that won't be managed by Payload.
+
+```ts
+import { postgresAdapter } from '@payloadcms/db-postgres'
+import { integer, pgTable, serial } from 'drizzle-orm/pg-core'
+
+postgresAdapter({
+  beforeSchemaInit: [
+    ({ schema, adapter }) => {
+      return {
+        ...schema,
+        tables: {
+          ...schema.tables,
+          addedTable: pgTable('added_table', {
+            id: serial('id').notNull(),
+          }),
+        },
+      }
+    },
+  ],
+})
+```
+
+One use case is preserving your existing database structure when migrating to Payload. By default, Payload drops the current database schema, which may not be desirable in this scenario.
+To quickly generate the Drizzle schema from your database you can use [Drizzle Introspection](https://orm.drizzle.team/kit-docs/commands#introspect--pull)
+You should get the `schema.ts` file which may look like this:
+
+```ts
+import { pgTable, uniqueIndex, serial, varchar, text } from 'drizzle-orm/pg-core'
+
+export const users = pgTable('users', {
+  id: serial('id').primaryKey(),
+  fullName: text('full_name'),
+  phone: varchar('phone', { length: 256 }),
+})
+
+export const countries = pgTable(
+  'countries',
+  {
+    id: serial('id').primaryKey(),
+    name: varchar('name', { length: 256 }),
+  },
+  (countries) => {
+    return {
+      nameIndex: uniqueIndex('name_idx').on(countries.name),
+    }
+  },
+)
+
+```
+
+You can import them into your config and append to the schema with the `beforeSchemaInit` hook like this:
+
+```ts
+import { postgresAdapter } from '@payloadcms/db-postgres'
+import { users, countries } from '../drizzle/schema'
+
+postgresAdapter({
+  beforeSchemaInit: [
+    ({ schema, adapter }) => {
+      return {
+        ...schema,
+        tables: {
+          ...schema.tables,
+          users,
+          countries
+        },
+      }
+    },
+  ],
+})
+```
+
+Make sure Payload doesn't overlap table names with its collections. For example, if you already have a collection with slug "users", you should either change the slug or `dbName` to change the table name for this collection. 
+
+
+### afterSchemaInit
+
+Runs after the Drizzle schema is built. You can use this hook to modify the schema with features that aren't supported by Payload, or if you want to add a column that you don't want to be in the Payload config.
+To extend a table, Payload exposes `extendTable` utillity to the args. You can refer to the [Drizzle documentation](https://orm.drizzle.team/docs/sql-schema-declaration).
+The following example adds the `extra_integer_column` column and a composite index on `country` and `city` columns.
+
+```ts
+import { postgresAdapter } from '@payloadcms/db-postgres'
+import { index, integer } from 'drizzle-orm/pg-core'
+import { buildConfig } from 'payload'
+
+export default buildConfig({
+  collections: [
+    {
+      slug: 'places',
+      fields: [
+        {
+          name: 'country',
+          type: 'text',
+        },
+        {
+          name: 'city',
+          type: 'text',
+        },
+      ],
+    },
+  ],
+  db: postgresAdapter({
+    afterSchemaInit: [
+      ({ schema, extendTable, adapter }) => {
+        extendTable({
+          table: schema.tables.places,
+          columns: {
+            extraIntegerColumn: integer('extra_integer_column'),
+          },
+          extraConfig: (table) => ({
+            country_city_composite_index: index('country_city_composite_index').on(
+              table.country,
+              table.city,
+            ),
+          }),
+        })
+
+        return schema
+      },
+    ],
+  }),
+})
+
+```

docs/database/sqlite.mdx

@@ -35,7 +35,7 @@ export default buildConfig({
 ## Options
 
 | Option                | Description                                                                                                                                                                      |
-|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `client` \*           | [Client connection options](https://orm.drizzle.team/docs/get-started-sqlite#turso) that will be passed to `createClient` from `@libsql/client`.                                 |
 | `push`                | Disable Drizzle's [`db push`](https://orm.drizzle.team/kit-docs/overview#prototyping-with-db-push) in development mode. By default, `push` is enabled for development mode only. |
 | `migrationDir`        | Customize the directory that migrations are stored.                                                                                                                              |
@@ -44,8 +44,8 @@ export default buildConfig({
 | `localesSuffix`       | A string appended to the end of table names for storing localized fields. Default is '_locales'.                                                                                 |
 | `relationshipsSuffix` | A string appended to the end of table names for storing relationships. Default is '_rels'.                                                                                       |
 | `versionsSuffix`      | A string appended to the end of table names for storing versions. Defaults to '_v'.                                                                                              |
-
-
+| `beforeSchemaInit`    | Drizzle schema hook. Runs before the schema is built. [More Details](#beforeschemainit)                                                                                          |
+| `afterSchemaInit`     | Drizzle schema hook. Runs after the schema is built. [More Details](#afterschemainit)                                                                                            |
 
 ## Access to Drizzle
 
@@ -79,3 +79,134 @@ Alternatively, you can disable `push` and rely solely on migrations to keep your
 In SQLite, migrations are a fundamental aspect of working with Payload and you should become familiar with how they work.
 
 For more information about migrations, [click here](/docs/beta/database/migrations#when-to-run-migrations).
+
+## Drizzle schema hooks
+
+### beforeSchemaInit
+
+Runs before the schema is built. You can use this hook to extend your database structure with tables that won't be managed by Payload.
+
+```ts
+import { sqliteAdapter } from '@payloadcms/db-sqlite'
+import { integer, sqliteTable } from 'drizzle-orm/sqlite-core'
+
+sqliteAdapter({
+  beforeSchemaInit: [
+    ({ schema, adapter }) => {
+      return {
+        ...schema,
+        tables: {
+          ...schema.tables,
+          addedTable: sqliteTable('added_table', {
+            id: integer('id').primaryKey({ autoIncrement: true }),
+          }),
+        },
+      }
+    },
+  ],
+})
+```
+
+One use case is preserving your existing database structure when migrating to Payload. By default, Payload drops the current database schema, which may not be desirable in this scenario.
+To quickly generate the Drizzle schema from your database you can use [Drizzle Introspection](https://orm.drizzle.team/kit-docs/commands#introspect--pull)
+You should get the `schema.ts` file which may look like this:
+
+```ts
+import { sqliteTable, text, uniqueIndex, integer } from 'drizzle-orm/sqlite-core'
+
+export const users = sqliteTable('users', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  fullName: text('full_name'),
+  phone: text('phone', {length: 256}),
+})
+
+export const countries = sqliteTable(
+  'countries',
+  {
+    id: integer('id').primaryKey({ autoIncrement: true }),
+    name: text('name', { length: 256 }),
+  },
+  (countries) => {
+    return {
+      nameIndex: uniqueIndex('name_idx').on(countries.name),
+    }
+  },
+)
+
+```
+
+You can import them into your config and append to the schema with the `beforeSchemaInit` hook like this:
+
+```ts
+import { sqliteAdapter } from '@payloadcms/db-sqlite'
+import { users, countries } from '../drizzle/schema'
+
+sqliteAdapter({
+  beforeSchemaInit: [
+    ({ schema, adapter }) => {
+      return {
+        ...schema,
+        tables: {
+          ...schema.tables,
+          users,
+          countries
+        },
+      }
+    },
+  ],
+})
+```
+
+Make sure Payload doesn't overlap table names with its collections. For example, if you already have a collection with slug "users", you should either change the slug or `dbName` to change the table name for this collection. 
+
+
+### afterSchemaInit
+
+Runs after the Drizzle schema is built. You can use this hook to modify the schema with features that aren't supported by Payload, or if you want to add a column that you don't want to be in the Payload config.
+To extend a table, Payload exposes `extendTable` utillity to the args. You can refer to the [Drizzle documentation](https://orm.drizzle.team/docs/sql-schema-declaration).
+The following example adds the `extra_integer_column` column and a composite index on `country` and `city` columns.
+
+```ts
+import { sqliteAdapter } from '@payloadcms/db-sqlite'
+import { index, integer } from 'drizzle-orm/sqlite-core'
+import { buildConfig } from 'payload'
+
+export default buildConfig({
+  collections: [
+    {
+      slug: 'places',
+      fields: [
+        {
+          name: 'country',
+          type: 'text',
+        },
+        {
+          name: 'city',
+          type: 'text',
+        },
+      ],
+    },
+  ],
+  db: sqliteAdapter({
+    afterSchemaInit: [
+      ({ schema, extendTable, adapter }) => {
+        extendTable({
+          table: schema.tables.places,
+          columns: {
+            extraIntegerColumn: integer('extra_integer_column'),
+          },
+          extraConfig: (table) => ({
+            country_city_composite_index: index('country_city_composite_index').on(
+              table.country,
+              table.city,
+            ),
+          }),
+        })
+
+        return schema
+      },
+    ],
+  }),
+})
+
+```

docs/database/transactions.mdx

@@ -69,6 +69,48 @@ The following functions can be used for managing transactions:
 `payload.db.commitTransaction` - Takes the identifier for the transaction, finalizes any changes.
 `payload.db.rollbackTransaction` - Takes the identifier for the transaction, discards any changes.
 
+Payload uses the `req` object to pass the transaction ID through to the database adapter. If you are not using the `req` object, you can make a new object to pass the transaction ID directly to database adapter methods and local API calls.
+Example:
+
+```ts
+import payload from 'payload'
+import config from './payload.config'
+
+const standalonePayloadScript = async () => {
+  // initialize Payload
+  await payload.init({ config })
+
+  const transactionID = await payload.db.beginTransaction()
+
+  try {
+    // Make an update using the local API
+    await payload.update({
+      collection: 'posts',
+      data: {
+        some: 'data',
+      },
+      where: {
+        slug: { equals: 'my-slug' }
+      },
+      req: { transactionID },
+    })
+
+    /*
+      You can make additional db changes or run other functions
+      that need to be committed on an all or nothing basis
+     */
+
+    // Commit the transaction
+    await payload.db.commitTransaction(transactionID)
+  } catch (error) {
+    // Rollback the transaction
+    await payload.db.rollbackTransaction(transactionID)
+  }
+}
+
+standalonePayloadScript()
+```
+
 ## Disabling Transactions
 
 If you wish to disable transactions entirely, you can do so by passing `false` as the `transactionOptions` in your database adapter configuration. All the official Payload database adapters support this option.

docs/fields/array.mdx

@@ -66,7 +66,7 @@ _\* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Array Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Array Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload/types'
@@ -81,11 +81,11 @@ export const MyArrayField: Field = {
 
 The Array Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options), plus the following additional options:
 
-| Option                    | Description                                                                                                          |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| **`initCollapsed`**       | Set the initial collapsed state                                                                                      |
-| **`components.RowLabel`** | Function or React component to be rendered as the label on the array row. Receives `({ data, index, path })` as args |
-| **`isSortable`**          | Disable order sorting by setting this value to `false`                                                               |
+| Option                    | Description                                                                                                                                     |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`initCollapsed`**       | Set the initial collapsed state                                                                                                                 |
+| **`components.RowLabel`** | React component to be rendered as the label on the array row. [Example](#example-of-a-custom-rowlabel-component) |
+| **`isSortable`**          | Disable order sorting by setting this value to `false`                                                                                          |
 
 ## Example
 
@@ -127,12 +127,27 @@ export const ExampleCollection: CollectionConfig = {
       ],
       admin: {
         components: {
-          RowLabel: ({ data, index }) => {
-            return data?.title || `Slide ${String(index).padStart(2, '0')}`
-          },
+          RowLabel: '/path/to/ArrayRowLabel#ArrayRowLabel',
         },
       },
     },
   ],
 }
 ```
+
+### Example of a custom RowLabel component
+
+
+```tsx
+'use client'
+
+import { useRowLabel } from '@payloadcms/ui'
+
+export const ArrayRowLabel = () => {
+  const { data, rowNumber } = useRowLabel<{ title?: string }>()
+
+  const customLabel = `${data.title || 'Slide'} ${String(rowNumber).padStart(2, '0')} `
+
+  return <div>Custom Label: {customLabel}</div>
+}
+```

docs/fields/join.mdx

@@ -6,8 +6,8 @@ desc: The Join field provides the ability to work on related documents. Learn ho
 keywords: join, relationship, junction, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-The Join Field is used to make Relationship fields in the opposite direction. It is used to show the relationship from
-the other side. The field itself acts as a virtual field, in that no new data is stored on the collection with a Join
+The Join Field is used to make Relationship and Upload fields available in the opposite direction. With a Join you can edit and view collections
+having reference to a specific collection document. The field itself acts as a virtual field, in that no new data is stored on the collection with a Join
 field. Instead, the Admin UI surfaces the related documents for a better editing experience and is surfaced by Payload's
 APIs.
 
@@ -16,9 +16,17 @@ The Join field is useful in scenarios including:
 - To surface `Order`s for a given `Product`
 - To view and edit `Posts` belonging to a `Category`
 - To work with any bi-directional relationship data
+- Displaying where a document or upload is used in other documents
 
-For the Join field to work, you must have an existing [relationship](./relationship) field in the collection you are
-joining. This will reference the collection and path of the field of the related documents.
+<LightDarkImage
+  srcLight="https://payloadcms.com/images/docs/fields/join.png"
+  srcDark="https://payloadcms.com/images/docs/fields/join-dark.png"
+  alt="Shows Join field in the Payload Admin Panel"
+  caption="Admin Panel screenshot of Join field"
+/>
+
+For the Join field to work, you must have an existing [relationship](./relationship) or [upload](./upload) field in the
+collection you are joining. This will reference the collection and path of the field of the related documents.
 To add a Relationship Field, set the `type` to `join` in your [Field Config](./overview):
 
 ```ts
@@ -42,8 +50,7 @@ export const MyRelationshipField: Field = {
 ```
 
 In this example, the field is defined to show the related `posts` when added to a `category` collection. The `on`
-property is used to
-specify the relationship field name of the field that relates to the collection document.
+property is used to specify the relationship field name of the field that relates to the collection document.
 
 With this example, if you navigate to a Category in the Admin UI or an API response, you'll now see that the Posts which
 are related to the Category are populated for you. This is extremely powerful and can be used to define a wide variety
@@ -104,10 +111,9 @@ related docs from a new pseudo-junction collection called `categories_posts`. No
 third junction collection, and can be surfaced on both Posts and Categories. But, importantly, you could add
 additional "context" fields to this shared junction collection.
 
-For example, on this `categories_posts` collection, in addition to having the `category` and
-post` fields, we could add custom "context" fields like `featured` or `
-spotlight`, which would allow you to store additional information directly on relationships. The `join` field gives you
-complete control over any type of relational architecture in Payload, all wrapped up in a powerful Admin UI.
+For example, on this `categories_posts` collection, in addition to having the `category` and `post` fields, we could add custom "context" fields like `featured` or `spotlight`,
+which would allow you to store additional information directly on relationships.
+The `join` field gives you complete control over any type of relational architecture in Payload, all wrapped up in a powerful Admin UI.
 
 ## Config Options
 
@@ -115,7 +121,7 @@ complete control over any type of relational architecture in Payload, all wrappe
 |------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **`name`** \*          | To be used as the property name when retrieved from the database. [More](/docs/fields/overview#field-names)                                                                                   |
 | **`collection`** \*    | The `slug`s having the relationship field.                                                                                                                                                    |
-| **`on`** \*            | The relationship field name of the field that relates to collection document. Use dot notation for nested paths, like 'myGroup.relationName'.                                                 |
+| **`on`** \*            | The name of the relationship or upload field that relates to the collection document. Use dot notation for nested paths, like 'myGroup.relationName'.                                         |
 | **`maxDepth`**         | Default is 1, Sets a maximum population depth for this field, regardless of the remaining depth when this field is reached. [Max Depth](/docs/getting-started/concepts#field-level-max-depth) |
 | **`label`**            | Text used as a field label in the Admin Panel or an object with keys for each language.                                                                                                       |
 | **`hooks`**            | Provide Field Hooks to control logic for this field. [More details](../hooks/fields).                                                                                                         |

docs/fields/relationship.mdx

@@ -90,6 +90,7 @@ The Relationship Field inherits all of the default options from the base [Field
 | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | **`isSortable`**               | Set to `true` if you'd like this field to be sortable within the Admin UI using drag and drop (only works when `hasMany` is set to `true`). |
 | **`allowCreate`**              | Set to `false` if you'd like to disable the ability to create new documents from within the relationship field.                             |
+| **`allowEdit`**              | Set to `false` if you'd like to disable the ability to edit documents from within the relationship field.                             |
 | **`sortOptions`**              | Define a default sorting order for the options within a Relationship field's dropdown. [More](#sortOptions)                                |
 
 ### Sort Options

docs/fields/ui.mdx

@@ -28,14 +28,14 @@ export const MyUIField: Field = {
 
 ## Config Options
 
-| Option                          | Description                                                                                                            |
-| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| **`name`** \*                   | A unique identifier for this field.                                                                                    |
-| **`label`**                     | Human-readable label for this UI field.                                                                                |
+| Option                          | Description                                                                                                         |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| **`name`** \*                   | A unique identifier for this field.                                                                                 |
+| **`label`**                     | Human-readable label for this UI field.                                                                             |
 | **`admin.components.Field`** \* | React component to be rendered for this field within the Edit View. [More](../admin/components/#field-component)    |
 | **`admin.components.Cell`**     | React component to be rendered as a Cell within collection List views. [More](../admin/components/#field-component) |
-| **`admin.disableListColumn`**   | Set `disableListColumn` to `true` to prevent the UI field from appearing in the list view column selector.             |
-| **`custom`**                    | Extension point for adding custom data (e.g. for plugins)                                                              |
+| **`admin.disableListColumn`**   | Set `disableListColumn` to `true` to prevent the UI field from appearing in the list view column selector.          |
+| **`custom`**                    | Extension point for adding custom data (e.g. for plugins)                                                           |
 
 _\* An asterisk denotes that a property is required._
 

docs/fields/upload.mdx

@@ -6,7 +6,8 @@ desc: Upload fields will allow a file to be uploaded, only from a collection sup
 keywords: upload, images media, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-The Upload Field allows for the selection of a Document from a Collection supporting [Uploads](../upload/overview), and formats the selection as a thumbnail in the Admin Panel.
+The Upload Field allows for the selection of a Document from a Collection supporting [Uploads](../upload/overview), and
+formats the selection as a thumbnail in the Admin Panel.
 
 Upload fields are useful for a variety of use cases, such as:
 
@@ -15,10 +16,10 @@ Upload fields are useful for a variety of use cases, such as:
 - To give a layout building block the ability to feature a background image
 
 <LightDarkImage
-  srcLight="https://payloadcms.com/images/docs/fields/upload.png"
-  srcDark="https://payloadcms.com/images/docs/fields/upload-dark.png"
-  alt="Shows an upload field in the Payload Admin Panel"
-  caption="Admin Panel screenshot of an Upload field"
+srcLight="https://payloadcms.com/images/docs/fields/upload.png"
+srcDark="https://payloadcms.com/images/docs/fields/upload-dark.png"
+alt="Shows an upload field in the Payload Admin Panel"
+caption="Admin Panel screenshot of an Upload field"
 />
 
 To create an Upload Field, set the `type` to `upload` in your [Field Config](./overview):
@@ -43,7 +44,7 @@ export const MyUploadField: Field = {
 ## Config Options
 
 | Option                 | Description                                                                                                                                                                 |
-| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **`name`** \*          | To be used as the property name when stored and retrieved from the database. [More](/docs/fields/overview#field-names)                                                      |
 | **`*relationTo`** \*   | Provide a single collection `slug` to allow this field to accept a relation to. <strong>Note: the related collection must be configured to support Uploads.</strong>        |
 | **`filterOptions`**    | A query to filter which options appear in the UI and validate against. [More](#filtering-upload-options).                                                                   |
@@ -97,7 +98,7 @@ prevent all, or a `Where` query. When using a function, it will be
 called with an argument object with the following properties:
 
 | Property      | Description                                                                                           |
-| ------------- | ----------------------------------------------------------------------------------------------------- |
+|---------------|-------------------------------------------------------------------------------------------------------|
 | `relationTo`  | The collection `slug` to filter against, limited to this field's `relationTo` property                |
 | `data`        | An object containing the full collection or global document currently being edited                    |
 | `siblingData` | An object containing document data that is scoped to only fields within the same parent of this field |
@@ -127,3 +128,10 @@ You can learn more about writing queries [here](/docs/queries/overview).
   unless you call the default upload field validation function imported from{' '}
   <strong>payload/shared</strong> in your validate function.
 </Banner>
+
+## Bi-directional relationships
+
+The `upload` field on its own is used to reference documents in an upload collection. This can be considered a "one-way"
+relationship. If you wish to allow an editor to visit the upload document and see where it is being used, you may use
+the `join` field in the upload enabled collection. Read more about bi-directional relationships using
+the [Join field](./join)

docs/hooks/collections.mdx

@@ -46,6 +46,7 @@ export const CollectionWithHooks: CollectionConfig = {
     afterRead: [(args) => {...}],
     afterDelete: [(args) => {...}],
     afterOperation: [(args) => {...}],
+    afterError: [(args) => {....}],
 
     // Auth-enabled Hooks
     beforeLogin: [(args) => {...}],
@@ -289,6 +290,30 @@ The following arguments are provided to the `afterOperation` hook:
 | **`operation`**          | The name of the operation that this hook is running within. |
 | **`result`**          |  The result of the operation, before modifications. |
 
+### afterError
+
+The `afterError` Hook is triggered when an error occurs in the Payload application. This can be useful for logging errors to a third-party service, sending an email to the development team, logging the error to Sentry or DataDog, etc. The output can be used to transform the result object / status code.
+
+```ts
+import type { CollectionAfterErrorHook } from 'payload';
+
+const afterDeleteHook: CollectionAfterErrorHook = async ({
+  req,
+  id,
+  doc,
+}) => {...}
+```
+The following arguments are provided to the `afterError` Hook:
+
+| Argument            | Description                                                                                                                                                                                     |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`error`**         | The error that occurred.                                                                                                                                                                        |
+| **`context`**       | Custom context passed between Hooks. [More details](./context).                                                                                                                                 |
+| **`graphqlResult`** | The GraphQL result object, available if the hook is executed within a GraphQL context.                                                                                                          |
+| **`req`**           | The `PayloadRequest` object that extends [Web Request](https://developer.mozilla.org/en-US/docs/Web/API/Request). Contains currently authenticated `user` and the Local API instance `payload`. |
+| **`collection`**    | The [Collection](../configuration/collections) in which this Hook is running against.                                                                                                           |
+| **`result`**        | The formatted error result object, available if the hook is executed from a REST context.                                                                                                       |
+
 ### beforeLogin
 
 For [Auth-enabled Collections](../authentication/overview), this hook runs during `login` operations where a user with the provided credentials exist, but before a token is generated and added to the response. You can optionally modify the user that is returned, or throw an error in order to deny the login operation.

docs/hooks/overview.mdx

@@ -43,7 +43,7 @@ export default buildConfig({
   // ...
   // highlight-start
   hooks: {
-    afterError: () => {...}
+    afterError:[() => {...}]
   },
   // highlight-end
 })
@@ -57,7 +57,7 @@ The following options are available:
 
 ### afterError
 
-The `afterError` Hook is triggered when an error occurs in the Payload application. This can be useful for logging errors to a third-party service, sending an email to the development team, logging the error to Sentry or DataDog, etc.
+The `afterError` Hook is triggered when an error occurs in the Payload application. This can be useful for logging errors to a third-party service, sending an email to the development team, logging the error to Sentry or DataDog, etc. The output can be used to transform the result object / status code.
 
 ```ts
 import {  buildConfig } from 'payload'
@@ -65,20 +65,23 @@ import {  buildConfig } from 'payload'
 export default buildConfig({
   // ...
   hooks: {
-    afterError: async ({ error }) => {
+    afterError: [async ({ error }) => {
       // Do something
-    }
+    }]
   },
 })
 ```
 
 The following arguments are provided to the `afterError` Hook:
 
-| Argument | Description                                                                                   |
-|----------|-----------------------------------------------------------------------------------------------|
-| **`error`**  | The error that occurred.                                                                      |
-| **`context`**            | Custom context passed between Hooks. [More details](./context).                                                                                                                              |
-
+| Argument            | Description                                                                                                                                                                                     |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`error`**         | The error that occurred.                                                                                                                                                                        |
+| **`context`**       | Custom context passed between Hooks. [More details](./context).                                                                                                                                 |
+| **`graphqlResult`** | The GraphQL result object, available if the hook is executed within a GraphQL context.                                                                                                          |
+| **`req`**           | The `PayloadRequest` object that extends [Web Request](https://developer.mozilla.org/en-US/docs/Web/API/Request). Contains currently authenticated `user` and the Local API instance `payload`. |
+| **`collection`**    | The [Collection](../configuration/collections) in which this Hook is running against. This will be `undefined` if the hook is executed from a non-collection endpoint or GraphQL.               |
+| **`result`**        | The formatted error result object, available if the hook is executed from a REST context.                                                                                                       |
 ## Async vs. Synchronous
 
 All Hooks can be written as either synchronous or asynchronous functions. Choosing the right type depends on your use case, but switching between the two is as simple as adding or removing the `async` keyword.

docs/lexical/overview.mdx

@@ -178,7 +178,7 @@ Notice how even the toolbars are features? That's how extensible our lexical edi
 
 ## Creating your own, custom Feature
 
-You can find more information about creating your own feature in our [building custom feature docs](lexical/building-custom-features).
+You can find more information about creating your own feature in our [building custom feature docs](/docs/lexical/building-custom-features).
 
 ## TypeScript
 

docs/plugins/sentry.mdx

@@ -31,7 +31,7 @@ This multi-faceted software offers a range of features that will help you manage
 - **Integrations**: Connects with various tools and services for enhanced workflow and issue management
 
 <Banner type="info">
-  This plugin is completely open-source and the [source code can be found here](https://github.com/payloadcms/payload/tree/main/packages/plugin-sentry). If you need help, check out our [Community Help](https://payloadcms.com/community-help). If you think you've found a bug, please [open a new issue](https://github.com/payloadcms/payload/issues/new?assignees=&labels=plugin%3A%20seo&template=bug_report.md&title=plugin-seo%3A) with as much detail as possible.
+  This plugin is completely open-source and the [source code can be found here](https://github.com/payloadcms/payload/tree/beta/packages/plugin-sentry). If you need help, check out our [Community Help](https://payloadcms.com/community-help). If you think you've found a bug, please [open a new issue](https://github.com/payloadcms/payload/issues/new?assignees=&labels=plugin%3A%20seo&template=bug_report.md&title=plugin-sentry%3A) with as much detail as possible.
 </Banner>
 
 ## Installation
@@ -42,6 +42,15 @@ Install the plugin using any JavaScript package manager like [Yarn](https://yarn
   pnpm add @payloadcms/plugin-sentry
 ```
 
+## Sentry for Next.js setup
+This plugin requires to complete the [Sentry + Next.js setup](https://docs.sentry.io/platforms/javascript/guides/nextjs/) before.
+
+You can use either the [automatic setup](https://docs.sentry.io/platforms/javascript/guides/nextjs/#install) with the installation wizard:
+```sh
+npx @sentry/wizard@latest -i nextjs
+```
+Or the [Manual Setup](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/)
+
 ## Basic Usage
 
 In the `plugins` array of your [Payload Config](https://payloadcms.com/docs/configuration/overview), call the plugin and pass in your Sentry DSN as an option.
@@ -51,11 +60,13 @@ import { buildConfig } from 'payload'
 import { sentryPlugin } from '@payloadcms/plugin-sentry'
 import { Pages, Media } from './collections'
 
+import * as Sentry from '@sentry/nextjs'
+
 const config = buildConfig({
   collections: [Pages, Media],
   plugins: [
     sentryPlugin({
-      dsn: 'https://61edebas776889984d323d777@o4505289711681536.ingest.sentry.io/4505357433352176',
+      Sentry,
     }),
   ],
 })
@@ -65,58 +76,55 @@ export default config
 
 ## Options
 
-- `dsn` : string | **required**
+- `Sentry` : Sentry | **required**
 
-  Sentry automatically assigns a DSN when you create a project, the unique DSN informs Sentry where to send events so they are associated with the correct project.
+  The `Sentry` instance
 
 <Banner type="warning">
-  You can find your project DSN (Data Source Name) by visiting [sentry.io](sentry.io) and navigating to your [Project] > Settings > Client Keys (DSN).
+  Make sure to complete the [Sentry for Next.js Setup](#sentry-for-nextjs-setup) before.
 </Banner>
 
 - `enabled`: boolean | optional
 
-  Set to false to disable the plugin. Defaults to true.
+  Set to false to disable the plugin. Defaults to `true`.
 
-- `init` : ClientOptions | optional
+- `context`: `(args: ContextArgs) => Partial<ScopeContext> | Promise<Partial<ScopeContext>>`
 
-  Sentry allows a variety of options to be passed into the Sentry.init() function, see the full list of options [here](https://docs.sentry.io/platforms/node/guides/express/configuration/options).
-
-- `requestHandler` : RequestHandlerOptions | optional
-
-  Accepts options that let you decide what data should be included in the event sent to Sentry, checkout the options [here](https://docs.sentry.io/platforms/node/guides/express/configuration/options).
+  Pass additional [contextual data](https://docs.sentry.io/platforms/javascript/enriching-events/context/#passing-context-directly) to Sentry
 
 - `captureErrors`: number[] | optional
 
   By default, `Sentry.errorHandler` will capture only errors with a status code of 500 or higher. To capture additional error codes, pass the values as numbers in an array.
 
-To see all options available, visit the [Sentry Docs](https://docs.sentry.io/platforms/node/guides/express/configuration/options).
-
 ### Example
 
 Configure any of these options by passing them to the plugin:
 
 ```ts
 import { buildConfig } from 'payload'
-import { sentry } from '@payloadcms/plugin-sentry'
+import { sentryPlugin } from '@payloadcms/plugin-sentry'
+
+import * as Sentry from '@sentry/nextjs'
+
 import { Pages, Media } from './collections'
 
 const config = buildConfig({
   collections: [Pages, Media],
   plugins: [
-    sentry({
-      dsn: 'https://61edebas777689984d323d777@o4505289711681536.ingest.sentry.io/4505357433352176',
+    sentryPlugin({
       options: {
-        init: {
-          debug: true,
-          environment: 'development',
-          tracesSampleRate: 1.0,
+        captureErrors: [400, 403],
+        context: ({ defaultContext, req }) => {
+          return {
+            ...defaultContext,
+            tags: {
+              locale: req.locale,
+            },
+          }
         },
-        requestHandler: {
-          serverName: false,
-          user: ['email'],
-        },
-        captureErrors: [400, 403, 404],
+        debug: true,
       },
+      Sentry,
     }),
   ],
 })

docs/rest-api/overview.mdx

@@ -605,7 +605,7 @@ export const Orders: CollectionConfig = {
       path: '/:id/tracking',
       method: 'get',
       handler: async (req) => {
-        const tracking = await getTrackingInfo(req.params.id)
+        const tracking = await getTrackingInfo(req.routeParams.id)
 
         if (!tracking) {
           return Response.json({ error: 'not found' }, { status: 404})

eslint.config.js

@@ -21,8 +21,7 @@ export const defaultESLintIgnores = [
   '**/temp/',
 ]
 
-/** @typedef {import('eslint').Linter.FlatConfig} */
-let FlatConfig
+/** @typedef {import('eslint').Linter.Config} Config */
 
 export const rootParserOptions = {
   sourceType: 'module',
@@ -33,7 +32,7 @@ export const rootParserOptions = {
   },
 }
 
-/** @type {FlatConfig[]} */
+/** @type {Config[]} */
 export const rootEslintConfig = [
   ...payloadEsLintConfig,
   {
@@ -54,6 +53,7 @@ export const rootEslintConfig = [
       'payload/no-relative-monorepo-imports': 'error',
       'payload/no-imports-from-exports-dir': 'error',
       'payload/no-imports-from-self': 'error',
+      'payload/proper-payload-logger-usage': 'error',
     },
   },
   {

examples/auth/payload/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,9 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
 
 type Args = {
   params: {

examples/auth/payload/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,9 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
 
 type Args = {
   params: {

examples/auth/payload/src/app/(payload)/api/[...slug]/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 

examples/auth/payload/src/app/(payload)/api/graphql-playground/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
 

examples/auth/payload/src/app/(payload)/api/graphql/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_POST } from '@payloadcms/next/routes'
 

examples/auth/payload/src/app/(payload)/layout.tsx

@@ -1,8 +1,8 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import configPromise from '@payload-config'
 import '@payloadcms/next/css'
 import { RootLayout } from '@payloadcms/next/layouts'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from 'react'
 
 import './custom.scss'

examples/custom-components/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,8 +1,8 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
 
 import { importMap } from '../importMap.js'

examples/custom-components/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,8 +1,8 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
 
 import { importMap } from '../importMap.js'

examples/custom-components/src/app/(payload)/api/[...slug]/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 

examples/custom-components/src/app/(payload)/api/graphql-playground/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
 

examples/custom-components/src/app/(payload)/api/graphql/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_POST } from '@payloadcms/next/routes'
 

examples/custom-components/src/app/(payload)/layout.tsx

@@ -1,8 +1,8 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import configPromise from '@payload-config'
 import '@payloadcms/next/css'
 import { RootLayout } from '@payloadcms/next/layouts'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from 'react'
 
 import { importMap } from './admin/importMap.js'

examples/form-builder/payload/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,9 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
 
 type Args = {
   params: {

examples/form-builder/payload/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,9 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
 
 type Args = {
   params: {

examples/form-builder/payload/src/app/(payload)/api/[...slug]/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 

examples/form-builder/payload/src/app/(payload)/api/graphql-playground/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
 

examples/form-builder/payload/src/app/(payload)/api/graphql/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_POST } from '@payloadcms/next/routes'
 

examples/form-builder/payload/src/app/(payload)/layout.tsx

@@ -1,8 +1,8 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import configPromise from '@payload-config'
 import '@payloadcms/next/css'
 import { RootLayout } from '@payloadcms/next/layouts'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from 'react'
 
 import './custom.scss'

examples/hierarchy/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,6 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import config from '@payload-config'
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
 import { RootPage } from '@payloadcms/next/views'
 
 type Args = {

examples/hierarchy/src/app/(payload)/api/[...slug]/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 

examples/hierarchy/src/app/(payload)/api/graphql-playground/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
 

examples/hierarchy/src/app/(payload)/api/graphql/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_POST } from '@payloadcms/next/routes'
 

examples/live-preview/payload/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,9 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
 
 type Args = {
   params: {

examples/live-preview/payload/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,9 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
 
 type Args = {
   params: {

examples/live-preview/payload/src/app/(payload)/api/[...slug]/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 

examples/live-preview/payload/src/app/(payload)/api/graphql-playground/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
 

examples/live-preview/payload/src/app/(payload)/api/graphql/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_POST } from '@payloadcms/next/routes'
 

examples/live-preview/payload/src/app/(payload)/layout.tsx

@@ -1,8 +1,8 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import configPromise from '@payload-config'
 import '@payloadcms/next/css'
 import { RootLayout } from '@payloadcms/next/layouts'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from 'react'
 
 import './custom.scss'

examples/multi-tenant-single-domain/.env.example

@@ -1,3 +0,0 @@
-DATABASE_URI=mongodb://127.0.0.1/payload-example-multi-tenant-single-domain
-PAYLOAD_SECRET=PAYLOAD_MULTI_TENANT_EXAMPLE_SECRET_KEY
-PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000

examples/multi-tenant-single-domain/.eslintrc.cjs

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['@payloadcms'],
-}

examples/multi-tenant-single-domain/.gitignore

@@ -1,5 +0,0 @@
-build
-dist
-node_modules
-package-lock.json
-.env

examples/multi-tenant-single-domain/README.md

@@ -1,79 +0,0 @@
-# Payload Multi-Tenant Example (Single Domain)
-
-This example demonstrates how to achieve a multi-tenancy in [Payload](https://github.com/payloadcms/payload) on a single domain. Tenants are separated by a `Tenants` collection.
-
-## Quick Start
-
-To spin up this example locally, follow these steps:
-
-1. Clone this repo
-1. `cd` into this directory and run `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`
-
-   > \*If you are running using pnpm within the Payload Monorepo, the `--ignore-workspace` flag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.
-
-1. `pnpm dev`, `yarn dev` or `npm run dev` to start the server
-   - Press `y` when prompted to seed the database
-1. `open http://localhost:3000` to access the home page
-1. `open http://localhost:3000/admin` to access the admin panel
-   - Login with email `demo@payloadcms.com` and password `demo`
-
-## How it works
-
-A multi-tenant Payload application is a single server that hosts multiple "tenants". Examples of tenants may be your agency's clients, your business conglomerate's organizations, or your SaaS customers.
-
-Each tenant has its own set of users, pages, and other data that is scoped to that tenant. This means that your application will be shared across tenants but the data will be scoped to each tenant.
-
-### Collections
-
-See the [Collections](https://payloadcms.com/docs/configuration/collections) docs for details on how to extend any of this functionality.
-
-- #### Users
-
-  The `users` collection is auth-enabled and encompass both app-wide and tenant-scoped users based on the value of their `roles` and `tenants` fields. Users with the role `super-admin` can manage your entire application, while users with the _tenant role_ of `admin` have limited access to the platform and can manage only the tenant(s) they are assigned to, see [Tenants](#tenants) for more details.
-
-  For additional help with authentication, see the official [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth/cms#readme) or the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs.
-
-- #### Tenants
-
-  A `tenants` collection is used to achieve tenant-based access control. Each user is assigned an array of `tenants` which includes a relationship to a `tenant` and their `roles` within that tenant. You can then scope any document within your application to any of your tenants using a simple [relationship](https://payloadcms.com/docs/fields/relationship) field on the `users` or `pages` collections, or any other collection that your application needs. The value of this field is used to filter documents in the admin panel and API to ensure that users can only access documents that belong to their tenant and are within their role. See [Access Control](#access-control) for more details.
-
-  For more details on how to extend this functionality, see the [Payload Access Control](https://payloadcms.com/docs/access-control/overview) docs.
-
-- #### Pages
-
-  Each page is assigned a `tenant` which is used to control access and scope API requests. Pages that are created by tenants are automatically assigned that tenant based on that user's `lastLoggedInTenant` field.
-
-## Access control
-
-Basic role-based access control is setup to determine what users can and cannot do based on their roles, which are:
-
-- `super-admin`: They can access the Payload admin panel to manage your multi-tenant application. They can see all tenants and make all operations.
-- `user`: They can only access the Payload admin panel if they are a tenant-admin, in which case they have a limited access to operations based on their tenant (see below).
-
-This applies to each collection in the following ways:
-
-- `users`: Only super-admins, tenant-admins, and the user themselves can access their profile. Anyone can create a user, but only these admins can delete users. See [Users](#users) for more details.
-- `tenants`: Only super-admins and tenant-admins can read, create, update, or delete tenants. See [Tenants](#tenants) for more details.
-- `pages`: Everyone can access pages, but only super-admins and tenant-admins can create, update, or delete them.
-
-When a user logs in, a `lastLoggedInTenant` field is saved to their profile. This is done by reading the value of `req.headers.host`, querying for a tenant with a matching `domain`, and verifying that the user is a member of that tenant. This field is then used to automatically assign the tenant to any documents that the user creates, such as pages. Super-admins can also use this field to browse the admin panel as a specific tenant.
-
-> If you have versions and drafts enabled on your pages, you will need to add additional read access control condition to check the user's tenants that prevents them from accessing draft documents of other tenants.
-
-For more details on how to extend this functionality, see the [Payload Access Control](https://payloadcms.com/docs/access-control/overview#access-control) docs.
-
-## CORS
-
-This multi-tenant setup requires an open CORS policy. Since each tenant contains a dynamic list of domains, there's no way to know specifically which domains to whitelist at runtime without significant performance implications. This also means that the `serverURL` is not set, as this scopes all requests to a single domain.
-
-Alternatively, if you know the domains of your tenants ahead of time and these values won't change often, you could simply remove the `domains` field altogether and instead use static values.
-
-For more details on this, see the [CORS](https://payloadcms.com/docs/production/preventing-abuse#cross-origin-resource-sharing-cors) docs.
-
-## Front-end
-
-The frontend is scaffolded out in this example directory. You can view the code for rendering pages at `/src/app/(app)/[tenant]/[...slug]/page.tsx`. This is a starter template, you may need to adjust the app to better fit your needs.
-
-## Questions
-
-If you have any issues or questions, reach out to us on [Discord](https://discord.com/invite/payload) or start a [GitHub discussion](https://github.com/payloadcms/payload/discussions).

examples/multi-tenant-single-domain/package.json

@@ -1,55 +0,0 @@
-{
-  "name": "multi-tenant-single-domain",
-  "version": "1.0.0",
-  "description": "An example of a multi tenant application, using a single domain",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "_dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
-    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
-    "dev": "cross-env NODE_OPTIONS=--no-deprecation && pnpm seed && next dev --turbo",
-    "generate:schema": "payload-graphql generate:schema",
-    "generate:types": "payload generate:types",
-    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-    "seed": "npm run payload migrate:fresh",
-    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
-  },
-  "dependencies": {
-    "@payloadcms/db-mongodb": "3.0.0-beta.58",
-    "@payloadcms/next": "3.0.0-beta.58",
-    "@payloadcms/richtext-lexical": "3.0.0-beta.58",
-    "@payloadcms/ui": "3.0.0-beta.58",
-    "cross-env": "^7.0.3",
-    "dotenv": "^8.2.0",
-    "graphql": "^16.9.0",
-    "next": "15.0.0-rc.0",
-    "payload": "3.0.0-beta.58",
-    "qs": "^6.12.1",
-    "react": "19.0.0-rc-f994737d14-20240522",
-    "react-dom": "19.0.0-rc-f994737d14-20240522",
-    "sharp": "0.32.6"
-  },
-  "devDependencies": {
-    "@payloadcms/graphql": "3.0.0-beta.58",
-    "@swc/core": "^1.6.13",
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "15.0.0-rc.0",
-    "tsx": "^4.16.2",
-    "typescript": "5.5.2"
-  },
-  "engines": {
-    "node": "^18.20.2 || >=20.9.0"
-  },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "npm:types-react@19.0.0-beta.2",
-      "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
-    }
-  },
-  "overrides": {
-    "@types/react": "npm:types-react@19.0.0-beta.2",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
-  }
-}

examples/multi-tenant-single-domain/src/collections/Pages/index.ts

@@ -1,44 +0,0 @@
-import type { CollectionConfig } from 'payload'
-
-import { tenantField } from '../../fields/TenantField'
-import { isPayloadAdminPanel } from '../../utilities/isPayloadAdminPanel'
-import { canMutatePage, filterByTenantRead } from './access/byTenant'
-import { externalReadAccess } from './access/externalReadAccess'
-import { ensureUniqueSlug } from './hooks/ensureUniqueSlug'
-
-export const Pages: CollectionConfig = {
-  slug: 'pages',
-  access: {
-    create: canMutatePage,
-    delete: canMutatePage,
-    read: (args) => {
-      // when viewing pages inside the admin panel
-      // restrict access to the ones your user has access to
-      if (isPayloadAdminPanel(args.req)) return filterByTenantRead(args)
-
-      // when viewing pages from outside the admin panel
-      // you should be able to see your tenants and public tenants
-      return externalReadAccess(args)
-    },
-    update: canMutatePage,
-  },
-  admin: {
-    useAsTitle: 'title',
-  },
-  fields: [
-    {
-      name: 'title',
-      type: 'text',
-    },
-    {
-      name: 'slug',
-      type: 'text',
-      defaultValue: 'home',
-      hooks: {
-        beforeValidate: [ensureUniqueSlug],
-      },
-      index: true,
-    },
-    tenantField,
-  ],
-}

examples/multi-tenant-single-domain/src/collections/Tenants/index.ts

@@ -1,43 +0,0 @@
-import type { CollectionConfig } from 'payload'
-
-import { isSuperAdmin } from '../../access/isSuperAdmin'
-import { canMutateTenant, filterByTenantRead } from './access/byTenant'
-
-export const Tenants: CollectionConfig = {
-  slug: 'tenants',
-  access: {
-    create: isSuperAdmin,
-    delete: canMutateTenant,
-    read: filterByTenantRead,
-    update: canMutateTenant,
-  },
-  admin: {
-    useAsTitle: 'name',
-  },
-  fields: [
-    {
-      name: 'name',
-      type: 'text',
-      required: true,
-    },
-    {
-      name: 'slug',
-      type: 'text',
-      admin: {
-        description: 'Used for url paths, example: /tenant-slug/page-slug',
-      },
-      index: true,
-      required: true,
-    },
-    {
-      name: 'public',
-      type: 'checkbox',
-      admin: {
-        description: 'If checked, logging in is not required.',
-        position: 'sidebar',
-      },
-      defaultValue: false,
-      index: true,
-    },
-  ],
-}

examples/multi-tenant-single-domain/src/collections/Users/index.ts

@@ -1,67 +0,0 @@
-import type { CollectionConfig } from 'payload'
-
-import type { User } from '../../payload-types'
-
-import { getTenantAdminTenantAccessIDs } from '../../utilities/getTenantAccessIDs'
-import { createAccess } from './access/create'
-import { readAccess } from './access/read'
-import { updateAndDeleteAccess } from './access/updateAndDelete'
-import { externalUsersLogin } from './endpoints/externalUsersLogin'
-import { ensureUniqueUsername } from './hooks/ensureUniqueUsername'
-
-const Users: CollectionConfig = {
-  slug: 'users',
-  access: {
-    create: createAccess,
-    delete: updateAndDeleteAccess,
-    read: readAccess,
-    update: updateAndDeleteAccess,
-  },
-  admin: {
-    useAsTitle: 'email',
-  },
-  auth: true,
-  endpoints: [externalUsersLogin],
-  fields: [
-    {
-      name: 'roles',
-      type: 'select',
-      defaultValue: ['user'],
-      hasMany: true,
-      options: ['super-admin', 'user'],
-    },
-    {
-      name: 'tenants',
-      type: 'array',
-      fields: [
-        {
-          name: 'tenant',
-          type: 'relationship',
-          index: true,
-          relationTo: 'tenants',
-          required: true,
-          saveToJWT: true,
-        },
-        {
-          name: 'roles',
-          type: 'select',
-          defaultValue: ['tenant-viewer'],
-          hasMany: true,
-          options: ['tenant-admin', 'tenant-viewer'],
-          required: true,
-        },
-      ],
-      saveToJWT: true,
-    },
-    {
-      name: 'username',
-      type: 'text',
-      hooks: {
-        beforeValidate: [ensureUniqueUsername],
-      },
-      index: true,
-    },
-  ],
-}
-
-export default Users

examples/multi-tenant-single-domain/src/payload-types.ts

@@ -1,142 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * This file was automatically generated by Payload.
- * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
- * and re-run `payload generate:types` to regenerate this file.
- */
-
-export interface Config {
-  auth: {
-    users: UserAuthOperations;
-  };
-  collections: {
-    pages: Page;
-    users: User;
-    tenants: Tenant;
-    'payload-preferences': PayloadPreference;
-    'payload-migrations': PayloadMigration;
-  };
-  db: {
-    defaultIDType: string;
-  };
-  globals: {};
-  locale: null;
-  user: User & {
-    collection: 'users';
-  };
-}
-export interface UserAuthOperations {
-  forgotPassword: {
-    email: string;
-    password: string;
-  };
-  login: {
-    email: string;
-    password: string;
-  };
-  registerFirstUser: {
-    email: string;
-    password: string;
-  };
-  unlock: {
-    email: string;
-    password: string;
-  };
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "pages".
- */
-export interface Page {
-  id: string;
-  title?: string | null;
-  slug?: string | null;
-  tenant: string | Tenant;
-  updatedAt: string;
-  createdAt: string;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "tenants".
- */
-export interface Tenant {
-  id: string;
-  name: string;
-  slug: string;
-  public?: boolean | null;
-  updatedAt: string;
-  createdAt: string;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "users".
- */
-export interface User {
-  id: string;
-  roles?: ('super-admin' | 'user')[] | null;
-  tenants?:
-    | {
-        tenant: string | Tenant;
-        roles: ('tenant-admin' | 'tenant-viewer')[];
-        id?: string | null;
-      }[]
-    | null;
-  username?: string | null;
-  updatedAt: string;
-  createdAt: string;
-  email: string;
-  resetPasswordToken?: string | null;
-  resetPasswordExpiration?: string | null;
-  salt?: string | null;
-  hash?: string | null;
-  loginAttempts?: number | null;
-  lockUntil?: string | null;
-  password?: string | null;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "payload-preferences".
- */
-export interface PayloadPreference {
-  id: string;
-  user: {
-    relationTo: 'users';
-    value: string | User;
-  };
-  key?: string | null;
-  value?:
-    | {
-        [k: string]: unknown;
-      }
-    | unknown[]
-    | string
-    | number
-    | boolean
-    | null;
-  updatedAt: string;
-  createdAt: string;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "payload-migrations".
- */
-export interface PayloadMigration {
-  id: string;
-  name?: string | null;
-  batch?: number | null;
-  updatedAt: string;
-  createdAt: string;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "auth".
- */
-export interface Auth {
-  [k: string]: unknown;
-}
-
-
-declare module 'payload' {
-  export interface GeneratedTypes extends Config {}
-}

examples/multi-tenant-single-domain/src/payload.config.ts

@@ -1,33 +0,0 @@
-import { mongooseAdapter } from '@payloadcms/db-mongodb'
-import { lexicalEditor } from '@payloadcms/richtext-lexical'
-import path from 'path'
-import { buildConfig } from 'payload'
-import { fileURLToPath } from 'url'
-
-import { Pages } from './collections/Pages'
-import { Tenants } from './collections/Tenants'
-import Users from './collections/Users'
-
-const filename = fileURLToPath(import.meta.url)
-const dirname = path.dirname(filename)
-
-export default buildConfig({
-  admin: {
-    components: {
-      afterNavLinks: ['@/components/TenantSelector#TenantSelectorRSC'],
-    },
-    user: 'users',
-  },
-  collections: [Pages, Users, Tenants],
-  db: mongooseAdapter({
-    url: process.env.DATABASE_URI as string,
-  }),
-  editor: lexicalEditor({}),
-  graphQL: {
-    schemaOutputFile: path.resolve(dirname, 'generated-schema.graphql'),
-  },
-  secret: process.env.PAYLOAD_SECRET as string,
-  typescript: {
-    outputFile: path.resolve(dirname, 'payload-types.ts'),
-  },
-})

examples/multi-tenant-single-domain/tsconfig.json

@@ -1,47 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "@payload-config": [
-        "src/payload.config.ts"
-      ],
-      "@payload-types": [
-        "src/payload-types.ts"
-      ]
-    },
-    "target": "ES2017"
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}

examples/multi-tenant/.env.example

@@ -1,5 +1,3 @@
 DATABASE_URI=mongodb://127.0.0.1/payload-example-multi-tenant
 PAYLOAD_SECRET=PAYLOAD_MULTI_TENANT_EXAMPLE_SECRET_KEY
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
-PAYLOAD_SEED=true
-PAYLOAD_DROP_DATABASE=true

examples/multi-tenant/.npmrc

@@ -1 +0,0 @@
-legacy-peer-deps=true

examples/multi-tenant/README.md

@@ -1,24 +1,27 @@
 # Payload Multi-Tenant Example
 
-This example demonstrates how to achieve a multi-tenancy in [Payload](https://github.com/payloadcms/payload). This is a powerful way to vertically scale your application by sharing infrastructure across tenants.
+This example demonstrates how to achieve a multi-tenancy in [Payload](https://github.com/payloadcms/payload). Tenants are separated by a `Tenants` collection.
 
 ## Quick Start
 
 To spin up this example locally, follow these steps:
 
-1. First clone the repo
-1. Then `cd YOUR_PROJECT_REPO && cp .env.example .env`
-1. Next `yarn && yarn dev`
-1. Now `open http://localhost:3000/admin` to access the admin panel
-1. Login with email `demo@payloadcms.com` and password `demo`
+1. Clone this repo
+1. `cd` into this directory and run `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`
 
-That's it! Changes made in `./src` will be reflected in your app. See the [Development](#development) section for more details on how to log in as a tenant.
+   > \*If you are running using pnpm within the Payload Monorepo, the `--ignore-workspace` flag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.
+
+1. `pnpm dev`, `yarn dev` or `npm run dev` to start the server
+   - Press `y` when prompted to seed the database
+1. `open http://localhost:3000` to access the home page
+1. `open http://localhost:3000/admin` to access the admin panel
+   - Login with email `demo@payloadcms.com` and password `demo`
 
 ## How it works
 
 A multi-tenant Payload application is a single server that hosts multiple "tenants". Examples of tenants may be your agency's clients, your business conglomerate's organizations, or your SaaS customers.
 
-Each tenant has its own set of users, pages, and other data that is scoped to that tenant. This means that your application will be shared across tenants but the data will be scoped to each tenant. Tenants also run on separate domains entirely, so users are not aware of their tenancy.
+Each tenant has its own set of users, pages, and other data that is scoped to that tenant. This means that your application will be shared across tenants but the data will be scoped to each tenant.
 
 ### Collections
 
@@ -36,9 +39,15 @@ See the [Collections](https://payloadcms.com/docs/configuration/collections) doc
 
   For more details on how to extend this functionality, see the [Payload Access Control](https://payloadcms.com/docs/access-control/overview) docs.
 
+  **Domain-based Tenant Setting**:
+
+  This example also supports domain-based tenant selection, where tenants can be associated with specific domains. If a tenant is associated with a domain (e.g., `abc.localhost.com:3000`), when a user logs in from that domain, they will be automatically scoped to the matching tenant. This is accomplished through an optional `afterLogin` hook that sets a `payload-tenant` cookie based on the domain.
+
+  By default, this functionality is commented out in the code but can be enabled easily. See the `setCookieBasedOnDomain` hook in the `Users` collection for more details.
+
 - #### Pages
 
-  Each page is assigned a `tenant` which is used to control access and scope API requests. Pages that are created by tenants are automatically assigned that tenant based on that user's `lastLoggedInTenant` field.
+  Each page is assigned a `tenant`, which is used to control access and scope API requests. Only users with the `super-admin` role can create pages, and pages are assigned to specific tenants. Other users can view only the pages assigned to the tenant they are associated with.
 
 ## Access control
 
@@ -53,8 +62,6 @@ This applies to each collection in the following ways:
 - `tenants`: Only super-admins and tenant-admins can read, create, update, or delete tenants. See [Tenants](#tenants) for more details.
 - `pages`: Everyone can access pages, but only super-admins and tenant-admins can create, update, or delete them.
 
-When a user logs in, a `lastLoggedInTenant` field is saved to their profile. This is done by reading the value of `req.headers.host`, querying for a tenant with a matching `domain`, and verifying that the user is a member of that tenant. This field is then used to automatically assign the tenant to any documents that the user creates, such as pages. Super-admins can also use this field to browse the admin panel as a specific tenant.
-
 > If you have versions and drafts enabled on your pages, you will need to add additional read access control condition to check the user's tenants that prevents them from accessing draft documents of other tenants.
 
 For more details on how to extend this functionality, see the [Payload Access Control](https://payloadcms.com/docs/access-control/overview#access-control) docs.
@@ -69,63 +76,7 @@ For more details on this, see the [CORS](https://payloadcms.com/docs/production/
 
 ## Front-end
 
-If you're building a website or other front-end for your tenant, you will need specify the `tenant` in your requests. For example, if you wanted to fetch all pages for the tenant `ABC`, you would make a request to `/api/pages?where[tenant][slug][equals]=abc`.
-
-For a head start on building a website for your tenant(s), check out the official [Website Template](https://github.com/payloadcms/template-website). It includes a page layout builder, preview, SEO, and much more. It is not multi-tenant, though, but you can easily take the concepts from that example and apply them here.
-
-## Development
-
-To spin up this example locally, follow the [Quick Start](#quick-start).
-
-### Seed
-
-On boot, a seed script is included to scaffold a basic database for you to use as an example. This is done by setting the `PAYLOAD_DROP_DATABASE` and `PAYLOAD_SEED` environment variables which are included in the `.env.example` by default. You can remove these from your `.env` to prevent this behavior. You can also freshly seed your project at any time by running `yarn seed`. This seed creates a super-admin user with email `demo@payloadcms.com` and password `demo` along with the following tenants:
-
-- `ABC`
-  - Domains:
-    - `abc.localhost.com:3000`
-  - Users:
-    - `admin@abc.com` with role `admin` and password `test`
-    - `user@abc.com` with role `user` and password `test`
-  - Pages:
-    - `ABC Home` with content `Hello, ABC!`
-- `BBC`
-  - Domains:
-    - `bbc.localhost.com:3000`
-  - Users:
-    - `admin@bbc.com` with role `admin` and password `test`
-    - `user@bbc.com` with role `user` and password `test`
-  - Pages:
-    - `BBC Home` with content `Hello, BBC!`
-
-> NOTICE: seeding the database is destructive because it drops your current database to populate a fresh one from the seed template. Only run this command if you are starting a new project or can afford to lose your current data.
-
-### Hosts file
-
-To fully experience the multi-tenancy of this example locally, your app must run on one of the domains listed in any of your tenant's `domains` field. The simplest way to do this to add the following lines to your hosts file.
-
-```bash
-# these domains were provided in the seed script
-# if needed, change them based on your own tenant settings
-# remember to specify the port number when browsing to these domains
-127.0.0.1 abc.localhost.com
-127.0.0.1 bbc.localhost.com
-```
-
-> On Mac you can find the hosts file at `/etc/hosts`. On Windows, it's at `C:\Windows\System32\drivers\etc\hosts`.
-
-Then you can access your app at `http://abc.localhost.com:3000` and `http://bbc.localhost.com:3000`. Access control will be scoped to the correct tenant based on that user's `tenants`, see [Access Control](#access-control) for more details.
-
-## Production
-
-To run Payload in production, you need to build and serve the Admin panel. To do so, follow these steps:
-
-1. First, invoke the `payload build` script by running `yarn build` or `npm run build` in your project root. This creates a `./build` directory with a production-ready admin bundle.
-1. Then, run `yarn serve` or `npm run serve` to run Node in production and serve Payload from the `./build` directory.
-
-### Deployment
-
-The easiest way to deploy your project is to use [Payload Cloud](https://payloadcms.com/new/import), a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also choose to self-host your app, check out the [Deployment](https://payloadcms.com/docs/production/deployment) docs for more details.
+The frontend is scaffolded out in this example directory. You can view the code for rendering pages at `/src/app/(app)/[tenant]/[...slug]/page.tsx`. This is a starter template, you may need to adjust the app to better fit your needs.
 
 ## Questions
 

examples/multi-tenant/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/multi-tenant/nodemon.json

@@ -1,5 +0,0 @@
-{
-  "ext": "ts",
-  "exec": "ts-node src/server.ts -- -I",
-  "stdin": false
-}

examples/multi-tenant/package.json

@@ -1,49 +1,55 @@
 {
-  "name": "payload-example-multi-tenant",
-  "description": "Payload multi-tenant example.",
+  "name": "multi-tenant",
   "version": "1.0.0",
-  "main": "dist/server.js",
+  "description": "An example of a multi tenant application with Payload",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "seed": "rm -rf media && cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload.config.ts ts-node src/server.ts",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
-    "lint": "eslint src",
-    "lint:fix": "eslint --fix --ext .ts,.tsx src"
+    "_dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation && pnpm seed && next dev",
+    "generate:schema": "payload-graphql generate:schema",
+    "generate:types": "payload generate:types",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "seed": "npm run payload migrate:fresh",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "latest",
-    "@payloadcms/db-mongodb": "latest",
-    "@payloadcms/richtext-slate": "latest",
+    "@payloadcms/db-mongodb": "3.0.0-beta.112",
+    "@payloadcms/next": "3.0.0-beta.112",
+    "@payloadcms/richtext-lexical": "3.0.0-beta.112",
+    "@payloadcms/ui": "3.0.0-beta.112",
+    "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "latest"
+    "graphql": "^16.9.0",
+    "next": "15.0.0-canary.173",
+    "payload": "3.0.0-beta.112",
+    "qs": "^6.12.1",
+    "react": "19.0.0-rc-3edc000d-20240926",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@payloadcms/eslint-config": "^0.0.1",
-    "@types/express": "^4.17.9",
-    "@types/node": "18.11.3",
-    "@types/react": "18.0.21",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "nodemon": "^2.0.6",
-    "prettier": "^2.7.1",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@payloadcms/graphql": "3.0.0-beta.112",
+    "@swc/core": "^1.6.13",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "15.0.0-canary.173",
+    "tsx": "^4.16.2",
+    "typescript": "5.5.2"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:types-react@19.0.0-rc.1",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
+    }
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   }
 }

examples/multi-tenant/src/access/anyone.ts

@@ -1,3 +0,0 @@
-import type { Access } from 'payload/config'
-
-export const anyone: Access = () => true

examples/multi-tenant/src/access/isSuperAdmin.ts

@@ -1,6 +1,8 @@
 import type { Access } from 'payload'
 
 export const isSuperAdmin: Access = ({ req }) => {
-  if (!req?.user) return false
+  if (!req?.user) {
+    return false
+  }
   return Boolean(req.user.roles?.includes('super-admin'))
 }

examples/multi-tenant/src/access/superAdmins.ts

@@ -1,9 +0,0 @@
-import type { Access } from 'payload/config'
-import type { FieldHook } from 'payload/types'
-
-import { checkUserRoles } from '../utilities/checkUserRoles'
-
-export const superAdmins: Access = ({ req: { user } }) => checkUserRoles(['super-admin'], user)
-
-export const superAdminFieldAccess: FieldHook = ({ req: { user } }) =>
-  checkUserRoles(['super-admin'], user)

examples/multi-tenant/src/app/(app)/[tenant]/[...slug]/page.tsx

@@ -9,7 +9,7 @@ import React from 'react'
 import { RenderPage } from '../../../components/RenderPage'
 
 export default async function Page({ params }: { params: { slug?: string[]; tenant: string } }) {
-  const headers = getHeaders()
+  const headers = await getHeaders()
   const payload = await getPayloadHMR({ config: configPromise })
   const { user } = await payload.auth({ headers })
 
@@ -81,7 +81,9 @@ export default async function Page({ params }: { params: { slug?: string[]; tena
   const pageData = pageQuery.docs?.[0]
 
   // The page with the provided slug could not be found
-  if (!pageData) return notFound()
+  if (!pageData) {
+    return notFound()
+  }
 
   // The page was found, render the page with data
   return <RenderPage data={pageData} />

examples/multi-tenant/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,9 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
 
 import { importMap } from '../importMap.js'
 

examples/multi-tenant/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,9 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import type { Metadata } from 'next'
 
 import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
 
 import { importMap } from '../importMap.js'
 

examples/multi-tenant/src/app/(payload)/api/[...slug]/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 

examples/multi-tenant/src/app/(payload)/api/graphql-playground/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
 

examples/multi-tenant/src/app/(payload)/api/graphql/route.ts

@@ -1,5 +1,5 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import config from '@payload-config'
 import { GRAPHQL_POST } from '@payloadcms/next/routes'
 

examples/multi-tenant/src/app/(payload)/layout.tsx

@@ -1,8 +1,8 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import configPromise from '@payload-config'
 import '@payloadcms/next/css'
 import { RootLayout } from '@payloadcms/next/layouts'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from 'react'
 
 import { importMap } from './admin/importMap.js'

examples/multi-tenant/src/app/components/Login/client.page.tsx

@@ -20,7 +20,7 @@ export const Login = ({ tenantSlug }: Props) => {
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault()
-    if (!usernameRef?.current?.value || !passwordRef?.current?.value) return
+    if (!usernameRef?.current?.value || !passwordRef?.current?.value) {return}
     const actionRes = await fetch(
       `${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/external-users/login`,
       {