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

Improves package manager detection.

Closes #6231

.eslintignore

@@ -11,3 +11,4 @@
 playwright.config.ts
 jest.config.js
 test/live-preview/next-app
+tsconfig.tsbuildinfo

.eslintrc.cjs

@@ -8,6 +8,8 @@ module.exports = {
       plugins: ['payload'],
       rules: {
         'payload/no-jsx-import-statements': 'warn',
+        'payload/no-relative-monorepo-imports': 'error',
+        'payload/no-imports-from-exports-dir': 'error',
       },
     },
     {

.github/CODEOWNERS

@@ -1,41 +1,30 @@
 # Order matters. The last matching pattern takes precedence.
 
-### Core ###
-/packages/payload/src/uploads/ @denolfe
-/packages/payload/src/admin/ @jmikrut @jacobsfletch @JarrodMFlesch
+### Package Exports ###
+/**/exports/ @denolfe @jmikrut
 
-### Adapters ###
-/packages/db-*/ @denolfe @jmikrut @DanRibbens
-/packages/richtext-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
-
-### Plugins ###
-/packages/plugin-*/ @denolfe @jmikrut @DanRibbens
+### Packages ###
+/packages/richtext-*/ @AlessioGr
 /packages/plugin-cloud*/ @denolfe
-/packages/plugin-form-builder/ @jacobsfletch
-/packages/plugin-live-preview*/ @jacobsfletch
-/packages/plugin-nested-docs/ @jacobsfletch
-/packages/plugin-redirects/ @jacobsfletch
-/packages/plugin-search/ @jacobsfletch
-/packages/plugin-sentry/ @JessChowdhury
-/packages/plugin-seo/ @jacobsfletch
-/packages/plugin-stripe/ @jacobsfletch
-
-### Examples ###
-/examples/ @jacobsfletch
-/examples/testing/ @JarrodMFlesch
-/examples/email/ @JessChowdhury
-/examples/whitelabel/ @JessChowdhury
+/packages/email-*/ @denolfe
+/packages/storage-*/ @denolfe
+/packages/create-payload-app/ @denolfe
+/packages/eslint-*/ @denolfe
 
 ### Templates ###
 /templates/ @jacobsfletch @denolfe
 
-### Misc ###
-/packages/create-payload-app/ @denolfe
-/packages/eslint-config-payload/ @denolfe
-/packages/payload-admin-bar/ @jacobsfletch
+### Build Files ###
+/**/package.json @denolfe
+/tsconfig.json @denolfe
+/**/tsconfig*.json @denolfe
+
+/jest.config.js @denolfe
+/**/jest.config.js @denolfe
 
 ### Root ###
 /package.json @denolfe
 /scripts/ @denolfe
+/.husky/ @denolfe
+/.vscode/ @denolfe
 /.github/ @denolfe
-/.github/CODEOWNERS @denolfe

.github/actions/setup/action.yml

@@ -0,0 +1,48 @@
+name: Setup node and pnpm
+description: Configure the Node.js and pnpm versions
+
+inputs:
+  node-version:
+    description: 'The Node.js version to use'
+    required: true
+    default: 18.20.2
+  pnpm-version:
+    description: 'The pnpm version to use'
+    required: true
+    default: 8.15.7
+
+runs:
+  using: composite
+  steps:
+    # https://github.com/actions/virtual-environments/issues/1187
+    - name: tune linux network
+      shell: bash
+      run: sudo ethtool -K eth0 tx off rx off
+
+    - name: Setup Node@${{ inputs.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@v3
+      with:
+        version: ${{ inputs.pnpm-version }}
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - name: Setup pnpm cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          pnpm-store-
+          pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+    - shell: bash
+      run: pnpm install

.github/workflows/label-author.yml

@@ -0,0 +1,50 @@
+name: label-author
+
+on:
+  pull_request:
+    types: [opened]
+  issues:
+    types: [opened]
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
+jobs:
+  debug-context:
+    runs-on: ubuntu-latest
+    steps:
+      - name: View context attributes
+        uses: actions/github-script@v7
+        with:
+          script: console.log(context)
+
+  label-created-by:
+    name: Label pr/issue on opening
+    runs-on: ubuntu-latest
+    steps:
+      - name: Tag with 'created-by'
+        uses: actions/github-script@v7
+        if: github.event.action == 'opened'
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const type = context.payload.pull_request ? 'pull_request' : 'issue';
+            const association = context.payload[type].author_association;
+            let label = ''
+            if (association === 'MEMBER' || association === 'OWNER') {
+              label = 'created-by: Payload team';
+            } else if (association === 'CONTRIBUTOR') {
+              label = 'created-by: Contributor';
+            }
+
+            if (!label) return;
+
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: [label],
+            });
+            console.log('Added created-by: Payload team label');

.github/workflows/main.yml

@@ -2,9 +2,25 @@ name: build
 
 on:
   pull_request:
-    types: [opened, reopened, synchronize]
+    types:
+      - opened
+      - reopened
+      - synchronize
   push:
-    branches: ['main', 'alpha']
+    branches:
+      - main
+      - beta
+
+concurrency:
+  # <workflow_name>-<branch_name>-<true || commit_sha if branch is protected>
+  group: ${{ github.workflow }}-${{ github.ref }}-${{ github.ref_protected && github.sha || ''}}
+  cancel-in-progress: true
+
+env:
+  NODE_VERSION: 18.20.2
+  PNPM_VERSION: 8.15.7
+  DO_NOT_TRACK: 1 # Disable Turbopack telemetry
+  NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry
 
 jobs:
   changes:
@@ -15,6 +31,10 @@ jobs:
       needs_build: ${{ steps.filter.outputs.needs_build }}
       templates: ${{ steps.filter.outputs.templates }}
     steps:
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
@@ -35,7 +55,51 @@ jobs:
           echo "needs_build: ${{ steps.filter.outputs.needs_build }}"
           echo "templates: ${{ steps.filter.outputs.templates }}"
 
-  core-build:
+  lint:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: ${{ env.PNPM_VERSION }}
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        timeout-minutes: 720
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-
+            pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - run: pnpm install
+      - name: Lint staged
+        run: |
+          git diff --name-only --diff-filter=d origin/${GITHUB_BASE_REF}...${GITHUB_SHA}
+          npx lint-staged --diff="origin/${GITHUB_BASE_REF}...${GITHUB_SHA}"
+
+  build:
     needs: changes
     if: ${{ needs.changes.outputs.needs_build == 'true' }}
     runs-on: ubuntu-latest
@@ -45,15 +109,19 @@ jobs:
         with:
           fetch-depth: 25
 
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Get pnpm store directory
@@ -61,74 +129,72 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        timeout-minutes: 720
         with:
           path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-            ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+            pnpm-store-
+            pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
 
       - run: pnpm install
-      - run: pnpm run build:core
+      - run: pnpm run build:all
+        env:
+          DO_NOT_TRACK: 1 # Disable Turbopack telemetry
 
       - name: Cache build
         uses: actions/cache@v4
+        timeout-minutes: 10
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
-  plugins-build:
-    needs: changes
-    if: ${{ needs.changes.outputs.needs_build == 'true' }}
+  tests-unit:
     runs-on: ubuntu-latest
+    needs: build
 
     steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 25
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
 
-      - name: Use Node.js 18
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
+      - name: Restore build
+        uses: actions/cache@v4
+        timeout-minutes: 10
         with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-            ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          path: ./*
+          key: ${{ github.sha }}-${{ github.run_number }}
 
-      - run: pnpm install
-      - run: pnpm run build:plugins
+      - name: Unit Tests
+        run: pnpm test:unit
+        env:
+          NODE_OPTIONS: --max-old-space-size=8096
 
-  tests:
+  tests-int:
     runs-on: ubuntu-latest
-    needs: core-build
+    needs: build
     strategy:
       fail-fast: false
       matrix:
         database:
           - mongodb
-        #  - postgres
-        #  - postgres-custom-schema
-        #  - postgres-uuid
-        #  - supabase
+          - postgres
+          - postgres-custom-schema
+          - postgres-uuid
+          - supabase
     env:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
@@ -139,19 +205,24 @@ jobs:
       AWS_REGION: us-east-1
 
     steps:
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Restore build
         uses: actions/cache@v4
+        timeout-minutes: 10
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
@@ -202,7 +273,7 @@ jobs:
         if: matrix.database == 'supabase'
 
       - name: Integration Tests
-        run: pnpm test:int --testPathIgnorePatterns=test/fields # Ignore fields tests until reworked
+        run: pnpm test:int
         env:
           NODE_OPTIONS: --max-old-space-size=8096
           PAYLOAD_DATABASE: ${{ matrix.database }}
@@ -210,7 +281,7 @@ jobs:
 
   tests-e2e:
     runs-on: ubuntu-latest
-    needs: core-build
+    needs: build
     strategy:
       fail-fast: false
       matrix:
@@ -218,75 +289,172 @@ jobs:
         suite:
           - _community
           - access-control
-          # - admin
+          - admin__e2e__1
+          - admin__e2e__2
           - auth
-          # - field-error-states
-          # - fields-relationship
-          # - fields
-          - fields/lexical
+          - field-error-states
+          - fields-relationship
+          - fields
+          - fields__collections__Blocks
+          - fields__collections__Array
+          - fields__collections__Relationship
+          - fields__collections__RichText
+          - fields__collections__Lexical__e2e__main
+          - fields__collections__Lexical__e2e__blocks
+          - fields__collections__Date
+          - fields__collections__Number
+          - fields__collections__Point
+          - fields__collections__Tabs
+          - fields__collections__Text
+          - fields__collections__Upload
           - live-preview
-          # - localization
-          # - plugin-nested-docs
-          # - plugin-seo
-          # - refresh-permissions
-          # - uploads
-          # - versions
-
+          - localization
+          - i18n
+          - plugin-cloud-storage
+          - plugin-form-builder
+          - plugin-nested-docs
+          - plugin-seo
+          - versions
+          - uploads
+    env:
+      SUITE_NAME: ${{ matrix.suite }}
     steps:
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Restore build
         uses: actions/cache@v4
+        timeout-minutes: 10
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
-      - name: Install Playwright
-        run: pnpm exec playwright install
+      - name: Start LocalStack
+        run: pnpm docker:start
+        if: ${{ matrix.suite == 'plugin-cloud-storage' }}
+
+      - name: Store Playwright's Version
+        run: |
+          # Extract the version number using a more targeted regex pattern with awk
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --depth=0 | awk '/@playwright\/test/ {print $2}')
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers for Playwright's Version
+        id: cache-playwright-browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Setup Playwright - Browsers and Dependencies
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Setup Playwright - Dependencies-only
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps chromium
 
       - name: E2E Tests
-        uses: nick-fields/retry@v3
-        with:
-          retry_on: error
-          max_attempts: 2
-          timeout_minutes: 15
-          command: pnpm test:e2e ${{ matrix.suite }}
+        run: PLAYWRIGHT_JSON_OUTPUT_NAME=results_${{ matrix.suite }}.json pnpm test:e2e ${{ matrix.suite }}
+        env:
+          PLAYWRIGHT_JSON_OUTPUT_NAME: results_${{ matrix.suite }}.json
+          NEXT_TELEMETRY_DISABLED: 1
 
       - uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: test-results
+          name: test-results-${{ matrix.suite }}
           path: test/test-results/
+          if-no-files-found: ignore
           retention-days: 1
 
-  tests-type-generation:
-    if: false # This should be replaced with gen on a real Payload project
+      # Disabled until this is fixed: https://github.com/daun/playwright-report-summary/issues/156
+      # - uses: daun/playwright-report-summary@v3
+      #   with:
+      #     report-file: results_${{ matrix.suite }}.json
+      #     report-tag: ${{ matrix.suite }}
+      #     job-summary: true
+
+  app-build-with-packed:
     runs-on: ubuntu-latest
-    needs: core-build
+    needs: build
 
     steps:
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Restore build
         uses: actions/cache@v4
+        timeout-minutes: 10
+        with:
+          path: ./*
+          key: ${{ github.sha }}-${{ github.run_number }}
+
+      - name: Start MongoDB
+        uses: supercharge/mongodb-github-action@1.10.0
+        with:
+          mongodb-version: 6.0
+
+      - name: Pack and build app
+        run: |
+          set -ex
+          pnpm run script:pack --dest templates/blank-3.0
+          cd templates/blank-3.0
+          cp .env.example .env
+          ls -la
+          pnpm add ./*.tgz --ignore-workspace
+          pnpm install --ignore-workspace --no-frozen-lockfile
+          cat package.json
+          pnpm run build
+
+  tests-type-generation:
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: ${{ env.PNPM_VERSION }}
+          run_install: false
+
+      - name: Restore build
+        uses: actions/cache@v4
+        timeout-minutes: 10
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
@@ -297,46 +465,6 @@ jobs:
       - name: Generate GraphQL schema file
         run: pnpm dev:generate-graphql-schema graphql-schema-gen
 
-  plugins:
-    runs-on: ubuntu-latest
-    needs: core-build
-    strategy:
-      fail-fast: false
-      matrix:
-        pkg:
-          - create-payload-app
-          - plugin-cloud
-          - plugin-cloud-storage
-          - plugin-form-builder
-          - plugin-nested-docs
-          - plugin-search
-          - plugin-sentry
-          - plugin-seo
-
-    steps:
-      - name: Use Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Build ${{ matrix.pkg }}
-        run: pnpm turbo run build --filter=${{ matrix.pkg }}
-
-      - name: Test ${{ matrix.pkg }}
-        run: pnpm --filter ${{ matrix.pkg }} run test
-
   templates:
     needs: changes
     if: false # Disable until templates are updated for 3.0
@@ -350,11 +478,14 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
 
-      - name: Use Node.js 18
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Start MongoDB
         uses: supercharge/mongodb-github-action@1.10.0
@@ -368,3 +499,18 @@ jobs:
           yarn install
           yarn build
           yarn generate:types
+
+  all-green:
+    name: All Green
+    if: always()
+    runs-on: ubuntu-latest
+    needs:
+      - lint
+      - build
+      - tests-unit
+      - tests-int
+      - tests-e2e
+
+    steps:
+      - if: ${{ always() && (contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')) }}
+        run: exit 1

.github/workflows/pr-title.yml

@@ -0,0 +1,103 @@
+name: pr-title
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: write
+
+jobs:
+  main:
+    name: lint-pr-title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          types: |
+            build
+            chore
+            ci
+            docs
+            feat
+            fix
+            perf
+            refactor
+            revert
+            style
+            test
+            types
+          scopes: |
+            cpa
+            db-\*
+            db-mongodb
+            db-postgres
+            email-nodemailer
+            eslint
+            graphql
+            live-preview
+            live-preview-react
+            next
+            payload
+            plugin-cloud
+            plugin-cloud-storage
+            plugin-form-builder
+            plugin-nested-docs
+            plugin-redirects
+            plugin-relationship-object-ids
+            plugin-search
+            plugin-sentry
+            plugin-seo
+            plugin-stripe
+            richtext-\*
+            richtext-lexical
+            richtext-slate
+            storage-\*
+            storage-azure
+            storage-gcs
+            storage-vercel-blob
+            storage-s3
+            translations
+            ui
+            templates
+            examples(\/(\w|-)+)?
+            deps
+
+          # Disallow uppercase letters at the beginning of the subject
+          subjectPattern: ^(?![A-Z]).+$
+          subjectPatternError: |
+            The subject "{subject}" found in the pull request title "{title}"
+            didn't match the configured pattern. Please ensure that the subject
+            doesn't start with an uppercase character.
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        # When the previous steps fails, the workflow would stop. By adding this
+        # condition you can continue the execution with the populated error message.
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Pull Request titles must follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and have valid scopes.
+
+            ${{ steps.lint_pr_title.outputs.error_message }}
+
+            ```
+            feat(ui): add Button component
+            ^    ^    ^
+            |    |    |__ Subject
+            |    |_______ Scope
+            |____________ Type
+            ```
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          delete: true

.github/workflows/release-canary.yml

@@ -0,0 +1,36 @@
+name: release-canary
+
+on:
+  workflow_dispatch:
+    branches:
+      - beta
+
+env:
+  NODE_VERSION: 18.20.2
+  PNPM_VERSION: 8.15.7
+  DO_NOT_TRACK: 1 # Disable Turbopack telemetry
+  NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry
+
+jobs:
+  release:
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup
+        uses: ./.github/actions/setup
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          pnpm-version: ${{ env.PNPM_VERSION }}
+      - name: Load npm token
+        run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Canary release script
+        # dry run hard-coded to true for testing and no npm token provided
+        run: pnpm tsx ./scripts/publish-canary.ts
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true

.gitignore

@@ -3,6 +3,7 @@ package-lock.json
 dist
 /.idea/*
 !/.idea/runConfigurations
+!/.idea/payload.iml
 
 test-results
 .devcontainer
@@ -15,6 +16,7 @@ test-results
 
 # Ignore test directory media folder/files
 /media
+test/media
 /versions
 
 # Created by https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
@@ -288,4 +290,4 @@ $RECYCLE.BIN/
 # End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
 /build
-.swc
+.swc

.idea/payload.iml

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/components" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/examples" />
+      <excludeFolder url="file://$MODULE_DIR$/media" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/create-payload-app/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/create-payload-app/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/db-mongodb/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/db-mongodb/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/db-postgres/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/db-postgres/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/graphql/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/graphql/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-react/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-react/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/next/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/next/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/fields" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud-storage/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud-storage/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-form-builder/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-nested-docs/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-nested-docs/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-redirects/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-redirects/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-search/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-search/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-sentry/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-seo/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-seo/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-stripe/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-lexical/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-lexical/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/templates" />
+      <excludeFolder url="file://$MODULE_DIR$/test/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/versions" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-slate/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-slate/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/email-nodemailer/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/email-nodemailer/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/email-resend/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/email-resend/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-vue/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-vue/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-form-builder/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-relationship-object-ids/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-relationship-object-ids/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-stripe/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-azure/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-azure/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-gcs/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-gcs/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-s3/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-s3/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-uploadthing/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-uploadthing/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-vercel-blob/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-vercel-blob/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/translations/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/translations/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/ui/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/ui/.turbo" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.node-version

@@ -1 +1 @@
-v18.19.1
+v18.20.2

.nvmrc

@@ -1 +1 @@
-v18.19.1
+v18.20.2

.prettierignore

@@ -10,3 +10,7 @@
 **/temp
 **/docs/**
 tsconfig.json
+packages/payload/*.js
+packages/payload/*.d.ts
+payload-types.ts
+tsconfig.tsbuildinfo

.swcrc

@@ -7,6 +7,15 @@
       "syntax": "typescript",
       "tsx": true,
       "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
     }
   },
   "module": {

.vscode/launch.json

@@ -10,19 +10,52 @@
       "cwd": "${workspaceFolder}"
     },
     {
-      "command": "node --no-deprecation test/dev.js fields",
+      "command": "node --no-deprecation test/dev.js _community",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Community",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev live-preview -- --no-turbo",
+      "command": "node --no-deprecation test/dev.js storage-uploadthing",
+      "cwd": "${workspaceFolder}",
+      "name": "Uploadthing",
+      "request": "launch",
+      "type": "node-terminal",
+      "envFile": "${workspaceFolder}/test/storage-uploadthing/.env"
+    },
+    {
+      "command": "node --no-deprecation test/dev.js live-preview",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Live Preview",
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "node --no-deprecation test/loader/init.js",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Loader",
+      "request": "launch",
+      "type": "node-terminal",
+      "env": {
+        "LOADER_TEST_FILE_PATH": "./dependency-test.js"
+        // "LOADER_TEST_FILE_PATH": "../fields/config.ts"
+      }
+    },
+    {
+      "command": "node --no-deprecation test/dev.js admin",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Admin",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "command": "node --no-deprecation test/dev.js auth",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Auth",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "pnpm run dev plugin-cloud-storage",
       "cwd": "${workspaceFolder}",
@@ -34,50 +67,50 @@
       }
     },
     {
-      "command": "pnpm run dev fields",
+      "command": "node --no-deprecation test/dev.js collections-graphql",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev GraphQL",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "command": "node --no-deprecation test/dev.js fields",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Fields",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev:postgres versions",
+      "command": "node --no-deprecation test/dev.js versions",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Postgres",
       "request": "launch",
-      "type": "node-terminal"
+      "type": "node-terminal",
+      "env": {
+        "PAYLOAD_DATABASE": "postgres"
+      }
     },
     {
-      "command": "pnpm run dev versions",
+      "command": "node --no-deprecation test/dev.js versions",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Versions",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev localization",
+      "command": "node --no-deprecation test/dev.js localization",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Localization",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev uploads",
+      "command": "node --no-deprecation test/dev.js uploads",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Uploads",
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "PAYLOAD_BUNDLER=vite pnpm run dev fields",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Fields (Vite)",
-      "request": "launch",
-      "type": "node-terminal",
-      "env": {
-        "NODE_ENV": "production"
-      }
-    },
     {
       "command": "pnpm run test:int live-preview",
       "cwd": "${workspaceFolder}",

.vscode/settings.json

@@ -40,5 +40,6 @@
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
-  }
+  },
+  "files.insertFinalNewline": true
 }

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

@@ -1,7 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
 import config from '@payload-config'
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundView } from '@payloadcms/next/views/NotFound/index.js'
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
 
 type Args = {
   params: {
@@ -12,6 +14,9 @@ type Args = {
   }
 }
 
-const NotFound = ({ params, searchParams }: Args) => NotFoundView({ config, params, searchParams })
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
 
 export default NotFound

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

@@ -3,7 +3,7 @@ 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/Root/index.js'
+import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
 
 type Args = {
   params: {

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

@@ -1,9 +1,10 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY it because it could be re-written at any time. */
 import config from '@payload-config'
-import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes/index.js'
+import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 
 export const GET = REST_GET(config)
 export const POST = REST_POST(config)
 export const DELETE = REST_DELETE(config)
 export const PATCH = REST_PATCH(config)
+export const OPTIONS = REST_OPTIONS(config)

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

@@ -1,6 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY it because it could be re-written at any time. */
 import config from '@payload-config'
-import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes/index.js'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
 
 export const GET = GRAPHQL_PLAYGROUND_GET(config)

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

@@ -1,6 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY it because it could be re-written at any time. */
 import config from '@payload-config'
-import { GRAPHQL_POST } from '@payloadcms/next/routes/index.js'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
 
 export const POST = GRAPHQL_POST(config)

app/(payload)/custom.scss

@@ -0,0 +1,8 @@
+#custom-css {
+  font-family: monospace;
+  background-image: url('/placeholder.png');
+}
+
+#custom-css::after {
+  content: 'custom-css';
+}

app/(payload)/layout.tsx

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

app/live-preview/_api/fetchDoc.ts

@@ -1,35 +0,0 @@
-import QueryString from 'qs'
-
-import { PAYLOAD_SERVER_URL } from './serverURL.js'
-
-export const fetchDoc = async <T>(args: {
-  collection: string
-  depth?: number
-  id?: string
-  slug?: string
-}): Promise<T> => {
-  const { id, slug, collection, depth = 2 } = args || {}
-
-  const queryString = QueryString.stringify(
-    {
-      ...(slug ? { 'where[slug][equals]': slug } : {}),
-      ...(depth ? { depth } : {}),
-    },
-    { addQueryPrefix: true },
-  )
-
-  const doc: T = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}${queryString}`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method: 'GET',
-  })
-    ?.then((res) => res.json())
-    ?.then((res) => {
-      if (res.errors) throw new Error(res?.errors?.[0]?.message ?? 'Error fetching doc')
-      return res?.docs?.[0]
-    })
-
-  return doc
-}

app/live-preview/_api/fetchDocs.ts

@@ -1,19 +0,0 @@
-import { PAYLOAD_SERVER_URL } from './serverURL.js'
-
-export const fetchDocs = async <T>(collection: string): Promise<T[]> => {
-  const docs: T[] = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}?depth=0&limit=100`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method: 'GET',
-  })
-    ?.then((res) => res.json())
-    ?.then((res) => {
-      if (res.errors) throw new Error(res?.errors?.[0]?.message ?? 'Error fetching docs')
-
-      return res?.docs
-    })
-
-  return docs
-}

app/live-preview/_api/fetchFooter.ts

@@ -1,25 +0,0 @@
-import type { Footer } from '../../../test/live-preview/payload-types.js'
-
-import { PAYLOAD_SERVER_URL } from './serverURL.js'
-
-export async function fetchFooter(): Promise<Footer> {
-  if (!PAYLOAD_SERVER_URL) throw new Error('PAYLOAD_SERVER_URL not found')
-
-  const footer = await fetch(`${PAYLOAD_SERVER_URL}/api/globals/footer`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method: 'GET',
-  })
-    .then((res) => {
-      if (!res.ok) throw new Error('Error fetching doc')
-      return res.json()
-    })
-    ?.then((res) => {
-      if (res?.errors) throw new Error(res?.errors[0]?.message || 'Error fetching footer')
-      return res
-    })
-
-  return footer
-}

app/live-preview/_api/fetchHeader.ts

@@ -1,25 +0,0 @@
-import type { Header } from '../../../test/live-preview/payload-types.js'
-
-import { PAYLOAD_SERVER_URL } from './serverURL.js'
-
-export async function fetchHeader(): Promise<Header> {
-  if (!PAYLOAD_SERVER_URL) throw new Error('PAYLOAD_SERVER_URL not found')
-
-  const header = await fetch(`${PAYLOAD_SERVER_URL}/api/globals/header`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method: 'GET',
-  })
-    ?.then((res) => {
-      if (!res.ok) throw new Error('Error fetching doc')
-      return res.json()
-    })
-    ?.then((res) => {
-      if (res?.errors) throw new Error(res?.errors[0]?.message || 'Error fetching header')
-      return res
-    })
-
-  return header
-}

changelog.config.js

@@ -1,39 +0,0 @@
-module.exports = {
-  // gitRawCommitsOpts: {
-  //   from: 'v2.0.9',
-  //   path: 'packages/payload',
-  // },
-  // infile: 'CHANGELOG.md',
-  options: {
-    preset: {
-      name: 'conventionalcommits',
-      types: [
-        { section: 'Features', type: 'feat' },
-        { section: 'Features', type: 'feature' },
-        { section: 'Bug Fixes', type: 'fix' },
-        { section: 'Documentation', type: 'docs' },
-      ],
-    },
-  },
-  // outfile: 'NEW.md',
-  writerOpts: {
-    commitGroupsSort: (a, b) => {
-      const groupOrder = ['Features', 'Bug Fixes', 'Documentation']
-      return groupOrder.indexOf(a.title) - groupOrder.indexOf(b.title)
-    },
-
-    // Scoped commits at the end, alphabetical sort
-    commitsSort: (a, b) => {
-      if (a.scope || b.scope) {
-        if (!a.scope) return -1
-        if (!b.scope) return 1
-        return a.scope === b.scope
-          ? a.subject.localeCompare(b.subject)
-          : a.scope.localeCompare(b.scope)
-      }
-
-      // Alphabetical sort
-      return a.subject.localeCompare(b.subject)
-    },
-  },
-}

docs/admin/components.mdx

@@ -565,10 +565,11 @@ These are the props that will be passed to your custom Label.
 #### Example
 
 ```tsx
+'use client'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { getTranslation } from '@payloadcms/translations'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 
-import { getTranslation } from 'payload/utilities/getTranslation'
 
 type Props = {
   htmlFor?: string
@@ -680,21 +681,21 @@ To make use of Payload SCSS variables / mixins to use directly in your own compo
 
 ### Getting the current language
 
-When developing custom components you can support multiple languages to be consistent with Payload's i18n support. The best way to do this is to add your translation resources to the [i18n configuration](https://payloadcms.com/docs/configuration/i18n) and import `useTranslation` from `react-i18next` in your components.
+When developing custom components you can support multiple languages to be consistent with Payload's i18n support. The best way to do this is to add your translation resources to the [i18n configuration](https://payloadcms.com/docs/configuration/i18n) and import `useTranslation` from `@payloadcms/ui/providers/Translation` in your components.
 
 For example:
 
 ```tsx
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 
 const CustomComponent: React.FC = () => {
   // highlight-start
-  const { t, i18n } = useTranslation('namespace1')
+  const { t, i18n } = useTranslation()
   // highlight-end
 
   return (
     <ul>
-      <li>{t('key', { variable: 'value' })}</li>
+      <li>{t('namespace1:key', { variable: 'value' })}</li>
       <li>{t('namespace2:key', { variable: 'value' })}</li>
       <li>{i18n.language}</li>
     </ul>

docs/admin/hooks.mdx

@@ -639,12 +639,12 @@ export const CustomArrayManager = () => {
 
 The `useCollapsible` hook allows you to control parent collapsibles:
 
-| Property                | Description                                                                                                  |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------ | --- |
-| **`collapsed`**         | State of the collapsible. `true` if open, `false` if collapsed                                               |
-| **`isVisible`**         | If nested, determine if the nearest collapsible is visible. `true` if no parent is closed, `false` otherwise |
-| **`toggle`**            | Toggles the state of the nearest collapsible                                                                 |
-| **`withinCollapsible`** | Determine when you are within another collaspible                                                            |     |
+| Property                  | Description                                                                                                  |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------ | --- |
+| **`isCollapsed`**         | State of the collapsible. `true` if open, `false` if collapsed                                               |
+| **`isVisible`**           | If nested, determine if the nearest collapsible is visible. `true` if no parent is closed, `false` otherwise |
+| **`toggle`**              | Toggles the state of the nearest collapsible                                                                 |
+| **`isWithinCollapsible`** | Determine when you are within another collaspible                                                            |     |
 
 **Example:**
 
@@ -654,10 +654,11 @@ import React from 'react'
 import { useCollapsible } from 'payload/components/utilities'
 
 const CustomComponent: React.FC = () => {
-  const { collapsed, toggle } = useCollapsible()
+  const { isCollapsed, toggle } = useCollapsible()
+
   return (
     <div>
-      <p className="field-type">I am {collapsed ? 'closed' : 'open'}</p>
+      <p className="field-type">I am {isCollapsed ? 'closed' : 'open'}</p>
       <button onClick={toggle} type="button">
         Toggle
       </button>

docs/admin/overview.mdx

@@ -33,7 +33,7 @@ All options for the Admin panel are defined in your base Payload config file.
 | `bundler`         | The bundler that you would like to use to bundle the admin panel. Officially supported bundlers: [Webpack](/docs/admin/webpack) and [Vite](/docs/admin/vite).                                                                                                               |
 | `user`            | The `slug` of a Collection that you want be used to log in to the Admin dashboard. [More](/docs/admin/overview#the-admin-user-collection)                                                                                                                                   |
 | `buildPath`       | Specify an absolute path for where to store the built Admin panel bundle used in production. Defaults to `path.resolve(process.cwd(), 'build')`.                                                                                                                            |
-| `meta`            | Base meta data to use for the Admin panel. Included properties are `titleSuffix`, `ogImage`, and `favicon`.                                                                                                                                                                 |
+| `meta`            | Base meta data to use for the Admin panel. Included properties are `titleSuffix`, `icons`, and `openGraph`. Can be overridden on a per collection or per global basis.                                                                                                      |
 | `disable`         | If set to `true`, the entire Admin panel will be disabled.                                                                                                                                                                                                                  |
 | `indexHTML`       | Optionally replace the entirety of the `index.html` file used by the Admin panel. Reference the [base index.html file](https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/index.html) to ensure your replacement has the appropriate HTML elements. |
 | `css`             | Absolute path to a stylesheet that you can use to override / customize the Admin panel styling. [More](/docs/admin/customizing-css).                                                                                                                                        |
@@ -45,8 +45,7 @@ All options for the Admin panel are defined in your base Payload config file.
 | `components`      | Component overrides that affect the entirety of the Admin panel. [More](/docs/admin/components)                                                                                                                                                                             |
 | `webpack`         | Customize the Webpack config that's used to generate the Admin panel. [More](/docs/admin/webpack)                                                                                                                                                                           |
 | `vite`            | Customize the Vite config that's used to generate the Admin panel. [More](/docs/admin/vite)                                                                                                                                                                                 |
-| `logoutRoute`     | The route for the `logout` page.                                                                                                                                                                                                                                            |
-| `inactivityRoute` | The route for the `logout` inactivity page.                                                                                                                                                                                                                                 |
+| `routes`          | Replace built-in Admin Panel routes with your own custom routes. I.e. `{ logout: '/custom-logout', inactivity: 'custom-inactivity' }`                                                                                                                                       |
 
 ### The Admin User Collection
 

docs/configuration/collections.mdx

@@ -13,23 +13,25 @@ It's often best practice to write your Collections in separate files and then im
 
 ## Options
 
-| Option            | Description                                                                                                                                                                                                              |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **`slug`** \*     | Unique, URL-friendly string that will act as an identifier for this Collection.                                                                                                                                          |
-| **`fields`** \*   | Array of field types that will determine the structure and functionality of the data stored within this Collection. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
-| **`labels`**      | Singular and plural labels for use in identifying this Collection throughout Payload. Auto-generated from slug if not defined.                                                                                           |
-| **`admin`**       | Admin-specific configuration. See below for [more detail](#admin-options).                                                                                                                                               |
-| **`hooks`**       | Entry points to "tie in" to Collection actions at specific points. [More](/docs/hooks/overview#collection-hooks)                                                                                                         |
-| **`access`**      | Provide access control functions to define exactly who should be able to do what with Documents in this Collection. [More](/docs/access-control/overview/#collections)                                                   |
-| **`auth`**        | Specify options if you would like this Collection to feature authentication. For more, consult the [Authentication](/docs/authentication/config) documentation.                                                          |
-| **`upload`**      | Specify options if you would like this Collection to support file uploads. For more, consult the [Uploads](/docs/upload/overview) documentation.                                                                         |
-| **`timestamps`**  | Set to false to disable documents' automatically generated `createdAt` and `updatedAt` timestamps.                                                                                                                       |
-| **`versions`**    | Set to true to enable default options, or configure with object properties. [More](/docs/versions/overview#collection-config)                                                                                            |
-| **`endpoints`**   | Add custom routes to the REST API. Set to `false` to disable routes. [More](/docs/rest-api/overview#custom-endpoints)                                                                                                    |
-| **`graphQL`**     | An object with `singularName` and `pluralName` strings used in schema generation. Auto-generated from slug if not defined. Set to `false` to disable GraphQL.                                                            |
-| **`typescript`**  | An object with property `interface` as the text used in schema generation. Auto-generated from slug if not defined.                                                                                                      |
-| **`defaultSort`** | Pass a top-level field to sort by default in the collection List view. Prefix the name of the field with a minus symbol ("-") to sort in descending order.                                                               |
-| **`custom`**      | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                                |
+| Option                 | Description                                                                                                                                                                                                              |
+|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **`slug`** \*          | Unique, URL-friendly string that will act as an identifier for this Collection.                                                                                                                                          |
+| **`fields`** \*        | Array of field types that will determine the structure and functionality of the data stored within this Collection. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
+| **`labels`**           | Singular and plural labels for use in identifying this Collection throughout Payload. Auto-generated from slug if not defined.                                                                                           |
+| **`admin`**            | Admin-specific configuration. See below for [more detail](#admin-options).                                                                                                                                               |
+| **`hooks`**            | Entry points to "tie in" to Collection actions at specific points. [More](/docs/hooks/overview#collection-hooks)                                                                                                         |
+| **`access`**           | Provide access control functions to define exactly who should be able to do what with Documents in this Collection. [More](/docs/access-control/overview/#collections)                                                   |
+| **`auth`**             | Specify options if you would like this Collection to feature authentication. For more, consult the [Authentication](/docs/authentication/config) documentation.                                                          |
+| **`upload`**           | Specify options if you would like this Collection to support file uploads. For more, consult the [Uploads](/docs/upload/overview) documentation.                                                                         |
+| **`timestamps`**       | Set to false to disable documents' automatically generated `createdAt` and `updatedAt` timestamps.                                                                                                                       |
+| **`versions`**         | Set to true to enable default options, or configure with object properties. [More](/docs/versions/overview#collection-config)                                                                                            |
+| **`endpoints`**        | Add custom routes to the REST API. Set to `false` to disable routes. [More](/docs/rest-api/overview#custom-endpoints)                                                                                                    |
+| **`graphQL`**          | An object with `singularName` and `pluralName` strings used in schema generation. Auto-generated from slug if not defined. Set to `false` to disable GraphQL.                                                            |
+| **`typescript`**       | An object with property `interface` as the text used in schema generation. Auto-generated from slug if not defined.                                                                                                      |
+| **`disableDuplicate`** | When true, do not show the "Duplicate" button while editing documents within this collection and prevent `duplicate` from all APIs.                                                                                      |
+| **`defaultSort`**      | Pass a top-level field to sort by default in the collection List view. Prefix the name of the field with a minus symbol ("-") to sort in descending order.                                                               |
+| **`dbName`**      | Custom table or collection name depending on the database adapter. Auto-generated from slug if not defined.
+| **`custom`**           | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                                |
 
 _\* An asterisk denotes that a property is required._
 
@@ -75,10 +77,10 @@ property on a collection's config.
 | `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.                                                |
 | `description`                | Text or React component to display below the Collection label in the List view to give editors more information.                                                                                      |
 | `defaultColumns`             | Array of field names that correspond to which columns to show by default in this collection's List view.                                                                                              |
-| `disableDuplicate `          | Disables the "Duplicate" button while editing documents within this collection.                                                                                                                       |
 | `hideAPIURL`                 | Hides the "API URL" meta field while editing documents within this collection.                                                                                                                        |
 | `enableRichTextLink`         | The [Rich Text](/docs/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](/docs/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`                       | Metadata overrides to apply to the [Admin panel](../admin/overview). Included properties are `description` and `openGraph`.                                                                           |
 | `preview`                    | Function to generate preview URLS within the Admin panel that can point to your app. [More](#preview).                                                                                                |
 | `livePreview`                | Enable real-time editing for instant visual feedback of your front-end application. [More](/docs/live-preview/overview).                                                                              |
 | `components`                 | Swap in your own React components to be used within this collection. [More](/docs/admin/components#collections)                                                                                       |

docs/configuration/globals.mdx

@@ -26,6 +26,7 @@ As with Collection configs, it's often best practice to write your Globals in se
 | **`graphQL.name`** | Text used in schema generation. Auto-generated from slug if not defined.                                                                                                                                             |
 | **`typescript`**   | An object with property `interface` as the text used in schema generation. Auto-generated from slug if not defined.                                                                                                  |
 | **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                            |
+| **`dbName`**       | Custom table or collection name for this global depending on the database adapter. Auto-generated from slug if not defined.
 
 _\* An asterisk denotes that a property is required._
 
@@ -73,6 +74,7 @@ You can customize the way that the Admin panel behaves on a Global-by-Global bas
 | `preview`     | Function to generate a preview URL within the Admin panel for this global that can point to your app. [More](#preview).           |
 | `livePreview` | Enable real-time editing for instant visual feedback of your front-end application. [More](/docs/live-preview/overview).          |
 | `hideAPIURL`  | Hides the "API URL" meta field while editing documents within this collection.                                                    |
+| `meta`        | Metadata overrides to apply to the [Admin panel](../admin/overview). Included properties are `description` and `openGraph`.       |
 
 ### Preview
 

docs/configuration/i18n.mdx

@@ -6,7 +6,7 @@ desc: Manage and customize internationalization support in your CMS editor exper
 keywords: internationalization, i18n, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-Not only does Payload support managing localized content, it also has internationalization support so that admin users can work in their preferred language. Payload's i18n support is built on top of [i18next](https://www.i18next.com). It comes included by default and can be extended in your config.
+Not only does Payload support managing localized content, it also has internationalization support so that admin users can work in their preferred language. It comes included by default and can be extended in your config.
 
 While Payload's built-in features come translated, you may want to also translate parts of your project's configuration too. This is possible in places like collections and globals labels and groups, field labels, descriptions and input placeholder text. The admin UI will display all the correct translations you provide based on the user's language.
 
@@ -72,9 +72,7 @@ After a user logs in, they can change their language selection in the `/account`
 
 Payload's backend uses express middleware to set the language on incoming requests before they are handled. This allows backend validation to return error messages in the user's own language or system generated emails to be sent using the correct translation. You can make HTTP requests with the `accept-language` header and Payload will use that language.
 
-Anywhere in your Payload app that you have access to the `req` object, you can access i18next's extensive internationalization features assigned to `req.i18n`. To access text translations you can use `req.t('namespace:key')`.
-
-Read the i18next [API documentation](https://www.i18next.com/overview/api) to learn more.
+Anywhere in your Payload app that you have access to the `req` object, you can access payload's extensive internationalization features assigned to `req.i18n`. To access text translations you can use `req.t('namespace:key')`.
 
 ### Configuration Options
 
@@ -88,9 +86,8 @@ import { buildConfig } from 'payload/config'
 export default buildConfig({
   //...
   i18n: {
-    fallbackLng: 'en', // default
-    debug: false, // default
-    resources: {
+    fallbackLanguage: 'en', // default
+    translations: {
       en: {
         custom: {
           // namespace can be anything you want
@@ -107,4 +104,63 @@ export default buildConfig({
 })
 ```
 
-See the i18next [configuration options](https://www.i18next.com/overview/configuration-options) to learn more.
+## Types for custom translations
+
+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 react component:
+
+```ts
+'use client'
+import type { NestedKeysStripped } from '@payloadcms/translations'
+import type React from 'react'
+
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+
+const customTranslations = {
+  en: {
+    general: {
+      test: 'Custom Translation',
+    },
+  },
+}
+
+type CustomTranslationObject = typeof customTranslations.en
+type CustomTranslationKeys = NestedKeysStripped<CustomTranslationObject>
+
+export const MyComponent: React.FC = () => {
+  const { i18n, t } = useTranslation<CustomTranslationObject, CustomTranslationKeys>() // These generics merge your custom translations with the default client translations
+
+  return t('general:test')
+}
+
+```
+
+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'
+import type { Field } from 'payload/types'
+
+const customTranslations = {
+  en: {
+    general: {
+      test: 'Custom Translation',
+    },
+  },
+}
+
+type CustomTranslationObject = typeof customTranslations.en
+type CustomTranslationKeys = NestedKeysStripped<CustomTranslationObject>
+
+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('fields:addLabel'),
+}
+```
+

docs/configuration/localization.mdx

@@ -49,7 +49,8 @@ export default buildConfig({
       {
         label: 'Arabic',
         code: 'ar',
-        // opt-in to setting default text-alignment on Input fields to rtl (right-to-left) when current locale is rtl
+        // opt-in to setting default text-alignment on Input fields to rtl (right-to-left)
+        // when current locale is rtl
         rtl: true,
       },
     ],
@@ -134,13 +135,9 @@ to support localization, you need to specify each field that you would like to l
 ```js
 {
   name: 'title',
-    type
-:
-  'text',
-    // highlight-start
-    localized
-:
-  true,
+  type: 'text',
+  // highlight-start
+  localized: true,
   // highlight-end
 }
 ```

docs/database/postgres.mdx

@@ -38,12 +38,18 @@ export default buildConfig({
 
 ### Options
 
-| Option         | Description                                                                                                                                                                      |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `pool`         | [Pool connection options](https://orm.drizzle.team/docs/quick-postgresql/node-postgres) that will be passed to Drizzle and `node-postgres`.                                      |
-| `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.                                                                                                                              |
+| Option                | Description                                                                                                                                                                                           |
+|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `pool` \*             | [Pool connection options](https://orm.drizzle.team/docs/quick-postgresql/node-postgres) that will be passed to Drizzle and `node-postgres`.                                                           |
+| `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.                                                                                                                                                   |
+| `logger`              | The instance of the logger to be passed to drizzle. By default Payload's will be used.                                                                                                                |
 | `schemaName`   | A string for the postgres schema to use, defaults to 'public'.                                                                                                                   |
+| `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'.                                                                                                                   |
+
+
 
 ### Access to Drizzle
 

docs/database/transactions.mdx

@@ -20,7 +20,8 @@ The initial request made to Payload will begin a new transaction and attach it t
 
 ```ts
 const afterChange: CollectionAfterChangeHook = async ({ req }) => {
-  // because req.transactionID is assigned from Payload and passed through, my-slug will only persist if the entire request is successful
+  // because req.transactionID is assigned from Payload and passed through,
+  // my-slug will only persist if the entire request is successful
   await req.payload.create({
     req,
     collection: 'my-slug',

docs/email/overview.mdx

@@ -2,166 +2,165 @@
 title: Email Functionality
 label: Overview
 order: 10
-desc: Payload uses NodeMailer to allow you to send emails smoothly from your app. Set up email functions such as password resets, order confirmations and more.
+desc: Payload uses an adapter pattern to enable email functionality. Set up email functions such as password resets, order confirmations and more.
 keywords: email, overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
 ### Introduction
 
-Payload comes ready to send your application's email. Whether you simply need built-in password reset
-email to work or you want customers to get an order confirmation email, you're almost there. Payload makes use of
-[NodeMailer](https://nodemailer.com) for email and won't get in your way for those already familiar.
+Payload has a few email adapters that can be imported to enable email functionality. The [@payloadcms/email-nodemailer](https://www.npmjs.com/package/@payloadcms/email-nodemailer) package will be the package most will want to install. This package provides an easy way to use [Nodemailer](https://nodemailer.com) for email and won't get in your way for those already familiar.
 
-For email to send from your Payload server, some configuration is required. The settings you provide will be set
-in the `email` property object of your payload init call. Payload will make use of the transport that you have configured for it for things like reset password or verifying new user accounts and email send methods are available to you as well on your payload instance.
+The email adapter should be passed into the `email` property of the Payload config. This will allow Payload to send emails for things like password resets, new user verification, and any other email sending needs you may have.
 
 ### Configuration
 
-**Three ways to set it up**
+#### Default Configuration
 
-1. **Default**: When email is not needed, a mock email handler will be created and used when nothing is provided. This is ideal for development environments and can be changed later when ready to [go to production](/docs/production/deployment).
-1. **Recommended**: Set the `transportOptions` and Payload will do the set up for you.
-1. **Advanced**: The `transport` object can be assigned a nodemailer transport object set up in your server scripts and given for Payload to use.
+When email is not needed or desired, Payload will log a warning on startup notifying that email is not configured. A  warning message will also be logged on any attempt to send an email.
 
-The following options are configurable in the `email` property object as part of the options object when calling payload.init().
+#### Email Adapter
 
-| Option                   | Description                                                                                                                                                                            |
-| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`fromName`** \*        | The name part of the From field that will be seen on the delivered email                                                                                                               |
-| **`fromAddress`** \*     | The email address part of the From field that will be used when delivering email                                                                                                       |
-| **`transport`**          | The NodeMailer transport object for when you want to do it yourself, not needed when transportOptions is set                                                                           |
-| **`transportOptions`**   | An object that configures the transporter that Payload will create. For all the available options see the [NodeMailer documentation](https://nodemailer.com) or see the examples below |
-| **`logMockCredentials`** | If set to true and no transport/transportOptions, ethereal credentials will be logged to console on startup                                                                            |
+An email adapter will require at least the following fields:
 
-_\* An asterisk denotes that a property is required._
+| Option                      | Description                                                                      |
+| --------------------------- | -------------------------------------------------------------------------------- |
+| **`defaultFromName`** \*    | The name part of the From field that will be seen on the delivered email         |
+| **`defaultFromAddress`** \* | The email address part of the From field that will be used when delivering email |
+
+
+#### Officlal Email Adapters
+
+| Name       | Package                                                                                    | Description                                                                                                                                                                                     |
+| ---------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Nodemailer | [@payloadcms/email-nodemailer](https://www.npmjs.com/package/@payloadcms/email-nodemailer) | Use any [Nodemailer transport](https://nodemailer.com/transports), including SMTP, Resend, SendGrid, and more. This was provided by default in Payload 2.x. This is the easiest migration path. |
+| Resend     | [@payloadcms/email-resend](https://www.npmjs.com/package/@payloadcms/email-resend)         | Resend email via their REST API. This is preferred for serverless platforms such as Vercel because it is much more lightweight than the nodemailer adapter.                                     |
+
+### Nodemailer Configuration
+
+| Option                 | Description                                                                                                                                                                            |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`transport`**        | The Nodemailer transport object for when you want to do it yourself, not needed when transportOptions is set                                                                           |
+| **`transportOptions`** | An object that configures the transporter that Payload will create. For all the available options see the [Nodemailer documentation](https://nodemailer.com) or see the examples below |
 
 ### Use SMTP
 
-Simple Mail Transfer Protocol (SMTP) options can be passed in using the `transportOptions` object on the `email` options. See the [NodeMailer SMTP documentation](https://nodemailer.com/smtp/) for more information, including details on when `secure` should and should not be set to `true`.
+Simple Mail Transfer Protocol (SMTP) options can be passed in using the `transportOptions` object on the `email` options. See the [Nodemailer SMTP documentation](https://nodemailer.com/smtp/) for more information, including details on when `secure` should and should not be set to `true`.
 
 **Example email options using SMTP:**
 
 ```ts
-payload.init({
-  email: {
+import { buildConfig } from 'payload/config'
+import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
+
+export default buildConfig({
+  email: nodemailerAdapter({
+    defaultFromAddress: 'info@payloadcms.com',
+    defaultFromName: 'Payload',
+    // Nodemailer transportOptions
     transportOptions: {
       host: process.env.SMTP_HOST,
+      port: 587,
       auth: {
         user: process.env.SMTP_USER,
         pass: process.env.SMTP_PASS,
       },
-      port: Number(process.env.SMTP_HOST),
-      secure: Number(process.env.SMTP_PORT) === 465, // true for port 465, false (the default) for 587 and others
-      requireTLS: true,
     },
-    fromName: 'hello',
-    fromAddress: 'hello@example.com',
-  },
-  // ...
+  }),
 })
 ```
 
-<Banner type="warning">
-  It is best practice to avoid saving credentials or API keys directly in your code, use
-  [environment variables](/docs/configuration/overview#using-environment-variables-in-your-config).
-</Banner>
-
-### Use an email service
-
-Many third party mail providers are available and offer benefits beyond basic SMTP. As an example, your payload init could look like this if you wanted to use SendGrid.com, though the same approach would work for any other [NodeMailer transports](https://nodemailer.com/transports/) shown here or provided by another third party.
+**Example email options using nodemailer.createTransport:**
 
 ```ts
-import payload from 'payload'
-import nodemailerSendgrid from 'nodemailer-sendgrid'
-
-const sendGridAPIKey = process.env.SENDGRID_API_KEY
-
-payload.init({
-  ...(sendGridAPIKey
-    ? {
-        email: {
-          transportOptions: nodemailerSendgrid({
-            apiKey: sendGridAPIKey,
-          }),
-          fromName: 'Admin',
-          fromAddress: 'admin@example.com',
-        },
-      }
-    : {}),
-})
-```
-
-### Use a custom NodeMailer transport
-
-To take full control of the mail transport you may wish to use `nodemailer.createTransport()` on your server and provide it to Payload init.
-
-```ts
-import payload from 'payload'
+import { buildConfig } from 'payload/config'
+import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
 import nodemailer from 'nodemailer'
 
-const payload = require('payload')
-const nodemailer = require('nodemailer')
-
-const transport = await nodemailer.createTransport({
-  host: process.env.SMTP_HOST,
-  port: 587,
-  auth: {
-    user: process.env.SMTP_USER,
-    pass: process.env.SMTP_PASS,
-  },
+export default buildConfig({
+  email: nodemailerAdapter({
+    defaultFromAddress: 'info@payloadcms.com',
+    defaultFromName: 'Payload',
+    // Any Nodemailer transport can be used
+    transport: nodemailer.createTransport({
+      host: process.env.SMTP_HOST,
+      port: 587,
+      auth: {
+        user: process.env.SMTP_USER,
+        pass: process.env.SMTP_PASS,
+      },
+    }),
+  }),
 })
+```
 
-payload.init({
-  email: {
-    fromName: 'Admin',
-    fromAddress: 'admin@example.com',
-    transport,
-  },
-  // ...
+**Custom Transport:**
+
+You also have the ability to bring your own nodemailer transport. This is an example of using the SendGrid nodemailer transport.
+
+
+```ts
+import { buildConfig } from 'payload/config'
+import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
+import nodemailerSendgrid from 'nodemailer-sendgrid'
+
+
+export default buildConfig({
+  email: nodemailerAdapter({
+    defaultFromAddress: 'info@payloadcms.com',
+    defaultFromName: 'Payload',
+    transportOptions: nodemailerSendgrid({
+      apiKey: process.env.SENDGRID_API_KEY,
+    }),
+  }),
+})
+```
+
+During development, if you pass nothing to `nodemailerAdapter`, it will use the [ethereal.email](https://ethereal.email) service.
+
+This will log the ethereal.email details to console on startup.
+
+```ts
+import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
+
+export default buildConfig({
+  email: nodemailerAdapter(),
+})
+```
+
+### Resend Configuration
+
+The Resend adapter requires an API key to be passed in the options. This can be found in the Resend dashboard. This is the preferred package if you are deploying on Vercel because this is much more lightweight than the Nodemailer adapter.
+
+| Option | Description                         |
+| ------ | ----------------------------------- |
+| apiKey | The API key for the Resend service. |
+
+```ts
+import { buildConfig } from 'payload/config'
+import { resendAdapter } from '@payloadcms/email-resend'
+
+export default buildConfig({
+  email: resendAdapter({
+    defaultFromAddress: 'dev@payloadcms.com',
+    defaultFromName: 'Payload CMS',
+    apiKey: process.env.RESEND_API_KEY || '',
+  }),
 })
 ```
 
 ### Sending Mail
 
-With a working transport you can call it anywhere you have access to payload by calling `payload.sendEmail(message)`. The `message` will contain the `to`, `subject` and `email` or `text` for the email being sent. To see all available message configuration options see [NodeMailer](https://nodemailer.com/message).
-
-### Mock transport
-
-By default, Payload uses a mock implementation that only sends mail to the [ethereal](https://ethereal.email) capture service that will never reach a user's inbox. While in development you may wish to make use of the captured messages which is why the payload output during server output helpfully logs this out on the server console.
-
-To see ethereal credentials, add `logMockCredentials: true` to the email options. This will cause them to be logged to console on startup.
+With a working transport you can call it anywhere you have access to payload by calling `payload.sendEmail(message)`. The `message` will contain the `to`, `subject` and `html` or `text` for the email being sent. Other options are also available and can be seen in the sendEmail args. Support for these will depend on the adapter being used.
 
 ```ts
-payload.init({
-  email: {
-    fromName: 'Admin',
-    fromAddress: 'admin@example.com',
-    logMockCredentials: true, // Optional
-  },
-  // ...
+// Example of sending an email
+const email = await payload.sendEmail({
+  to: 'test@example.com',
+  subject: 'This is a test email',
+  text: 'This is my message body',
 })
 ```
 
-**Console output when starting payload with a mock email instance and logMockCredentials: true**
-
-```
-[06:37:21] INFO  (payload): Starting Payload...
-[06:37:22] INFO  (payload): Payload Demo Initialized
-[06:37:22] INFO  (payload): listening on 3000...
-[06:37:22] INFO  (payload): Connected to MongoDB server successfully!
-[06:37:23] INFO  (payload): E-mail configured with mock configuration
-[06:37:23] INFO  (payload): Log into mock email provider at https://ethereal.email
-[06:37:23] INFO  (payload): Mock email account username: hhav5jw7doo4euev@ethereal.email
-[06:37:23] INFO  (payload): Mock email account password: VNdGcvDZeyEhtuPBqf
-```
-
-The mock email handler is used when payload is started with neither `transport` or `transportOptions` to know how to deliver email.
-
-<Banner type="warning">
-  The randomly generated email account username and password will be different each time the Payload
-  server starts.
-</Banner>
-
 ### Using multiple mail providers
 
 Payload supports the use of a single transporter of email, but there is nothing stopping you from having more. Consider a use case where sending bulk email is handled differently than transactional email and could be done using a [hook](/docs/hooks/overview).

docs/fields/array.mdx

@@ -45,6 +45,7 @@ keywords: array, fields, config, configuration, documentation, Content Managemen
 | **`admin`**         | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                                                                                                                          |
 | **`custom`**        | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                                                                                          |
 | **`interfaceName`** | Create a top level, reusable [Typescript interface](/docs/typescript/generating-types#custom-field-interfaces) & [GraphQL type](/docs/graphql/graphql-schema#custom-field-schemas).                                                                                                |
+| **`dbName`**        | Custom table name for the field when using SQL database adapter ([Postgres](/docs/database/postgres)). Auto-generated from name if not defined.                                                                                                                                    |
 
 _\* An asterisk denotes that a property is required._
 
@@ -56,6 +57,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 | ------------------------- | -------------------------------------------------------------------------------------------------------------------- |
 | **`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`                                                               |
 
 ### Example
 

docs/fields/blocks.mdx

@@ -53,9 +53,10 @@ _\* An asterisk denotes that a property is required._
 
 In addition to the default [field admin config](/docs/fields/overview#admin-config), you can adjust the following properties:
 
-| Option              | Description                     |
-| ------------------- | ------------------------------- |
-| **`initCollapsed`** | Set the initial collapsed state |
+| Option              | Description                        |
+| ------------------- | ---------------------------------- |
+| **`initCollapsed`**    | Set the initial collapsed state |
+| **`isSortable`**       | Disable order sorting by setting this value to `false` |
 
 ### Block configs
 
@@ -80,6 +81,7 @@ Blocks are defined as separate configs of their own.
 | **`imageAltText`**         | Customize this block's image thumbnail alt text.                                                                                                                                    |
 | **`interfaceName`**        | Create a top level, reusable [Typescript interface](/docs/typescript/generating-types#custom-field-interfaces) & [GraphQL type](/docs/graphql/graphql-schema#custom-field-schemas). |
 | **`graphQL.singularName`** | Text to use for the GraphQL schema name. Auto-generated from slug if not defined. NOTE: this is set for deprecation, prefer `interfaceName`.                                        |
+| **`dbName`**               | Custom table name for this block type when using SQL database adapter ([Postgres](/docs/database/postgres)). Auto-generated from slug if not defined.
 | **`custom`**               | Extension point for adding custom data (e.g. for plugins)                                                                                                                           |
 
 #### Auto-generated data per block

docs/fields/json.mdx

@@ -4,7 +4,7 @@ label: JSON
 order: 50
 desc: The JSON field type will store any string in the Database. Learn how to use JSON fields, see examples and options.
 
-keywords: json, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
+keywords: json, jsonSchema, schema, validation, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
 <Banner>
@@ -30,6 +30,7 @@ This field uses the `monaco-react` editor syntax highlighting.
 | **`unique`**       | Enforce that each entry in the Collection has a unique value for this field.                                                                                                |
 | **`index`**        | Build an [index](/docs/database/overview) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
 | **`validate`**     | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                |
+| **`jsonSchema`**   | Provide a JSON schema that will be used for validation. [JSON schemas](https://json-schema.org/learn/getting-started-step-by-step)
 | **`saveToJWT`**    | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                               |
 | **`hooks`**        | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks)                                                                  |
 | **`access`**       | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control)                     |
@@ -52,7 +53,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 
 ### Example
 
-`collections/ExampleCollection.ts
+`collections/ExampleCollection.ts`
 
 ```ts
 import { CollectionConfig } from 'payload/types'
@@ -68,3 +69,67 @@ export const ExampleCollection: CollectionConfig = {
   ],
 }
 ```
+### JSON Schema Validation
+
+Payload JSON fields fully support the [JSON schema](https://json-schema.org/) standard. By providing a schema in your field config, the editor will be guided in the admin UI, getting typeahead for properties and their formats automatically. When the document is saved, the default validation will prevent saving any invalid data in the field according to the schema in your config.
+
+If you only provide a URL to a schema, Payload will fetch the desired schema if it is publicly available. If not, it is recommended to add the schema directly to your config or import it from another file so that it can be implemented consistently in your project.
+
+
+#### Local JSON Schema
+
+`collections/ExampleCollection.ts`
+
+```ts
+import { CollectionConfig } from 'payload/types'
+
+export const ExampleCollection: CollectionConfig = {
+  slug: 'example-collection',
+  fields: [
+    {
+      name: 'customerJSON', // required
+      type: 'json', // required
+      jsonSchema: {
+        uri: 'a://b/foo.json', // required
+        fileMatch: ['a://b/foo.json'], // required
+        schema: {
+          type: 'object',
+          properties: {
+            foo: {
+              enum: ['bar', 'foobar'],
+            }
+          },
+        },
+      },
+
+    },
+  ],
+}
+// {"foo": "bar"} or {"foo": "foobar"} - ok
+// Attempting to create {"foo": "not-bar"} will throw an error
+```
+
+#### Remote JSON Schema
+
+`collections/ExampleCollection.ts`
+
+```ts
+import { CollectionConfig } from 'payload/types'
+
+export const ExampleCollection: CollectionConfig = {
+  slug: 'example-collection',
+  fields: [
+    {
+      name: 'customerJSON', // required
+      type: 'json', // required
+      jsonSchema: {
+        uri: 'https://example.com/customer.schema.json', // required
+        fileMatch: ['https://example.com/customer.schema.json'], // required
+      },
+    },
+  ],
+}
+// If 'https://example.com/customer.schema.json' has a JSON schema
+// {"foo": "bar"} or {"foo": "foobar"} - ok
+// Attempting to create {"foo": "not-bar"} will throw an error
+```

docs/fields/number.mdx

@@ -20,27 +20,27 @@ keywords: number, fields, config, configuration, documentation, Content Manageme
 
 ### Config
 
-| Option             | Description                                                                                                                                                                 |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`name`** \*      | To be used as the property name when stored and retrieved from the database. [More](/docs/fields/overview#field-names)                                                      |
-| **`label`**        | Text used as a field label in the Admin panel or an object with keys for each language.                                                                                     |
-| **`min`**          | Minimum value accepted. Used in the default `validation` function.                                                                                                          |
-| **`max`**          | Maximum value accepted. Used in the default `validation` function.                                                                                                          |
-| **`hasMany`**      | Makes this field an ordered array of numbers instead of just a single number.                                                                                               |
-| **`minRows`**      | Minimum number of numbers in the numbers array, if `hasMany` is set to true.                                                                                                |
-| **`maxRows`**      | Maximum number of numbers in the numbers array, if `hasMany` is set to true.                                                                                                |
-| **`unique`**       | Enforce that each entry in the Collection has a unique value for this field.                                                                                                |
-| **`index`**        | Build an [index](/docs/database/overview) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
-| **`validate`**     | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                |
-| **`saveToJWT`**    | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                               |
-| **`hooks`**        | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks)                                                                  |
-| **`access`**       | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control)                     |
-| **`hidden`**       | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel.                            |
-| **`defaultValue`** | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values)                                                                        |
-| **`localized`**    | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                             |
-| **`required`**     | Require this field to have a value.                                                                                                                                         |
-| **`admin`**        | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                   |
-| **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                   |
+| Option             | Description                                                                                                                                                                          |
+|--------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **`name`** \*      | To be used as the property name when stored and retrieved from the database. [More](/docs/fields/overview#field-names)                                                               |
+| **`label`**        | Text used as a field label in the Admin panel or an object with keys for each language.                                                                                              |
+| **`min`**          | Minimum value accepted. Used in the default `validation` function.                                                                                                                   |
+| **`max`**          | Maximum value accepted. Used in the default `validation` function.                                                                                                                   |
+| **`hasMany`**      | Makes this field an ordered array of numbers instead of just a single number.                                                                                                        |
+| **`minRows`**      | Minimum number of numbers in the numbers array, if `hasMany` is set to true.                                                                                                         |
+| **`maxRows`**      | Maximum number of numbers in the numbers array, if `hasMany` is set to true.                                                                                                         |
+| **`unique`**       | Enforce that each entry in the Collection has a unique value for this field.                                                                                                         |
+| **`index`**        | Build an [index](/docs/database/overview) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often.          |
+| **`validate`**     | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                         |
+| **`saveToJWT`**    | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                                        |
+| **`hooks`**        | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks)                                                                           |
+| **`access`**       | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control)                              |
+| **`hidden`**       | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel.                                     |
+| **`defaultValue`** | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values)                                                                                 |
+| **`localized`**    | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                                      |
+| **`required`**     | Require this field to have a value.                                                                                                                                                  |
+| **`admin`**        | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                            |
+| **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                            |
 
 _\* An asterisk denotes that a property is required._
 

docs/fields/overview.mdx

@@ -163,19 +163,21 @@ Example:
 
 In addition to each field's base configuration, you can define specific traits and properties for fields that only have effect on how they are rendered in the Admin panel. The following properties are available for all fields within the `admin` property:
 
-| Option            | Description                                                                                                                                                                                                                      |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `condition`       | You can programmatically show / hide fields based on what other fields are doing. [Click here](#conditional-logic) for more info.                                                                                                |
-| `components`      | All field components can be completely and easily swapped out for custom components that you define. [Click here](#custom-components) for more info.                                                                             |
-| `description`     | Helper text to display with the field to provide more information for the editor user. [Click here](#description) for more info.                                                                                                 |
-| `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`           | Attach raw CSS style properties to the root DOM element of a field.                                                                                                                                                              |
-| `className`       | Attach a CSS class name 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.                                                                                                                                                         |
-| `disableBulkEdit` | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents.                                                                                                 |
-| `hidden`          | Setting a field's `hidden` property on its `admin` config will transform it into a `hidden` input type. Its value will still submit with the Admin panel's requests, but the field itself will not be visible to editors.        |
+| Option              | Description                                                                                                                                                                                                                      |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `condition`         | You can programmatically show / hide fields based on what other fields are doing. [Click here](#conditional-logic) for more info.                                                                                                |
+| `components`        | All field components can be completely and easily swapped out for custom components that you define. [Click here](#custom-components) for more info.                                                                             |
+| `description`       | Helper text to display with the field to provide more information for the editor user. [Click here](#description) for more info.                                                                                                 |
+| `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`             | Attach raw CSS style properties to the root DOM element of a field.                                                                                                                                                              |
+| `className`         | Attach a CSS class name 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.                                                                                                                                                         |
+| `disableBulkEdit`   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents.                                                                                                 |
+| `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`            | Setting a field's `hidden` property on its `admin` config will transform it into a `hidden` input type. Its value will still submit with the Admin panel's requests, but the field itself will not be visible to editors.        |
 
 ### Custom components
 

docs/fields/radio.mdx

@@ -36,6 +36,7 @@ keywords: radio, fields, config, configuration, documentation, Content Managemen
 | **`required`**     | Require this field to have a value.                                                                                                                                         |
 | **`admin`**        | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                   |
 | **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                   |
+| **`enumName`**     | Custom enum name for this field when using SQL database adapter ([Postgres](/docs/database/postgres)). Auto-generated from name if not defined.
 
 _\* An asterisk denotes that a property is required._
 

docs/fields/relationship.mdx

@@ -26,28 +26,28 @@ keywords: relationship, fields, config, configuration, documentation, Content Ma
 
 ### Config
 
-| 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 one or many collection `slug`s to be able to assign relationships to.                                                                                               |
-| **`filterOptions`** | A query to filter which options appear in the UI and validate against. [More](#filtering-relationship-options).                                                             |
-| **`hasMany`**       | Boolean when, if set to `true`, allows this field to have many relations instead of only one.                                                                               |
-| **`minRows`**       | A number for the fewest allowed items during validation when a value is present. Used with `hasMany`.                                                                       |
-| **`maxRows`**       | A number for the most allowed items during validation when a value is present. Used with `hasMany`.                                                                         |
-| **`maxDepth`**      | Sets a number limit on iterations of related documents to populate when queried. [Depth](/docs/getting-started/concepts#depth)                                              |
-| **`label`**         | Text used as a field label in the Admin panel or an object with keys for each language.                                                                                     |
-| **`unique`**        | Enforce that each entry in the Collection has a unique value for this field.                                                                                                |
-| **`validate`**      | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                |
-| **`index`**         | Build an [index](/docs/database/overview) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
-| **`saveToJWT`**     | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                               |
-| **`hooks`**         | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks)                                                                  |
-| **`access`**        | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control)                     |
-| **`hidden`**        | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel.                            |
-| **`defaultValue`**  | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values)                                                                        |
-| **`localized`**     | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                             |
-| **`required`**      | Require this field to have a value.                                                                                                                                         |
-| **`admin`**         | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details.                                                    |
-| **`custom`**        | Extension point for adding custom data (e.g. for plugins)                                                                                                                   |
+| 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 one or many collection `slug`s to be able to assign relationships to.                                                                                                  |
+| **`filterOptions`** | A query to filter which options appear in the UI and validate against. [More](#filtering-relationship-options).                                                                |
+| **`hasMany`**       | Boolean when, if set to `true`, allows this field to have many relations instead of only one.                                                                                  |
+| **`minRows`**       | A number for the fewest allowed items during validation when a value is present. Used with `hasMany`.                                                                          |
+| **`maxRows`**       | A number for the most allowed items during validation when a value is present. Used with `hasMany`.                                                                            |
+| **`maxDepth`**      | 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.                                                                                        |
+| **`unique`**        | Enforce that each entry in the Collection has a unique value for this field.                                                                                                   |
+| **`validate`**      | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                   |
+| **`index`**         | Build an [index](/docs/database/overview) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often.    |
+| **`saveToJWT`**     | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                                  |
+| **`hooks`**         | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks)                                                                     |
+| **`access`**        | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control)                        |
+| **`hidden`**        | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel.                               |
+| **`defaultValue`**  | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values)                                                                           |
+| **`localized`**     | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                                |
+| **`required`**      | Require this field to have a value.                                                                                                                                            |
+| **`admin`**         | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details.                                                       |
+| **`custom`**        | Extension point for adding custom data (e.g. for plugins)                                                                                                                      |
 
 _\* An asterisk denotes that a property is required._
 

docs/fields/select.mdx

@@ -38,6 +38,8 @@ keywords: select, multi-select, fields, config, configuration, documentation, Co
 | **`required`**     | Require this field to have a value.                                                                                                                                         |
 | **`admin`**        | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details.                                                    |
 | **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                   |
+| **`enumName`**     | Custom enum name for this field when using SQL database adapter ([Postgres](/docs/database/postgres)). Auto-generated from name if not defined.                               |
+| **`dbName`**       | Custom table name (if `hasMany` set to `true`) for this field when using SQL database adapter ([Postgres](/docs/database/postgres)). Auto-generated from name if not defined. |
 
 _\* An asterisk denotes that a property is required._
 

docs/getting-started/concepts.mdx

@@ -156,6 +156,28 @@ To populate `user.author.department` in it's entirety you could specify `?depth=
 }
 ```
 
+#### Field-level max depth
+
+Fields like relationships or uploads can have a `maxDepth` property that limits the depth of the population for that field. Here are some examples:
+
+Depth: 10
+Current depth when field is accessed: 1
+`maxDepth`: undefined
+
+In this case, the field would be populated to 9 levels of population.
+
+Depth: 10
+Current depth when field is accessed: 0
+`maxDepth`: 2
+
+In this case, the field would be populated to 2 levels of population, despite there being a remaining depth of 8.
+
+Depth: 10
+Current depth when field is accessed: 2
+`maxDepth`: 1
+
+In this case, the field would not be populated, as the current depth (2) has exceeded the `maxDepth` for this field (1).
+
 <Banner type="warning">
   <strong>Note:</strong>
   <br />

docs/graphql/overview.mdx

@@ -42,11 +42,12 @@ export const PublicUser: CollectionConfig = {
 
 **Payload will automatically open up the following queries:**
 
-| Query Name         | Operation           |
-| ------------------ | ------------------- |
-| **`PublicUser`**   | `findByID`          |
-| **`PublicUsers`**  | `find`              |
-| **`mePublicUser`** | `me` auth operation |
+| Query Name              | Operation           |
+| ------------------      | ------------------- |
+| **`PublicUser`**        | `findByID`          |
+| **`PublicUsers`**       | `find`              |
+| **`countPublicUsers`**  | `count`             |
+| **`mePublicUser`**      | `me` auth operation |
 
 **And the following mutations:**
 

docs/hooks/fields.mdx

@@ -221,9 +221,13 @@ user-friendly.
 
 ### beforeDuplicate
 
-The `beforeDuplicate` field hook is only called when duplicating a document. It may be used when documents having the
-exact same properties may cause issue. This gives you a way to avoid duplicate names on `unique`, `required` fields or
-to unset values by returning `null`. This is called immediately after `defaultValue` and before validation occurs.
+The `beforeDuplicate` field hook is called on each locale (when using localization), when duplicating a document. It may be used when documents having the
+exact same properties may cause issue. This gives you a way to avoid duplicate names on `unique`, `required` fields or when external systems expect non-repeating values on documents.
+
+This hook gets called after `beforeChange` hooks are called and before the document is saved to the database.
+
+By Default, unique and required text fields Payload will append "- Copy" to the original document value. The default is not added if your field has its own, you must return non-unique values from your beforeDuplicate hook to avoid errors or enable the `disableDuplicate` option on the collection.
+Here is an example of a number field with a hook that increments the number to avoid unique constraint errors when duplicating a document:
 
 ```ts
 import { Field } from 'payload/types'

docs/live-preview/client.mdx

@@ -0,0 +1,284 @@
+---
+title: Client-side Live Preview
+label: Client-side
+order: 40
+desc: Learn how to implement Live Preview in your client-side front-end application.
+keywords: live preview, frontend, react, next.js, vue, nuxt.js, svelte, hook, useLivePreview
+---
+
+<Banner type="info">
+  If your front-end application supports Server Components like the [Next.js App Router](https://nextjs.org/docs/app), etc., we suggest setting up [server-side Live Preview](./server).
+</Banner>
+
+While using Live Preview, the Admin panel emits a new `window.postMessage` event every time your document has changed. Your front-end application can listen for these events and re-render accordingly.
+
+If your front-end application is built with [React](#react) or [Vue](#vue), use the `useLivePreview` hooks that Payload provides. In the future, all other major frameworks like Svelte will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own hook](#building-your-own-hook) for more information.
+
+By default, all hooks accept the following args:
+
+| Path               | Description                                                                            |
+| ------------------ | -------------------------------------------------------------------------------------- |
+| **`serverURL`** \* | The URL of your Payload server.                                                        |
+| **`initialData`**  | The initial data of the document. The live data will be merged in as changes are made. |
+| **`depth`**        | The depth of the relationships to fetch. Defaults to `0`.                              |
+| **`apiRoute`**     | The path of your API route as defined in `routes.api`. Defaults to `/api`.             |
+
+_\* An asterisk denotes that a property is required._
+
+And return the following values:
+
+| Path            | Description                                                      |
+| --------------- | ---------------------------------------------------------------- |
+| **`data`**      | The live data of the document, merged with the initial data.     |
+| **`isLoading`** | A boolean that indicates whether or not the document is loading. |
+
+<Banner type="info">
+  If your front-end is tightly coupled to required fields, you should ensure that your UI does not
+  break when these fields are removed. For example, if you are rendering something like
+  `data.relatedPosts[0].title`, your page will break once you remove the first related post. To get
+  around this, use conditional logic, optional chaining, or default values in your UI where needed.
+  For example, `data?.relatedPosts?.[0]?.title`.
+</Banner>
+
+<Banner type="info">
+  It is important that the `depth` argument matches exactly with the depth of your initial page request. The depth property is used to populated relationships and uploads beyond their IDs. See [Depth](../getting-started/concepts#depth) for more information.
+</Banner>
+
+### React
+
+If your front-end application is built with client-side [React](https://react.dev) like [Next.js Pages Router](https://nextjs.org/docs/pages), you can use the `useLivePreview` hook that Payload provides.
+
+First, install the `@payloadcms/live-preview-react` package:
+
+```bash
+npm install @payloadcms/live-preview-react
+```
+
+Then, use the `useLivePreview` hook in your React component:
+
+```tsx
+'use client'
+import { useLivePreview } from '@payloadcms/live-preview-react'
+import { Page as PageType } from '@/payload-types'
+
+// Fetch the page in a server component, pass it to the client component, then thread it through the hook
+// The hook will take over from there and keep the preview in sync with the changes you make
+// The `data` property will contain the live data of the document
+export const PageClient: React.FC<{
+  page: {
+    title: string
+  }
+}> = ({ page: initialPage }) => {
+  const { data } = useLivePreview<PageType>({
+    initialData: initialPage,
+    serverURL: PAYLOAD_SERVER_URL,
+    depth: 2,
+  })
+
+  return <h1>{data.title}</h1>
+}
+```
+
+### Vue
+
+If your front-end application is built with [Vue 3](https://vuejs.org) or [Nuxt 3](https://nuxt.js), you can use the `useLivePreview` composable that Payload provides.
+
+First, install the `@payloadcms/live-preview-vue` package:
+
+```bash
+npm install @payloadcms/live-preview-vue
+```
+
+Then, use the `useLivePreview` hook in your Vue component:
+
+```vue
+<script setup lang="ts">
+import type { PageData } from '~/types';
+import { defineProps } from 'vue';
+import { useLivePreview } from '@payloadcms/live-preview-vue';
+
+// Fetch the initial data on the parent component or using async state
+const props = defineProps<{ initialData: PageData }>();
+
+// The hook will take over from here and keep the preview in sync with the changes you make.
+// The `data` property will contain the live data of the document only when viewed from the Preview view of the Admin UI.
+const { data } = useLivePreview<PageData>({
+  initialData: props.initialData,
+  serverURL: "<PAYLOAD_SERVER_URL>",
+  depth: 2,
+});
+</script>
+
+<template>
+  <h1>{{ data.title }}</h1>
+</template>
+```
+
+### Building your own hook
+
+No matter what front-end framework you are using, you can build your own hook using the same underlying tooling that Payload provides.
+
+First, install the base `@payloadcms/live-preview` package:
+
+```bash
+npm install @payloadcms/live-preview
+```
+
+This package provides the following functions:
+
+| Path                     | Description                                                                                                                |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| **`subscribe`**          | Subscribes to the Admin panel's `window.postMessage` events and calls the provided callback function.                      |
+| **`unsubscribe`**        | Unsubscribes from the Admin panel's `window.postMessage` events.                                                           |
+| **`ready`**              | Sends a `window.postMessage` event to the Admin panel to indicate that the front-end is ready to receive messages.         |
+| **`isLivePreviewEvent`** | Checks if a `MessageEvent` originates from the Admin panel and is a Live Preview event, i.e. debounced form state.         |
+
+The `subscribe` function takes the following args:
+
+| Path               | Description                                                                                 |
+| ------------------ | ------------------------------------------------------------------------------------------- |
+| **`callback`** \*  | A callback function that is called with `data` every time a change is made to the document. |
+| **`serverURL`** \* | The URL of your Payload server.                                                             |
+| **`initialData`**  | The initial data of the document. The live data will be merged in as changes are made.      |
+| **`depth`**        | The depth of the relationships to fetch. Defaults to `0`.                                   |
+
+With these functions, you can build your own hook using your front-end framework of choice:
+
+```tsx
+import { subscribe, unsubscribe } from '@payloadcms/live-preview'
+
+// To build your own hook, subscribe to Live Preview events using the `subscribe` function
+// It handles everything from:
+// 1. Listening to `window.postMessage` events
+// 2. Merging initial data with active form state
+// 3. Populating relationships and uploads
+// 4. Calling the `onChange` callback with the result
+// Your hook should also:
+// 1. Tell the Admin panel when it is ready to receive messages
+// 2. Handle the results of the `onChange` callback to update the UI
+// 3. Unsubscribe from the `window.postMessage` events when it unmounts
+```
+
+Here is an example of what the same `useLivePreview` React hook from above looks like under the hood:
+
+```tsx
+import { subscribe, unsubscribe, ready } from '@payloadcms/live-preview'
+import { useCallback, useEffect, useState, useRef } from 'react'
+
+export const useLivePreview = <T extends any>(props: {
+  depth?: number
+  initialData: T
+  serverURL: string
+}): {
+  data: T
+  isLoading: boolean
+} => {
+  const { depth = 0, initialData, serverURL } = props
+  const [data, setData] = useState<T>(initialData)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const hasSentReadyMessage = useRef<boolean>(false)
+
+  const onChange = useCallback((mergedData) => {
+    // When a change is made, the `onChange` callback will be called with the merged data
+    // Set this merged data into state so that React will re-render the UI
+    setData(mergedData)
+    setIsLoading(false)
+  }, [])
+
+  useEffect(() => {
+    // Listen for `window.postMessage` events from the Admin panel
+    // When a change is made, the `onChange` callback will be called with the merged data
+    const subscription = subscribe({
+      callback: onChange,
+      depth,
+      initialData,
+      serverURL,
+    })
+
+    // Once subscribed, send a `ready` message back up to the Admin panel
+    // This will indicate that the front-end is ready to receive messages
+    if (!hasSentReadyMessage.current) {
+      hasSentReadyMessage.current = true
+
+      ready({
+        serverURL,
+      })
+    }
+
+    // When the component unmounts, unsubscribe from the `window.postMessage` events
+    return () => {
+      unsubscribe(subscription)
+    }
+  }, [serverURL, onChange, depth, initialData])
+
+  return {
+    data,
+    isLoading,
+  }
+}
+```
+
+<Banner type="info">
+  When building your own hook, ensure that the args and return values are consistent with the ones
+  listed at the top of this document. This will ensure that all hooks follow the same API.
+</Banner>
+
+## Example
+
+For a working demonstration of this, check out the official [Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload). There you will find examples of various front-end frameworks and how to integrate each one of them, including:
+
+- [Next.js App Router](https://github.com/payloadcms/payload/tree/main/examples/live-preview/next-app)
+- [Next.js Pages Router](https://github.com/payloadcms/payload/tree/main/examples/live-preview/next-pages)
+
+## Troubleshooting
+
+#### Relationships and/or uploads are not populating
+
+If you are using relationships or uploads in your front-end application, and your front-end application runs on a different domain than your Payload server, you may need to configure [CORS](../configuration/overview) to allow requests to be made between the two domains. This includes sites that are running on a different port or subdomain. Similarly, if you are protecting resources behind user authentication, you may also need to configure [CSRF](../authentication/overview#csrf-protection) to allow cookies to be sent between the two domains. For example:
+
+```ts
+// payload.config.ts
+{
+  // ...
+  // If your site is running on a different domain than your Payload server,
+  // This will allows requests to be made between the two domains
+  cors: {
+    [
+      'http://localhost:3001' // Your front-end application
+    ],
+  },
+  // If you are protecting resources behind user authentication,
+  // This will allow cookies to be sent between the two domains
+  csrf: {
+    [
+      'http://localhost:3001' // Your front-end application
+    ],
+  },
+}
+```
+
+#### Relationships and/or uploads disappear after editing a document
+
+It is possible that either you are setting an improper [`depth`](../getting-started/concepts#depth) in your initial request and/or your `useLivePreview` hook, or they're mismatched. Ensure that the `depth` parameter is set to the correct value, and that it matches exactly in both places. For example:
+
+```tsx
+// Your initial request
+const { docs } = await payload.find({
+  collection: 'pages',
+  depth: 1, // Ensure this is set to the proper depth for your application
+  where: {
+    slug: {
+      equals: 'home',
+    },
+  },
+})
+```
+
+```tsx
+// Your hook
+const { data } = useLivePreview<PageType>({
+  initialData: initialPage,
+  serverURL: PAYLOAD_SERVER_URL,
+  depth: 1, // Ensure this matches the depth of your initial request
+})
+```

docs/live-preview/frontend.mdx

@@ -1,246 +1,16 @@
 ---
-title: Implementing Live Preview in your app
-label: Frontend Implementation
+title: Implementing Live Preview in your frontend
+label: Frontend
 order: 20
 desc: Learn how to implement Live Preview in your front-end application.
 keywords: live preview, frontend, react, next.js, vue, nuxt.js, svelte, hook, useLivePreview
 ---
 
-While using Live Preview, the Admin panel emits a new `window.postMessage` event every time a change is made to the document. Your front-end application can listen for these events and re-render accordingly.
+There are two ways to use Live Preview in your own application depending on whether your front-end framework supports server components:
 
-Wiring your front-end into Live Preview is easy. If your front-end application is built with React or Next.js, use the [`useLivePreview`](#react) React hook that Payload provides. In the future, all other major frameworks like Vue, Svelte, etc will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own hook](#building-your-own-hook) for more information.
-
-By default, all hooks accept the following args:
-
-| Path               | Description                                                                            |
-| ------------------ | -------------------------------------------------------------------------------------- |
-| **`serverURL`** \* | The URL of your Payload server.                                                        |
-| **`initialData`**  | The initial data of the document. The live data will be merged in as changes are made. |
-| **`depth`**        | The depth of the relationships to fetch. Defaults to `0`.                              |
-| **`apiRoute`**     | The path of your API route as defined in `routes.api`. Defaults to `/api`.             |
-
-_\* An asterisk denotes that a property is required._
-
-And return the following values:
-
-| Path            | Description                                                      |
-| --------------- | ---------------------------------------------------------------- |
-| **`data`**      | The live data of the document, merged with the initial data.     |
-| **`isLoading`** | A boolean that indicates whether or not the document is loading. |
+- [Server-side Live Preview (suggested)](./server)
+- [Client-side Live Preview](./client)
 
 <Banner type="info">
-  If your front-end is tightly coupled to required fields, you should ensure that your UI does not
-  break when these fields are removed. For example, if you are rendering something like
-  `data.relatedPosts[0].title`, your page will break once you remove the first related post. To get
-  around this, use conditional logic, optional chaining, or default values in your UI where needed.
-  For example, `data?.relatedPosts?.[0]?.title`.
+  We suggest using server-side Live Preview if your framework supports it, it is both simpler to setup and more performant to run than the client-side alternative.
 </Banner>
-
-### React
-
-If your front-end application is built with React or Next.js, you can use the `useLivePreview` hook that Payload provides.
-
-First, install the `@payloadcms/live-preview-react` package:
-
-```bash
-npm install @payloadcms/live-preview-react
-```
-
-Then, use the `useLivePreview` hook in your React component:
-
-```tsx
-'use client'
-import { useLivePreview } from '@payloadcms/live-preview-react'
-import { Page as PageType } from '@/payload-types'
-
-// Fetch the page in a server component, pass it to the client component, then thread it through the hook
-// The hook will take over from there and keep the preview in sync with the changes you make
-// The `data` property will contain the live data of the document
-export const PageClient: React.FC<{
-  page: {
-    title: string
-  }
-}> = ({ page: initialPage }) => {
-  const { data } = useLivePreview<PageType>({
-    initialData: initialPage,
-    serverURL: PAYLOAD_SERVER_URL,
-    depth: 2,
-  })
-
-  return <h1>{data.title}</h1>
-}
-```
-
-<Banner type="info">
-  If is important that the `depth` argument matches exactly with the depth of your initial page
-  request. The depth property is used to populated relationships and uploads beyond their IDs. See
-  [Depth](../getting-started/concepts#depth) for more information.
-</Banner>
-
-## Building your own hook
-
-No matter what front-end framework you are using, you can build your own hook using the same underlying tooling that Payload provides.
-
-First, install the base `@payloadcms/live-preview` package:
-
-```bash
-npm install @payloadcms/live-preview
-```
-
-This package provides the following functions:
-
-| Path              | Description                                                                                                        |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------ |
-| **`subscribe`**   | Subscribes to the Admin panel's `window.postMessage` events and calls the provided callback function.              |
-| **`unsubscribe`** | Unsubscribes from the Admin panel's `window.postMessage` events.                                                   |
-| **`ready`**       | Sends a `window.postMessage` event to the Admin panel to indicate that the front-end is ready to receive messages. |
-
-The `subscribe` function takes the following args:
-
-| Path               | Description                                                                                 |
-| ------------------ | ------------------------------------------------------------------------------------------- |
-| **`callback`** \*  | A callback function that is called with `data` every time a change is made to the document. |
-| **`serverURL`** \* | The URL of your Payload server.                                                             |
-| **`initialData`**  | The initial data of the document. The live data will be merged in as changes are made.      |
-| **`depth`**        | The depth of the relationships to fetch. Defaults to `0`.                                   |
-
-With these functions, you can build your own hook using your front-end framework of choice:
-
-```tsx
-import { subscribe, unsubscribe } from '@payloadcms/live-preview'
-
-// To build your own hook, subscribe to Live Preview events using the`subscribe` function
-// It handles everything from:
-// 1. Listening to `window.postMessage` events
-// 2. Merging initial data with active form state
-// 3. Populating relationships and uploads
-// 4. Calling the `onChange` callback with the result
-// Your hook should also:
-// 1. Tell the Admin panel when it is ready to receive messages
-// 2. Handle the results of the `onChange` callback to update the UI
-// 3. Unsubscribe from the `window.postMessage` events when it unmounts
-```
-
-Here is an example of what the same `useLivePreview` React hook from above looks like under the hood:
-
-```tsx
-import { subscribe, unsubscribe, ready } from '@payloadcms/live-preview'
-import { useCallback, useEffect, useState, useRef } from 'react'
-
-export const useLivePreview = <T extends any>(props: {
-  depth?: number
-  initialData: T
-  serverURL: string
-}): {
-  data: T
-  isLoading: boolean
-} => {
-  const { depth = 0, initialData, serverURL } = props
-  const [data, setData] = useState<T>(initialData)
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-  const hasSentReadyMessage = useRef<boolean>(false)
-
-  const onChange = useCallback((mergedData) => {
-    // When a change is made, the `onChange` callback will be called with the merged data
-    // Set this merged data into state so that React will re-render the UI
-    setData(mergedData)
-    setIsLoading(false)
-  }, [])
-
-  useEffect(() => {
-    // Listen for `window.postMessage` events from the Admin panel
-    // When a change is made, the `onChange` callback will be called with the merged data
-    const subscription = subscribe({
-      callback: onChange,
-      depth,
-      initialData,
-      serverURL,
-    })
-
-    // Once subscribed, send a `ready` message back up to the Admin panel
-    // This will indicate that the front-end is ready to receive messages
-    if (!hasSentReadyMessage.current) {
-      hasSentReadyMessage.current = true
-
-      ready({
-        serverURL,
-      })
-    }
-
-    // When the component unmounts, unsubscribe from the `window.postMessage` events
-    return () => {
-      unsubscribe(subscription)
-    }
-  }, [serverURL, onChange, depth, initialData])
-
-  return {
-    data,
-    isLoading,
-  }
-}
-```
-
-<Banner type="info">
-  When building your own hook, ensure that the args and return values are consistent with the ones
-  listed at the top of this document. This will ensure that all hooks follow the same API.
-</Banner>
-
-## Example
-
-For a working demonstration of this, check out the official [Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload). There you will find examples of various front-end frameworks and how to integrate each one of them, including:
-
-- [Next.js App Router](https://github.com/payloadcms/payload/tree/main/examples/live-preview/next-app)
-- [Next.js Pages Router](https://github.com/payloadcms/payload/tree/main/examples/live-preview/next-pages)
-
-## Troubleshooting
-
-#### Relationships and/or uploads are not populating
-
-If you are using relationships or uploads in your front-end application, and your front-end application runs on a different domain than your Payload server, you may need to configure [CORS](../configuration/overview) to allow requests to be made between the two domains. This includes sites that are running on a different port or subdomain. Similarly, if you are protecting resources behind user authentication, you may also need to configure [CSRF](../authentication/overview#csrf-protection) to allow cookies to be sent between the two domains. For example:
-
-```ts
-// payload.config.ts
-{
-  // ...
-  // If your site is running on a different domain than your Payload server,
-  // This will allows requests to be made between the two domains
-  cors: {
-    [
-      'http://localhost:3001' // Your front-end application
-    ],
-  },
-  // If you are protecting resources behind user authentication,
-  // This will allow cookies to be sent between the two domains
-  csrf: {
-    [
-      'http://localhost:3001' // Your front-end application
-    ],
-  },
-}
-```
-
-#### Relationships and/or uploads disappear after editing a document
-
-It is possible that either you are setting an improper [`depth`](../getting-started/concepts#depth) in your initial request and/or your `useLivePreview` hook, or they're mismatched. Ensure that the `depth` parameter is set to the correct value, and that it matches exactly in both places. For example:
-
-```tsx
-// Your initial request
-const { docs } = await payload.find({
-  collection: 'pages',
-  depth: 1, // Ensure this is set to the proper depth for your application
-  where: {
-    slug: {
-      equals: 'home',
-    },
-  },
-})
-```
-
-```tsx
-// Your hook
-const { data } = useLivePreview<PageType>({
-  initialData: initialPage,
-  serverURL: PAYLOAD_SERVER_URL,
-  depth: 1, // Ensure this matches the depth of your initial request
-})
-```

docs/live-preview/overview.mdx

@@ -8,7 +8,7 @@ keywords: live preview, preview, live, iframe, iframe preview, visual editing, d
 
 **With Live Preview you can render your front-end application directly within the Admin panel. As you type, your changes take effect in real-time. No need to save a draft or publish your changes.**
 
-Live Preview works by rendering an iframe on the page that loads your front-end application. The Admin panel communicates with your app through [`window.postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) events. These events are emitted every time a change is made to the document. Your app then listens for these events and re-renders itself with the data it receives.
+Live Preview works by rendering an iframe on the page that loads your front-end application. The Admin panel communicates with your app through [`window.postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) events. These events are emitted every time a change is made to the document. Your app then listens for these events and re-renders itself with the data it receives. Live Preview works in both server-side as well as client-side environments. See [Front-End](./frontend) for more details.
 
 {/* IMAGE OF LIVE PREVIEW HERE */}
 

docs/live-preview/server.mdx

@@ -0,0 +1,175 @@
+---
+title: Server-side Live Preview
+label: Server-side
+order: 30
+desc: Learn how to implement Live Preview in your server-side front-end application.
+keywords: live preview, frontend, react, next.js, vue, nuxt.js, svelte, hook, useLivePreview
+---
+
+<Banner type="info">
+  Server-side Live Preview is only for front-end frameworks that support the concept of Server Components, i.e. [React Server Components](https://react.dev/reference/rsc/server-components). If your front-end application is built with a client-side framework like the [Next.js Pages Router](https://nextjs.org/docs/pages), [React Router](https://reactrouter.com), [Vue 3](https://vuejs.org), etc., see [client-side Live Preview](./client).
+</Banner>
+
+Server-side Live Preview works by making a roundtrip to the server every time your document is saved, i.e. draft save, autosave, or publish. While using Live Preview, the Admin panel emits a new `window.postMessage` event which your front-end application can use to invoke this process. In Next.js, this means simply calling `router.refresh()` which will hydrate the HTML using new data straight from the [Local API](../local-api/overview).
+
+<Banner type="warning">
+  It is recommended that you enable [Autosave](../versions/autosave) alongside Live Preview to make the experience feel more responsive.
+</Banner>
+
+If your front-end application is built with [React](#react), you can use the `RefreshRouteOnChange` function that Payload provides. In the future, all other major frameworks like Vue and Svelte will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own router refresh component](#building-your-own-router-refresh-component) for more information.
+
+### React
+
+If your front-end application is built with [React](https://react.dev) or [Next.js](https://nextjs.org), you can use the `RefreshRouteOnSave` component that Payload provides.
+
+First, install the `@payloadcms/live-preview-react` package:
+
+```bash
+npm install @payloadcms/live-preview-react
+```
+
+Then, render `RefreshRouteOnSave` anywhere in your `page.tsx`. Here's an example:
+
+`page.tsx`:
+
+```tsx
+import { RefreshRouteOnSave } from './RefreshRouteOnSave.tsx'
+import { getPayloadHMR } from '@payloadcms/next'
+import config from '../payload.config'
+
+export default async function Page() {
+  const payload = await getPayloadHMR({ config })
+
+  const page = await payload.find({
+    collection: 'pages',
+    draft: true
+  })
+
+  return (
+    <Fragment>
+      <RefreshRouteOnSave />
+      <h1>{page.title}</h1>
+    </Fragment>
+  )
+}
+```
+
+`RefreshRouteOnSave.tsx`:
+
+```tsx
+'use client'
+import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
+import { useRouter } from 'next/navigation.js'
+import React from 'react'
+
+export const RefreshRouteOnSave: React.FC = () => {
+  const router = useRouter()
+  return <PayloadLivePreview refresh={router.refresh} serverURL={process.env.PAYLOAD_SERVER_URL} />
+}
+```
+
+## Building your own router refresh component
+
+No matter what front-end framework you are using, you can build your own component using the same underlying tooling that Payload provides.
+
+First, install the base `@payloadcms/live-preview` package:
+
+```bash
+npm install @payloadcms/live-preview
+```
+
+This package provides the following functions:
+
+| Path                  | Description                                                                                                                                |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`ready`**           | Sends a `window.postMessage` event to the Admin panel to indicate that the front-end is ready to receive messages.                         |
+| **`isDocumentEvent`** | Checks if a `MessageEvent` originates from the Admin panel and is a document-level event, i.e. draft save, autosave, publish, etc.         |
+
+With these functions, you can build your own hook using your front-end framework of choice:
+
+```tsx
+import { ready, isDocumentEvent } from '@payloadcms/live-preview'
+
+// To build your own component:
+// 1. Listen for document-level `window.postMessage` events sent from the Admin panel
+// 2. Tell the Admin panel when it is ready to receive messages
+// 3. Refresh the route every time a new document-level event is received
+// 4. Unsubscribe from the `window.postMessage` events when it unmounts
+```
+
+Here is an example of what the same `RefreshRouteOnSave` React component from above looks like under the hood:
+
+```tsx
+'use client'
+
+import type React from 'react'
+
+import { isDocumentEvent, ready } from '@payloadcms/live-preview'
+import { useCallback, useEffect, useRef } from 'react'
+
+export const RefreshRouteOnSave: React.FC<{
+  apiRoute?: string
+  depth?: number
+  refresh: () => void
+  serverURL: string
+}> = (props) => {
+  const { apiRoute, depth, refresh, serverURL } = props
+  const hasSentReadyMessage = useRef<boolean>(false)
+
+  const onMessage = useCallback(
+    (event: MessageEvent) => {
+      if (isDocumentEvent(event, serverURL)) {
+        if (typeof refresh === 'function') {
+          refresh()
+        }
+      }
+    },
+    [refresh, serverURL],
+  )
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('message', onMessage)
+    }
+
+    if (!hasSentReadyMessage.current) {
+      hasSentReadyMessage.current = true
+
+      ready({
+        serverURL,
+      })
+    }
+
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('message', onMessage)
+      }
+    }
+  }, [serverURL, onMessage, depth, apiRoute])
+
+  return null
+}
+```
+
+## Example
+
+{/* TODO: add example once beta has been release and an example can be created */}
+
+## Troubleshooting
+
+#### Updates do not appear as fast as client-side Live Preview
+
+If you are noticing that updates feel less snappy than client-side Live Preview (i.e. the `useLivePreview` hook), this is because of how the two differ in how they work—instead of emitting events against form state as you type, server-side Live Preview refreshes the route after a new document is saved. You can use autosave to mimic this effect. Try decreasing the value of `versions.autoSave.interval` to make the experience feel more responsive:
+
+```ts
+// collection.ts
+{
+   versions: {
+    drafts: {
+      autosave: {
+        interval: 375,
+      },
+    },
+  },
+}
+```

docs/local-api/overview.mdx

@@ -164,6 +164,22 @@ const result = await payload.findByID({
 })
 ```
 
+#### Count
+
+```js
+// Result will be an object with:
+// {
+//   totalDocs: 10, // count of the documents satisfies query
+// }
+const result = await payload.count({
+  collection: 'posts', // required
+  locale: 'en',
+  where: {}, // pass a `where` query here
+  user: dummyUser,
+  overrideAccess: false,
+})
+```
+
 #### Update by ID
 
 ```js

docs/plugins/stripe.mdx

@@ -85,7 +85,7 @@ The following custom endpoints are automatically opened for you:
 
 ##### Stripe REST Proxy
 
-If `rest` is true, proxies the [Stripe REST API](https://stripe.com/docs/api) behind [Payload access control](https://payloadcms.com/docs/access-control/overview) and returns the result. If you need to proxy the API server-side, use the [stripeProxy](#node) function.
+If `rest` is true, proxies the [Stripe REST API](https://stripe.com/docs/api) behind [Payload access control](https://payloadcms.com/docs/access-control/overview) and returns the result. This flag should only be used for local development, see the security note below for more information.
 
 ```ts
 const res = await fetch(`/api/stripe/rest`, {
@@ -106,6 +106,8 @@ const res = await fetch(`/api/stripe/rest`, {
 })
 ```
 
+If you need to proxy the API server-side, use the [stripeProxy](#node) function.
+
 <Banner type="info">
   <strong>Note:</strong>
   <br />
@@ -113,6 +115,12 @@ const res = await fetch(`/api/stripe/rest`, {
   config.
 </Banner>
 
+<Banner type="warning">
+  <strong>Warning:</strong>
+  <br />
+  Opening the REST proxy endpoint in production is a potential security risk. Authenticated users will have open access to the Stripe REST API. In production, open your own endpoint and use the [stripeProxy](#node) function to proxy the Stripe API server-side.
+</Banner>
+
 ## Webhooks
 
 [Stripe webhooks](https://stripe.com/docs/webhooks) are used to sync from Stripe to Payload. Webhooks listen for events on your Stripe account so you can trigger reactions to them. Follow the steps below to enable webhooks.

docs/rest-api/overview.mdx

@@ -90,6 +90,19 @@ Note: Collection slugs must be formatted in kebab-case
         },
       },
     },
+    {
+      operation: "Count",
+      method: "GET",
+      path: "/api/{collection-slug}/count",
+      description: "Count the documents",
+      example: {
+        slug: "count",
+        req: true,
+        res: {
+         totalDocs: 10
+        },
+      },
+    },
     {
       operation: "Create",
       method: "POST",

docs/rich-text/lexical.mdx

@@ -138,7 +138,7 @@ import { CallToAction } from '../blocks/CallToAction'
 Here's an overview of all the included features:
 
 | Feature Name                   | Included by default | Description                                                                                                                                                                            |
-| ------------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|--------------------------------|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **`BoldTextFeature`**          | Yes                 | Handles the bold text format                                                                                                                                                           |
 | **`ItalicTextFeature`**        | Yes                 | Handles the italic text format                                                                                                                                                         |
 | **`UnderlineTextFeature`**     | Yes                 | Handles the underline text format                                                                                                                                                      |
@@ -157,7 +157,8 @@ Here's an overview of all the included features:
 | **`RelationshipFeature`**      | Yes                 | Allows you to create block-level (not inline) relationships to other documents                                                                                                         |
 | **`BlockQuoteFeature`**        | Yes                 | Allows you to create block-level quotes                                                                                                                                                |
 | **`UploadFeature`**            | Yes                 | Allows you to create block-level upload nodes - this supports all kinds of uploads, not just images                                                                                    |
-| **`BlocksFeature`**            | No                  | Allows you to use Payload's [Blocks Field](/docs/fields/blocks) directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field. |
+| **`HorizontalRuleFeature`**    | Yes                 | Horizontal rules / separators. Basically displays an <hr> element                                                                                                                      |
+| **`BlocksFeature`**            | No                  | Allows you to use Payload's [Blocks Field](/docs/fields/blocks) directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field.                 |
 | **`TreeViewFeature`**          | No                  | Adds a debug box under the editor, which allows you to see the current editor state live, the dom, as well as time travel. Very useful for debugging                                   |
 
 ## Creating your own, custom Feature
@@ -173,7 +174,7 @@ Next, take a look at the [features we've already built](https://github.com/paylo
 Lexical saves data in JSON, but can also generate its HTML representation via two main methods:
 
 1. **Outputting HTML from the Collection:** Create a new field in your collection to convert saved JSON content to HTML. Payload generates and outputs the HTML for use in your frontend.
-2. **Generating HTML on the Frontend:** Convert JSON to HTML on-demand, either in your frontend or elsewhere.
+2. **Generating HTML on any server** Convert JSON to HTML on-demand on the server.
 
 The editor comes with built-in HTML serializers, simplifying the process of converting JSON to HTML.
 
@@ -195,7 +196,8 @@ const Pages: CollectionConfig = {
       editor: lexicalEditor({
         features: ({ defaultFeatures }) => [
           ...defaultFeatures,
-          // The HTMLConverter Feature is the feature which manages the HTML serializers. If you do not pass any arguments to it, it will use the default serializers.
+          // The HTMLConverter Feature is the feature which manages the HTML serializers.
+          // If you do not pass any arguments to it, it will use the default serializers.
           HTMLConverterFeature({}),
         ],
       }),
@@ -207,7 +209,7 @@ const Pages: CollectionConfig = {
 
 The `lexicalHTML()` function creates a new field that automatically converts the referenced lexical richText field into HTML through an afterRead hook.
 
-#### Generating HTML in the Frontend:
+#### Generating HTML anywhere on the server:
 
 If you wish to convert JSON to HTML ad-hoc, use this code snippet:
 
@@ -234,6 +236,19 @@ This method employs `convertLexicalToHTML` from `@payloadcms/richtext-lexical`,
 
 Because every `Feature` is able to provide html converters, and because the `htmlFeature` can modify those or provide their own, we need to consolidate them with the default html Converters using the `consolidateHTMLConverters` function.
 
+#### CSS
+
+Payload's lexical HTML converter does not generate CSS for you, but it does add classes to the generated HTML. You can use these classes to style the HTML in your frontend.
+
+Here is some "base" CSS you can use to ensure that nested lists render correctly:
+
+```css
+/* Base CSS for Lexical HTML */
+.nestedListItem, .list-check {
+  list-style-type: none;
+}
+```
+
 #### Creating your own HTML Converter
 
 HTML Converters are typed as `HTMLConverter`, which contains the node type it should handle, and a function that accepts the serialized node from the lexical editor, and outputs the HTML string. Here's the HTML Converter of the Upload node as an example:

docs/rich-text/slate.mdx

@@ -167,7 +167,9 @@ Specifying custom `Type`s let you extend your custom elements by adding addition
 `collections/ExampleCollection.ts`
 
 ```ts
-import { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload/types'
+
+import { slateEditor } from '@payloadcms/richtext-slate'
 
 export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
@@ -181,57 +183,59 @@ export const ExampleCollection: CollectionConfig = {
         },
       ],
       required: true,
-      admin: {
-        elements: [
-          'h2',
-          'h3',
-          'h4',
-          'link',
-          'blockquote',
-          {
-            name: 'cta',
-            Button: CustomCallToActionButton,
-            Element: CustomCallToActionElement,
-            plugins: [
-              // any plugins that are required by this element go here
-            ],
-          },
-        ],
-        leaves: [
-          'bold',
-          'italic',
-          {
-            name: 'highlight',
-            Button: CustomHighlightButton,
-            Leaf: CustomHighlightLeaf,
-            plugins: [
-              // any plugins that are required by this leaf go here
-            ],
-          },
-        ],
-        link: {
-          // Inject your own fields into the Link element
-          fields: [
+      editor: slateEditor({
+        admin: {
+          elements: [
+            'h2',
+            'h3',
+            'h4',
+            'link',
+            'blockquote',
             {
-              name: 'rel',
-              label: 'Rel Attribute',
-              type: 'select',
-              hasMany: true,
-              options: ['noopener', 'noreferrer', 'nofollow'],
-            },
-          ],
-        },
-        upload: {
-          collections: {
-            media: {
-              fields: [
-                // any fields that you would like to save
-                // on an upload element in the `media` collection
+              name: 'cta',
+              Button: CustomCallToActionButton,
+              Element: CustomCallToActionElement,
+              plugins: [
+                // any plugins that are required by this element go here
               ],
             },
+          ],
+          leaves: [
+            'bold',
+            'italic',
+            {
+              name: 'highlight',
+              Button: CustomHighlightButton,
+              Leaf: CustomHighlightLeaf,
+              plugins: [
+                // any plugins that are required by this leaf go here
+              ],
+            },
+          ],
+          link: {
+            // Inject your own fields into the Link element
+            fields: [
+              {
+                name: 'rel',
+                label: 'Rel Attribute',
+                type: 'select',
+                hasMany: true,
+                options: ['noopener', 'noreferrer', 'nofollow'],
+              },
+            ],
+          },
+          upload: {
+            collections: {
+              media: {
+                fields: [
+                  // any fields that you would like to save
+                  // on an upload element in the `media` collection
+                ],
+              },
+            },
           },
         },
-      },
+      }),
     },
   ],
 }

docs/upload/overview.mdx

@@ -40,21 +40,21 @@ Every Payload Collection can opt-in to supporting Uploads by specifying the `upl
 
 ### Collection Upload Options
 
-| Option                      | Description                                                                                                                                                                                                      |
-| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`staticURL`** \*          | The URL path to use to access your uploads. Relative path like `/media` will be served by payload. Full path like `https://example.com/media` needs to be served by another web server.                          |
-| **`staticDir`** \*          | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config.                                                                            |
-| **`adminThumbnail`**        | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                                          |
-| **`crop`**                  | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                                               |
-| **`disableLocalStorage`**   | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                                                      |
-| **`focalPoint`**            | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) |
-| **`formatOptions`**         | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                                          |
-| **`handlers`**              | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                                             |
-| **`imageSizes`**            | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                                               |
-| **`mimeTypes`**             | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                                         |
-| **`staticOptions`**         | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)                                                                  |
-| **`resizeOptions`**         | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                  |
-| **`filesRequiredOnCreate`** | Mandate file data on creation, default is true.                                                                                                                                                                  |
+| Option                         | Description                                                                                                                                                                                                      |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`staticURL`** \*             | The URL path to use to access your uploads. Relative path like `/media` will be served by payload. Full path like `https://example.com/media` needs to be served by another web server.                          |
+| **`staticDir`** \*             | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config.                                                                            |
+| **`adminThumbnail`**           | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                                          |
+| **`crop`**                     | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                                               |
+| **`disableLocalStorage`**      | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                                                      |
+| **`externalFileHeaderFilter`** | Accepts existing headers and can filter/modify them.                                                                                                                                                             |
+| **`focalPoint`**               | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) |
+| **`formatOptions`**            | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                                          |
+| **`handlers`**                 | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                                             |
+| **`imageSizes`**               | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                                               |
+| **`mimeTypes`**                | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                                         |                                                              |
+| **`resizeOptions`**            | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                  |
+| **`filesRequiredOnCreate`**    | Mandate file data on creation, default is true.                                                                                                                                                                  |
 
 _An asterisk denotes that a property above is required._
 

docs/upload/storage-adapters.mdx

@@ -0,0 +1,343 @@
+---
+title: Storage Adapters
+label: Overview
+order: 20
+desc: Payload provides additional storage adapters to handle file uploads. These adapters allow you to store files in different locations, such as Amazon S3, Vercel Blob Storage, Google Cloud Storage, Uploadthing, and more.
+keywords: uploads, images, media, storage, adapters, s3, vercel, google cloud, azure
+---
+
+Payload offers additional storage adapters to handle file uploads. These adapters allow you to store files in different locations, such as Amazon S3, Vercel Blob Storage, Google Cloud Storage, and more.
+
+| Service              | Package                                                                                                           |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| Vercel Blob          | [`@payloadcms/storage-vercel-blob`](https://github.com/payloadcms/payload/tree/beta/packages/storage-vercel-blob) |
+| AWS S3               | [`@payloadcms/storage-s3`](https://github.com/payloadcms/payload/tree/beta/packages/storage-s3)                   |
+| Azure                | [`@payloadcms/storage-azure`](https://github.com/payloadcms/payload/tree/beta/packages/storage-azure)             |
+| Google Cloud Storage | [`@payloadcms/storage-gcs`](https://github.com/payloadcms/payload/tree/beta/packages/storage-gcs)                 |
+
+
+### Vercel Blob Storage [`@payloadcms/storage-vercel-blob`](https://www.npmjs.com/package/@payloadcms/storage-vercel-blob)
+
+#### Installation
+
+```sh
+pnpm add @payloadcms/storage-vercel-blob
+```
+
+#### Usage
+
+- Configure the `collections` object to specify which collections should use the Vercel Blob adapter. The slug _must_ match one of your existing collection slugs.
+- Ensure you have `BLOB_READ_WRITE_TOKEN` set in your Vercel environment variables. This is usually set by Vercel automatically after adding blob storage to your project.
+- When enabled, this package will automatically set `disableLocalStorage` to `true` for each collection.
+
+```ts
+import { vercelBlobStorage } from '@payloadcms/storage-vercel-blob'
+import { Media } from './collections/Media'
+import { MediaWithPrefix } from './collections/MediaWithPrefix'
+
+export default buildConfig({
+  collections: [Media, MediaWithPrefix],
+  plugins: [
+    vercelBlobStorage({
+      enabled: true, // Optional, defaults to true
+      // Specify which collections should use Vercel Blob
+      collections: {
+        [Media.slug]: true,
+        [MediaWithPrefix.slug]: {
+          prefix: 'my-prefix',
+        },
+      },
+      // Token provided by Vercel once Blob storage is added to your Vercel project
+      token: process.env.BLOB_READ_WRITE_TOKEN,
+    }),
+  ],
+})
+```
+
+#### Configuration Options
+
+| Option               | Description                                                          | Default                       |
+| -------------------- | -------------------------------------------------------------------- | ----------------------------- |
+| `enabled`            | Whether or not to enable the plugin                                  | `true`                        |
+| `collections`        | Collections to apply the Vercel Blob adapter to                      |                               |
+| `addRandomSuffix`    | Add a random suffix to the uploaded file name in Vercel Blob storage | `false`                       |
+| `cacheControlMaxAge` | Cache-Control max-age in seconds                                     | `365 * 24 * 60 * 60` (1 Year) |
+| `token`              | Vercel Blob storage read/write token                                 | `''`                          |
+
+### S3 Storage [`@payloadcms/storage-s3`](https://www.npmjs.com/package/@payloadcms/storage-s3)
+
+#### Installation
+
+```sh
+pnpm add @payloadcms/storage-s3
+```
+
+#### Usage
+
+- Configure the `collections` object to specify which collections should use the Vercel Blob adapter. The slug _must_ match one of your existing collection slugs.
+- The `config` object can be any [`S3ClientConfig`](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3) object (from [`@aws-sdk/client-s3`](https://github.com/aws/aws-sdk-js-v3)). _This is highly dependent on your AWS setup_. Check the AWS documentation for more information.
+- When enabled, this package will automatically set `disableLocalStorage` to `true` for each collection.
+
+```ts
+import { s3Storage } from '@payloadcms/storage-s3'
+import { Media } from './collections/Media'
+import { MediaWithPrefix } from './collections/MediaWithPrefix'
+
+export default buildConfig({
+  collections: [Media, MediaWithPrefix],
+  plugins: [
+    s3Storage({
+      collections: {
+        [mediaSlug]: true,
+        [mediaWithPrefixSlug]: {
+          prefix,
+        },
+      },
+      bucket: process.env.S3_BUCKET,
+      config: {
+        credentials: {
+          accessKeyId: process.env.S3_ACCESS_KEY_ID,
+          secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
+        },
+        region: process.env.S3_REGION,
+        // ... Other S3 configuration
+      },
+    }),
+  ],
+})
+```
+
+##### Configuration Options
+
+See the the [AWS SDK Package](https://github.com/aws/aws-sdk-js-v3) and [`S3ClientConfig`](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3) object for guidance on AWS S3 configuration.
+
+### Azure Blob Storage - [`@payloadcms/storage-azure`](https://www.npmjs.com/package/@payloadcms/storage-azure)
+
+#### Installation
+
+```sh
+pnpm add @payloadcms/storage-azure
+```
+
+#### Usage
+
+- Configure the `collections` object to specify which collections should use the Vercel Blob adapter. The slug _must_ match one of your existing collection slugs.
+- When enabled, this package will automatically set `disableLocalStorage` to `true` for each collection.
+
+```ts
+import { azureStorage } from '@payloadcms/storage-azure'
+import { Media } from './collections/Media'
+import { MediaWithPrefix } from './collections/MediaWithPrefix'
+
+export default buildConfig({
+  collections: [Media, MediaWithPrefix],
+  plugins: [
+    azureStorage({
+      collections: {
+        [mediaSlug]: true,
+        [mediaWithPrefixSlug]: {
+          prefix,
+        },
+      },
+      allowContainerCreate: process.env.AZURE_STORAGE_ALLOW_CONTAINER_CREATE === 'true',
+      baseURL: process.env.AZURE_STORAGE_ACCOUNT_BASEURL,
+      connectionString: process.env.AZURE_STORAGE_CONNECTION_STRING,
+      containerName: process.env.AZURE_STORAGE_CONTAINER_NAME,
+    }),
+  ],
+})
+```
+
+#### Configuration Options
+
+| Option                 | Description                                                              | Default |
+| ---------------------- | ------------------------------------------------------------------------ | ------- |
+| `enabled`              | Whether or not to enable the plugin                                      | `true`  |
+| `collections`          | Collections to apply the Azure Blob adapter to                           |         |
+| `allowContainerCreate` | Whether or not to allow the container to be created if it does not exist | `false` |
+| `baseURL`              | Base URL for the Azure Blob storage account                              |         |
+| `connectionString`     | Azure Blob storage connection string                                     |         |
+| `containerName`        | Azure Blob storage container name                                        |         |
+
+### Google Cloud Storage [`@payloadcms/storage-gcs`](https://www.npmjs.com/package/@payloadcms/storage-gcs)
+
+#### Installation
+
+```sh
+pnpm add @payloadcms/storage-gcs
+```
+
+#### Usage
+
+- Configure the `collections` object to specify which collections should use the Vercel Blob adapter. The slug _must_ match one of your existing collection slugs.
+- When enabled, this package will automatically set `disableLocalStorage` to `true` for each collection.
+
+```ts
+import { gcsStorage } from '@payloadcms/storage-gcs'
+import { Media } from './collections/Media'
+import { MediaWithPrefix } from './collections/MediaWithPrefix'
+
+export default buildConfig({
+  collections: [Media, MediaWithPrefix],
+  plugins: [
+    gcsStorage({
+      collections: {
+        [mediaSlug]: true,
+        [mediaWithPrefixSlug]: {
+          prefix,
+        },
+      },
+      bucket: process.env.GCS_BUCKET,
+      options: {
+        apiEndpoint: process.env.GCS_ENDPOINT,
+        projectId: process.env.GCS_PROJECT_ID,
+      },
+    }),
+  ],
+})
+```
+
+#### Configuration Options
+
+| Option        | Description                                                                                         | Default   |
+| ------------- | --------------------------------------------------------------------------------------------------- | --------- |
+| `enabled`     | Whether or not to enable the plugin                                                                 | `true`    |
+| `collections` | Collections to apply the storage to                                                                 |           |
+| `bucket`      | The name of the bucket to use                                                                       |           |
+| `options`     | Google Cloud Storage client configuration. See [Docs](https://github.com/googleapis/nodejs-storage) |           |
+| `acl`         | Access control list for files that are uploaded                                                     | `Private` |
+
+
+### Uploadthing Storage [`@payloadcms/storage-uploadthing`](https://www.npmjs.com/package/@payloadcms/storage-uploadthing)
+
+#### Installation
+
+```sh
+pnpm add @paylaodcms/storage-uploadthing
+```
+
+#### Usage
+
+- Configure the `collections` object to specify which collections should use uploadthing. The slug _must_ match one of your existing collection slugs and be an `upload` type.
+- Get an API key from Uploadthing and set it as `apiKey` in the `options` object.
+- `acl` is optional and defaults to `public-read`.
+
+```ts
+export default buildConfig({
+  collections: [Media],
+  plugins: [
+    uploadthingStorage({
+      collections: {
+        [mediaSlug]: true,
+      },
+      options: {
+        apiKey: process.env.UPLOADTHING_SECRET,
+        acl: 'public-read',
+      },
+    }),
+  ],
+})
+```
+
+#### Configuration Options
+
+| Option           | Description                                     | Default       |
+| ---------------- | ----------------------------------------------- | ------------- |
+| `apiKey`         | API key from Uploadthing. Required.             |               |
+| `acl`            | Access control list for files that are uploaded | `public-read` |
+| `logLevel`       | Log level for Uploadthing                       | `info`        |
+| `fetch`          | Custom fetch function                           | `fetch`       |
+| `defaultKeyType` | Default key type for file operations            | `fileKey`     |
+
+
+### Custom Storage Adapters
+
+If you need to create a custom storage adapter, you can use the [`@payloadcms/plugin-cloud-storage`](https://www.npmjs.com/package/@payloadcms/plugin-cloud-storage) package. This package is used internally by the storage adapters mentioned above.
+
+#### Installation
+
+`pnpm add @payloadcms/plugin-cloud-storage`
+
+#### Usage
+
+Reference any of the existing storage adapters for guidance on how this should be structured. Create an adapter following the `GeneratedAdapter` interface. Then, pass the adapter to the `cloudStorage` plugin.
+
+```ts
+export interface GeneratedAdapter {
+  /**
+   * Additional fields to be injected into the base collection and image sizes
+   */
+  fields?: Field[]
+  /**
+   * Generates the public URL for a file
+   */
+  generateURL?: GenerateURL
+  handleDelete: HandleDelete
+  handleUpload: HandleUpload
+  name: string
+  onInit?: () => void
+  staticHandler: StaticHandler
+}
+```
+
+```ts
+import { buildConfig } from 'payload/config'
+import { cloudStoragePlugin } from '@payloadcms/plugin-cloud-storage'
+
+export default buildConfig({
+  plugins: [
+    cloudStorage({
+      collections: {
+        'my-collection-slug': {
+          adapter: theAdapterToUse, // see docs for the adapter you want to use
+        },
+      },
+    }),
+  ],
+  // The rest of your config goes here
+})
+```
+
+### Plugin options
+
+This plugin is configurable to work across many different Payload collections. A `*` denotes that the property is required.
+
+| Option           | Type                                | Description                                                                                                                       |
+| ---------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `collections` \* | `Record<string, CollectionOptions>` | Object with keys set to the slug of collections you want to enable the plugin for, and values set to collection-specific options. |
+| `enabled`        |                                     | `boolean` to conditionally enable/disable plugin. Default: true.                                                                  |
+
+### Collection-specific options
+
+| Option                        | Type                                                                                               | Description                                                                                                                                                                                                   |
+| ----------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `adapter` \*                  | [Adapter](https://github.com/payloadcms/plugin-cloud-storage/blob/master/src/types.ts#L51)         | Pass in the adapter that you'd like to use for this collection. You can also set this field to `null` for local development if you'd like to bypass cloud storage in certain scenarios and use local storage. |
+| `disableLocalStorage`         | `boolean`                                                                                          | Choose to disable local storage on this collection. Defaults to `true`.                                                                                                                                       |
+| `disablePayloadAccessControl` | `true`                                                                                             | Set to `true` to disable Payload's access control. [More](#payload-access-control)                                                                                                                            |
+| `prefix`                      | `string`                                                                                           | Set to `media/images` to upload files inside `media/images` folder in the bucket.                                                                                                                             |
+| `generateFileURL`             | [GenerateFileURL](https://github.com/payloadcms/plugin-cloud-storage/blob/master/src/types.ts#L53) | Override the generated file URL with one that you create.                                                                                                                                                     |
+
+### Payload Access Control
+
+Payload ships with access control that runs _even on statically served files_. The same `read` access control property on your `upload`-enabled collections is used, and it allows you to restrict who can request your uploaded files.
+
+To preserve this feature, by default, this plugin _keeps all file URLs exactly the same_. Your file URLs won't be updated to point directly to your cloud storage source, as in that case, Payload's access control will be completely bypassed and you would need public readability on your cloud-hosted files.
+
+Instead, all uploads will still be reached from the default `/collectionSlug/staticURL/filename` path. This plugin will "pass through" all files that are hosted on your third-party cloud service—with the added benefit of keeping your existing access control in place.
+
+If this does not apply to you (your upload collection has `read: () => true` or similar) you can disable this functionality by setting `disablePayloadAccessControl` to `true`. When this setting is in place, this plugin will update your file URLs to point directly to your cloud host.
+
+### Conditionally Enabling/Disabling
+
+The proper way to conditionally enable/disable this plugin is to use the `enabled` property.
+
+```ts
+cloudStoragePlugin({
+  enabled: process.env.MY_CONDITION === 'true',
+  collections: {
+    'my-collection-slug': {
+      adapter: theAdapterToUse, // see docs for the adapter you want to use
+    },
+  },
+}),
+```

emptyModule.js

@@ -1 +0,0 @@
-export default {}

examples/auth/next-app/.prettierrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  printWidth: 100,
-  parser: 'typescript',
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'avoid',
-}

examples/auth/next-app/README.md

@@ -1,9 +1,11 @@
 # Payload Auth Example Front-End
 
-This is a [Payload](https://payloadcms.com) + [Next.js](https://nextjs.org) app using the [App Router](https://nextjs.org/docs/app) made explicitly for the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth). It demonstrates how to authenticate your Next.js app using [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
+This is a [Next.js](https://nextjs.org) [App Router](https://nextjs.org/docs/app) front-end made explicitly for the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth). This example demonstrates how to authenticate your Next.js app using [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
 
 > This example uses the App Router, the latest API of Next.js. If your app is using the legacy [Pages Router](https://nextjs.org/docs/pages), check out the official [Pages Router Example](https://github.com/payloadcms/payload/tree/main/examples/auth/next-pages).
 
+**IMPORTANT—This application runs on a different server as Payload and establishes a connection from another domain or port over HTTP.** For an integrated setup that runs on a single server and uses the [Local API](https://payloadcms.com/docs/local-api/overview#local-api), check out [how to serve Payload alongside Next.js](https://github.com/payloadcms/payload/tree/main/examples/auth/payload). To learn more about this, check out [how Payload can be used in its various headless capacities](https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload).
+
 ## Getting Started
 
 ### Payload
@@ -13,9 +15,10 @@ First you'll need a running Payload app. There is one made explicitly for this e
 ### Next.js
 
 1. Clone this repo
-2. `cd` into this directory and run `yarn` or `npm install`
+2. `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.
 3. `cp .env.example .env` to copy the example environment variables
-4. `yarn dev` or `npm run dev` to start the server
+4. `pnpm dev`, `yarn dev`, or `npm run dev` to start the server
 5. `open http://localhost:3001` to see the result
 
 Once running, a user is automatically seeded in your local environment with some basic instructions. See the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) for full details.

examples/auth/next-app/app/page.tsx

@@ -26,7 +26,7 @@ export default function Home() {
         {". This example demonstrates how to implement Payload's "}
         <Link href="https://payloadcms.com/docs/authentication/overview">Authentication</Link>
         {
-          ' strategies in both the REST and GraphQL APIs. To toggle between these APIs, see `_layout.tsx`.'
+          ' strategies through http using the REST and GraphQL APIs. To toggle between these two APIs, see `_layout.tsx`.'
         }
       </p>
       <p>

examples/auth/next-app/app/recover-password/RecoverPasswordForm/index.tsx

@@ -54,7 +54,7 @@ export const RecoverPasswordForm: React.FC = () => {
           <div className={classes.formWrapper}>
             <p>
               {`Please enter your email below. You will receive an email message with instructions on
-              how to reset your password. To manage your all users, `}
+              how to reset your password. To manage all of your users, `}
               <Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
                 login to the admin dashboard
               </Link>

examples/auth/next-pages/.prettierrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  printWidth: 100,
-  parser: 'typescript',
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'avoid',
-}

examples/auth/next-pages/README.md

@@ -1,8 +1,10 @@
 # Payload Auth Example Front-End
 
-This is a [Payload](https://payloadcms.com) + [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages) made explicitly for the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth). It demonstrates how  to authenticate your Next.js app using [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
+This is a [Next.js](https://nextjs.org) [Pages Router](https://nextjs.org/docs/pages) front-end made explicitly for the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth). This example demonstrates how to authenticate your Next.js app using [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
 
-> This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/pages), check out the official [App Router Example](https://github.com/payloadcms/payload/tree/main/examples/auth/next-app).
+> This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/app), check out the official [App Router Example](https://github.com/payloadcms/payload/tree/main/examples/auth/next-app).
+
+**IMPORTANT—This application runs on a different server as Payload and establishes a connection from another domain or port over HTTP.** For an integrated setup that runs on a single server and uses the [Local API](https://payloadcms.com/docs/local-api/overview#local-api), check out [how to serve Payload alongside Next.js](https://github.com/payloadcms/payload/tree/main/examples/auth/payload). To learn more about this, check out [how Payload can be used in its various headless capacities](https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload).
 
 ## Getting Started
 
@@ -13,9 +15,10 @@ First you'll need a running Payload app. There is one made explicitly for this e
 ### Next.js
 
 1. Clone this repo
-2. `cd` into this directory and run `yarn` or `npm install`
+2. `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.
 3. `cp .env.example .env` to copy the example environment variables
-4. `yarn dev` or `npm run dev` to start the server
+4. `pnpm i`, `yarn dev`, or `npm run dev` to start the server
 5. `open http://localhost:3001` to see the result
 
 Once running, a user is automatically seeded in your local environment with some basic instructions. See the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) for full details.

examples/auth/next-pages/src/pages/index.tsx

@@ -26,7 +26,7 @@ export default function Home() {
         {". This example demonstrates how to implement Payload's "}
         <Link href="https://payloadcms.com/docs/authentication/overview">Authentication</Link>
         {
-          ' strategies in both the REST and GraphQL APIs. To toggle between these APIs, see `_app.tsx`.'
+          ' strategies through HTTP using the REST and GraphQL APIs. To toggle between these two APIs, see `_app.tsx`.'
         }
       </p>
       <p>

examples/auth/next-pages/src/pages/recover-password/index.tsx

@@ -53,7 +53,7 @@ const RecoverPassword: React.FC = () => {
           <div className={classes.formWrapper}>
             <p>
               {`Please enter your email below. You will receive an email message with instructions on
-              how to reset your password. To manage your all users, `}
+              how to reset your password. To manage all of your users, `}
               <Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
                 login to the admin dashboard
               </Link>

examples/auth/payload/.env.example

@@ -1,7 +1,7 @@
-PAYLOAD_PUBLIC_SITE_URL=http://localhost:3001
+# NOTE: Change port of `PAYLOAD_PUBLIC_SITE_URL` if front-end is running on another server
+PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
+NEXT_PUBLIC_SERVER_URL=http://localhost:3000
 DATABASE_URI=mongodb://127.0.0.1/payload-example-auth
 PAYLOAD_SECRET=PAYLOAD_AUTH_EXAMPLE_SECRET_KEY
 COOKIE_DOMAIN=localhost
-PAYLOAD_PUBLIC_SEED=true
-PAYLOAD_DROP_DATABASE=true

examples/auth/payload/.eslintignore

@@ -0,0 +1,12 @@
+.tmp
+**/.git
+**/.hg
+**/.pnp.*
+**/.svn
+**/.yarn/**
+**/build
+**/dist/**
+**/node_modules
+**/temp
+playwright.config.ts
+jest.config.js

examples/auth/payload/.eslintrc.cjs

@@ -1,4 +1,15 @@
 module.exports = {
+  extends: ['plugin:@next/next/core-web-vitals', '@payloadcms'],
+  ignorePatterns: ['**/payload-types.ts'],
+  overrides: [
+    {
+      extends: ['plugin:@typescript-eslint/disable-type-checked'],
+      files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
+    },
+  ],
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
   root: true,
-  extends: ['@payloadcms'],
 }

examples/auth/payload/.prettierrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  printWidth: 100,
-  parser: 'typescript',
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'avoid',
-}

examples/auth/payload/README.md

@@ -1,39 +1,103 @@
 # Payload Auth Example
 
-The [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) demonstrates how to implement [Payload Authentication](https://payloadcms.com/docs/authentication/overview). Follow the [Quick Start](#quick-start) to get up and running quickly. There are various fully working front-ends made explicitly for this example, including:
+This [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) demonstrates how to implement [Payload Authentication](https://payloadcms.com/docs/authentication/overview) into all types of applications. Follow the [Quick Start](#quick-start) to get up and running quickly.
+
+**IMPORTANT—This example includes a fully integrated Next.js App Router front-end that runs on the same server as Payload.** If you are working on an application running on an entirely separate server, there are various fully working, separately running front-ends made explicitly for this example, including:
 
 - [Next.js App Router](../next-app)
 - [Next.js Pages Router](../next-pages)
 
-Follow the instructions in each respective README to get started. If you are setting up authentication for another front-end, please consider contributing to this repo with your own example!
+Those applications run directly alongside this one. Follow the instructions in each respective README to get started. If you are setting up authentication for another front-end, please consider contributing to this repo with your own example!
+
+To learn more about this, [check out how Payload can be used in its various headless capacities](https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload).
 
 ## Quick Start
 
 To spin up this example locally, follow these steps:
 
 1. Clone this repo
-2. `cd` into this directory and run `yarn` or `npm install`
-3. `cp .env.example .env` to copy the example environment variables
-4. `yarn dev` or `npm run dev` to start the server and seed the database
-5. `open http://localhost:3000/admin` to access the admin panel
-6. Login with email `demo@payloadcms.com` and password `demo`
+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. `cp .env.example .env` to copy the example environment variables
+
+   > Adjust `PAYLOAD_PUBLIC_SITE_URL` in the `.env` if your front-end is running on a separate domain or port.
+
+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`
 
 That's it! Changes made in `./src` will be reflected in your app. See the [Development](#development) section for more details.
 
 ## How it works
 
-The `users` collection exposes all [auth-related operations](https://payloadcms.com/docs/authentication/operations) needed to create a fully custom workflow on your front-end using the REST or GraphQL APIs, including:
+### Collections
 
-- `Me`
-- `Login`
-- `Logout`
-- `Refresh Token`
-- `Verify Email`
-- `Unlock`
-- `Forgot Password`
-- `Reset Password`
+See the [Collections](https://payloadcms.com/docs/configuration/collections) docs for details on how to extend this functionality.
 
-The [`cors`](https://payloadcms.com/docs/production/preventing-abuse#cross-origin-resource-sharing-cors), [`csrf`](https://payloadcms.com/docs/production/preventing-abuse#cross-site-request-forgery-csrf), and [`cookies`](https://payloadcms.com/docs/authentication/config#options) settings are also configured to ensure that the admin panel and front-end can communicate with each other securely.
+- #### Users (Authentication)
+
+  Users are auth-enabled and encompass both admins and regular users based on the value of their `roles` field. Only `admin` users can access your admin panel to manage your content whereas `user` can authenticate on your front-end and access-controlled interfaces. See [Access Control](#access-control) for more details.
+
+  **Local API**
+
+  On the server, Payload provides all operations needed to authenticate users server-side using the Local API. In Next.js that might look something like this:
+
+  ```ts
+    import { headers as getHeaders } from 'next/headers.js'
+    import { getPayloadHMR } from '@payloadcms/next'
+    import config from '../../payload.config'
+
+    export default async function AccountPage({ searchParams }) {
+      const headers = getHeaders()
+      const payload = await getPayloadHMR({ config: configPromise })
+      const { permissions, user } = await payload.auth({ headers })
+
+      if (!user) {
+        redirect(
+          `/login?error=${encodeURIComponent('You must be logged in to access your account.')}&redirect=/account`,
+        )
+      }
+
+      return ...
+    }
+  ```
+
+  **HTTP**
+
+  The `users` collection also opens an http-layer to expose all [auth-related operations](https://payloadcms.com/docs/authentication/operations) through the REST and GraphQL APIs, including:
+
+  - `Me`
+  - `Login`
+  - `Logout`
+  - `Refresh Token`
+  - `Verify Email`
+  - `Unlock`
+  - `Forgot Password`
+  - `Reset Password`
+
+  This might look something like this:
+
+  ```ts
+  await fetch('/api/users/me', {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+  ```
+
+  > NOTE: You can still use the HTTP APIs on the server if you don't have access to the Local API.
+
+### Security
+
+The [`cors`](https://payloadcms.com/docs/production/preventing-abuse#cross-origin-resource-sharing-cors), [`csrf`](https://payloadcms.com/docs/production/preventing-abuse#cross-site-request-forgery-csrf), and [`cookies`](https://payloadcms.com/docs/authentication/config#options) settings are all configured to ensure that the admin panel and front-end can communicate with each other securely.
+
+For additional help, see the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs.
 
 ### Access Control
 
@@ -50,7 +114,7 @@ To spin up this example locally, follow the [Quick Start](#quick-start).
 
 ### Seed
 
-On boot, a seed script is included to create a user with email `demo@payloadcms.com`, password `demo`, the role `admin`.
+On boot, a seed migration performed to create a user with email `demo@payloadcms.com`, password `demo`, the role `admin`.
 
 > 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.
 
@@ -58,14 +122,17 @@ On boot, a seed script is included to create a user with email `demo@payloadcms.
 
 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.
+1. First invoke the `payload build` script by running `pnpm build`, `yarn build`, or `npm run build` in your project root. This creates a `./build` directory with a production-ready admin bundle.
+1. Then run `pnpm serve`, `yarn serve`, or `npm run serve` to run Node.js 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 deploy your app manually, check out the [deployment documentation](https://payloadcms.com/docs/production/deployment) for full details.
+If you are using an integrated Next.js setup, the easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js. Otherwise, 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 deploy your app manually, check out the [deployment documentation](https://payloadcms.com/docs/production/deployment) for full details.
 
 ## 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/auth/payload/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/auth/payload/next.config.mjs

@@ -0,0 +1,8 @@
+import { withPayload } from '@payloadcms/next/withPayload'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Your Next.js config here
+}
+
+export default withPayload(nextConfig)

examples/auth/payload/package.json

@@ -1,48 +1,43 @@
 {
   "name": "payload-example-auth",
-  "description": "Payload authentication example.",
   "version": "1.0.0",
-  "main": "dist/server.js",
+  "description": "Payload authentication example.",
   "license": "MIT",
+  "main": "dist/server.js",
   "scripts": {
-    "dev": "cross-env PAYLOAD_PUBLIC_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "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",
+    "build": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts NODE_OPTIONS=--no-deprecation next build",
+    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts && pnpm seed && cross-env NODE_OPTIONS=--no-deprecation next dev",
     "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
-    "lint": "eslint src",
-    "lint:fix": "eslint --fix --ext .ts,.tsx src"
+    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "lint:fix": "eslint --fix --ext .ts,.tsx src",
+    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts 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",
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "latest"
+    "@payloadcms/db-mongodb": "3.0.0-beta.24",
+    "@payloadcms/next": "3.0.0-beta.24",
+    "@payloadcms/richtext-slate": "3.0.0-beta.24",
+    "@payloadcms/ui": "3.0.0-beta.24",
+    "cross-env": "^7.0.3",
+    "next": "14.3.0-canary.68",
+    "payload": "3.0.0-beta.24",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.3"
   },
   "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"
+    "@next/eslint-plugin-next": "^13.1.6",
+    "@payloadcms/eslint-config": "^1.1.1",
+    "@swc/core": "^1.4.14",
+    "@swc/types": "^0.1.6",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "dotenv": "^16.4.5",
+    "eslint": "^8.57.0",
+    "tsx": "^4.7.1",
+    "typescript": "5.4.4"
   }
 }

examples/auth/payload/src/app/(app)/_components/Button/index.module.scss

@@ -9,21 +9,12 @@
   text-decoration: none;
   display: inline-flex;
   padding: 12px 24px;
-  font-family: inherit;
-  line-height: inherit;
-  font-size: inherit;
 }
 
 .content {
   display: flex;
   align-items: center;
   justify-content: space-around;
-
-  svg {
-    margin-right: calc(var(--base) / 2);
-    width: var(--base);
-    height: var(--base);
-  }
 }
 
 .label {
@@ -43,30 +34,7 @@
   box-shadow: inset 0 0 0 1px var(--theme-elevation-1000);
 }
 
-.primary--invert {
-  background-color: var(--theme-elevation-0);
-  color: var(--theme-elevation-1000);
-}
-
-.secondary--invert {
-  background-color: var(--theme-elevation-1000);
-  box-shadow: inset 0 0 0 1px var(--theme-elevation-0);
-}
-
 .appearance--default {
   padding: 0;
   color: var(--theme-text);
 }
-
-.appearance--none {
-  padding: 0;
-  color: var(--theme-text);
-
-  &:local() {
-    .label {
-      text-transform: none;
-      line-height: inherit;
-      font-size: inherit;
-    }
-  }
-}

examples/auth/payload/src/app/(app)/_components/Button/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ElementType } from 'react'
+import type { ElementType } from 'react';
 
 import Link from 'next/link'
 import React from 'react'
@@ -8,7 +8,7 @@ import React from 'react'
 import classes from './index.module.scss'
 
 export type Props = {
-  appearance?: 'default' | 'none' | 'primary' | 'secondary'
+  appearance?: 'default' | 'primary' | 'secondary'
   className?: string
   disabled?: boolean
   el?: 'a' | 'button' | 'link'
@@ -33,7 +33,6 @@ export const Button: React.FC<Props> = ({
   onClick,
 }) => {
   let el = elFromProps
-
   const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
 
   const className = [

examples/auth/payload/src/app/(app)/_components/Gutter/index.tsx

@@ -1,4 +1,4 @@
-import type { Ref } from 'react'
+import type { Ref } from 'react';
 
 import React, { forwardRef } from 'react'
 

examples/auth/payload/src/app/(app)/_components/Header/Nav/index.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import Link from 'next/link'
+import React from 'react'
+
+import { useAuth } from '../../../_providers/Auth'
+import classes from './index.module.scss'
+
+export const HeaderNav: React.FC = () => {
+  const { user } = useAuth()
+
+  return (
+    <nav
+      className={[
+        classes.nav,
+        // fade the nav in on user load to avoid flash of content and layout shift
+        // Vercel also does this in their own website header, see https://vercel.com
+        user === undefined && classes.hide,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {user && (
+        <React.Fragment>
+          <Link href="/account">Account</Link>
+          <Link href="/logout">Logout</Link>
+        </React.Fragment>
+      )}
+      {!user && (
+        <React.Fragment>
+          <Link href="/login">Login</Link>
+          <Link href="/create-account">Create Account</Link>
+        </React.Fragment>
+      )}
+    </nav>
+  )
+}

examples/auth/payload/src/app/(app)/_components/Header/index.module.scss

@@ -15,7 +15,7 @@
   width: 150px;
 }
 
-:global([data-theme='light']) {
+:global([data-theme="light"]) {
   .logo {
     filter: invert(1);
   }

examples/auth/payload/src/app/(app)/_components/Header/index.tsx

@@ -0,0 +1,33 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+import { Gutter } from '../Gutter'
+import { HeaderNav } from './Nav'
+import classes from './index.module.scss'
+
+export function Header() {
+  return (
+    <header className={classes.header}>
+      <Gutter className={classes.wrap}>
+        <Link className={classes.logo} href="/">
+          <picture>
+            <source
+              media="(prefers-color-scheme: dark)"
+              srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
+            />
+            <Image
+              alt="Payload Logo"
+              height={30}
+              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-dark.svg"
+              width={150}
+            />
+          </picture>
+        </Link>
+        <HeaderNav />
+      </Gutter>
+    </header>
+  )
+}
+
+export default Header

examples/auth/payload/src/app/(app)/_components/HydrateClientUser/index.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import type { Permissions } from 'payload/auth'
+import type { PayloadRequestWithData } from 'payload/types'
+
+import { useEffect } from 'react'
+
+import { useAuth } from '../../_providers/Auth'
+
+export const HydrateClientUser: React.FC<{
+  permissions: Permissions
+  user: PayloadRequestWithData['user']
+}> = ({ permissions, user }) => {
+  const { setPermissions, setUser } = useAuth()
+
+  useEffect(() => {
+    setUser(user)
+    setPermissions(permissions)
+  }, [user, permissions, setUser, setPermissions])
+
+  return null
+}

examples/auth/payload/src/app/(app)/_components/Input/index.module.scss

@@ -16,23 +16,12 @@
   height: calc(var(--base) * 2);
   line-height: calc(var(--base) * 2);
   padding: 0 calc(var(--base) / 2);
-  font-size: inherit;
 
   &:focus {
     border: none;
     outline: none;
   }
 
-  &::placeholder {
-    color: var(--theme-elevation-500);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-    color: var(--theme-elevation-500);
-  }
-
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
   &:-webkit-autofill:focus {
@@ -42,15 +31,7 @@
   }
 }
 
-.asterisk {
-  color: var(--color-error-500);
-}
-
-.textarea {
-  height: calc(var(--base) * 5);
-}
-
-:global([data-theme='dark']) {
+@media (prefers-color-scheme: dark) {
   .input {
     background-color: var(--theme-elevation-150);
   }

examples/auth/payload/src/app/(app)/_components/Input/index.tsx

@@ -0,0 +1,56 @@
+import type { FieldValues, UseFormRegister } from 'react-hook-form'
+
+import React from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  error: any
+  label: string
+  name: string
+  register: UseFormRegister<FieldValues & any> // eslint-disable-line @typescript-eslint/no-redundant-type-constituents
+  required?: boolean
+  type?: 'email' | 'number' | 'password' | 'text'
+  validate?: (value: string) => boolean | string
+}
+
+export const Input: React.FC<Props> = ({
+  name,
+  type = 'text',
+  error,
+  label,
+  register,
+  required,
+  validate,
+}) => {
+  return (
+    <div className={classes.inputWrap}>
+      <label className={classes.label} htmlFor="name">
+        {`${label} ${required ? '*' : ''}`}
+      </label>
+      <input
+        className={[classes.input, error && classes.error].filter(Boolean).join(' ')}
+        {...{ type }}
+        {...register(name, {
+          required,
+          validate,
+          ...(type === 'email'
+            ? {
+                pattern: {
+                  message: 'Please enter a valid email',
+                  value: /\S[^\s@]*@\S+\.\S+/,
+                },
+              }
+            : {}),
+        })}
+      />
+      {error && (
+        <div className={classes.errorMessage}>
+          {!error?.message && error?.type === 'required'
+            ? 'This field is required'
+            : error?.message}
+        </div>
+      )}
+    </div>
+  )
+}

examples/auth/payload/src/app/(app)/_components/Message/index.module.scss

@@ -1,7 +1,7 @@
 @import '../../_css/common';
 
 .message {
-  padding: calc(var(--base) / 1.5);
+  padding: calc(var(--base) / 2) calc(var(--base) / 2);
   line-height: 1.25;
   width: 100%;
 }
@@ -26,7 +26,7 @@
   color: var(--theme-success-900);
 }
 
-:global([data-theme='dark']) {
+@media (prefers-color-scheme: dark) {
   .default {
     background-color: var(--theme-elevation-900);
     color: var(--theme-elevation-100);

examples/auth/payload/src/app/(app)/_components/RenderParams/index.tsx

@@ -0,0 +1,29 @@
+'use client'
+import { useSearchParams } from 'next/navigation'
+import React from 'react'
+
+import { Message } from '../Message'
+
+export const RenderParams: React.FC<{
+  className?: string
+  message?: string
+  params?: string[]
+}> = ({ className, message, params = ['error', 'message', 'success'] }) => {
+  const searchParams = useSearchParams()
+  const paramValues = params.map(param => searchParams.get(param)).filter(Boolean)
+
+  if (paramValues.length) {
+    return (
+      <div className={className}>
+        {paramValues.map(paramValue => (
+          <Message
+            key={paramValue}
+            message={(message || 'PARAM')?.replace('PARAM', paramValue || '')}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return null
+}

examples/auth/payload/src/app/(app)/_components/RichText/index.module.scss

@@ -2,7 +2,8 @@
   :first-child {
     margin-top: 0;
   }
-  :last-child {
-    margin-bottom: 0;
+
+  a {
+    text-decoration: underline;
   }
 }

examples/auth/payload/src/app/(app)/_components/RichText/serialize.tsx

@@ -1,18 +1,13 @@
 import escapeHTML from 'escape-html'
-import Link from 'next/link'
 import React, { Fragment } from 'react'
 import { Text } from 'slate'
 
-import { Label } from '../Label'
-import { LargeBody } from '../LargeBody'
-import { CMSLink } from '../Link'
-
 // eslint-disable-next-line no-use-before-define
 type Children = Leaf[]
 
 type Leaf = {
   [key: string]: unknown
-  children?: Children
+  children: Children
   type: string
   url?: string
   value?: {
@@ -21,8 +16,8 @@ type Leaf = {
   }
 }
 
-const serialize = (children?: Children): React.ReactNode[] =>
-  children?.map((node, i) => {
+const serialize = (children: Children): React.ReactNode[] =>
+  children.map((node, i) => {
     if (Text.isText(node)) {
       let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />
 
@@ -63,48 +58,35 @@ const serialize = (children?: Children): React.ReactNode[] =>
 
     switch (node.type) {
       case 'h1':
-        return <h1 key={i}>{serialize(node?.children)}</h1>
+        return <h1 key={i}>{serialize(node.children)}</h1>
       case 'h2':
-        return <h2 key={i}>{serialize(node?.children)}</h2>
+        return <h2 key={i}>{serialize(node.children)}</h2>
       case 'h3':
-        return <h3 key={i}>{serialize(node?.children)}</h3>
+        return <h3 key={i}>{serialize(node.children)}</h3>
       case 'h4':
-        return <h4 key={i}>{serialize(node?.children)}</h4>
+        return <h4 key={i}>{serialize(node.children)}</h4>
       case 'h5':
-        return <h5 key={i}>{serialize(node?.children)}</h5>
+        return <h5 key={i}>{serialize(node.children)}</h5>
       case 'h6':
-        return <h6 key={i}>{serialize(node?.children)}</h6>
-      case 'quote':
-        return <blockquote key={i}>{serialize(node?.children)}</blockquote>
+        return <h6 key={i}>{serialize(node.children)}</h6>
+      case 'blockquote':
+        return <blockquote key={i}>{serialize(node.children)}</blockquote>
       case 'ul':
-        return <ul key={i}>{serialize(node?.children)}</ul>
+        return <ul key={i}>{serialize(node.children)}</ul>
       case 'ol':
         return <ol key={i}>{serialize(node.children)}</ol>
       case 'li':
         return <li key={i}>{serialize(node.children)}</li>
       case 'link':
         return (
-          <CMSLink
-            key={i}
-            newTab={Boolean(node?.newTab)}
-            reference={node.doc as any}
-            type={node.linkType === 'internal' ? 'reference' : 'custom'}
-            url={node.url}
-          >
-            {serialize(node?.children)}
-          </CMSLink>
+          <a href={escapeHTML(node.url)} key={i}>
+            {serialize(node.children)}
+          </a>
         )
 
-      case 'label':
-        return <Label key={i}>{serialize(node?.children)}</Label>
-
-      case 'large-body': {
-        return <LargeBody key={i}>{serialize(node?.children)}</LargeBody>
-      }
-
       default:
-        return <p key={i}>{serialize(node?.children)}</p>
+        return <p key={i}>{serialize(node.children)}</p>
     }
-  }) || []
+  })
 
 export default serialize

examples/auth/payload/src/app/(app)/_css/app.scss

@@ -30,12 +30,6 @@ html {
   @extend %body;
   background: var(--theme-bg);
   -webkit-font-smoothing: antialiased;
-  opacity: 0;
-
-  &[data-theme='dark'],
-  &[data-theme='light'] {
-    opacity: initial;
-  }
 }
 
 html,