remove auth

.github/actions/release-commenter/package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@octokit/webhooks-types": "^7.5.1",
-    "@swc/jest": "^0.2.37",
+    "@swc/jest": "^0.2.36",
     "@types/jest": "^27.5.2",
     "@types/node": "^20.16.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",

.github/actions/setup/action.yml

@@ -1,33 +1,15 @@
 name: Setup node and pnpm
-description: |
-  Configures Node, pnpm, cache, performs pnpm install
+description: Configure the Node.js and pnpm versions
 
 inputs:
   node-version:
-    description: Node.js version
+    description: 'The Node.js version to use'
     required: true
-    default: 22.6.0
+    default: 22.6.2
   pnpm-version:
-    description: Pnpm version
+    description: 'The pnpm version to use'
     required: true
     default: 9.7.1
-  pnpm-run-install:
-    description: Whether to run pnpm install
-    required: false
-    default: true
-  pnpm-restore-cache:
-    description: Whether to restore cache
-    required: false
-    default: true
-  pnpm-install-cache-key:
-    description: The cache key for the pnpm install cache
-    default: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-outputs:
-  pnpm-store-path:
-    description: The resolved pnpm store path
-  pnpm-install-cache-key:
-    description: The cache key used for pnpm install cache
 
 runs:
   using: composite
@@ -48,29 +30,19 @@ runs:
         version: ${{ inputs.pnpm-version }}
         run_install: false
 
-    - name: Get pnpm store path
+    - name: Get pnpm store directory
       shell: bash
       run: |
-        STORE_PATH=$(pnpm store path --silent)
-        echo "STORE_PATH=$STORE_PATH" >> $GITHUB_ENV
-        echo "Pnpm store path resolved to: $STORE_PATH"
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-    - name: Restore pnpm install cache
-      if: ${{ inputs.pnpm-restore-cache == 'true' }}
+    - name: Setup pnpm cache
       uses: actions/cache@v4
       with:
         path: ${{ env.STORE_PATH }}
-        key: ${{ inputs.pnpm-install-cache-key }}
+        key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
-          pnpm-store-${{ inputs.pnpm-version }}-
           pnpm-store-
+          pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
 
-    - name: Run pnpm install
-      if: ${{ inputs.pnpm-run-install == 'true' }}
-      shell: bash
+    - shell: bash
       run: pnpm install
-
-      # Set the cache key output
-    - run: |
-        echo "pnpm-install-cache-key=${{ inputs.pnpm-install-cache-key }}" >> $GITHUB_ENV
-      shell: bash

.github/workflows/label-on-change.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   on-labeled-ensure-one-status:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     permissions:
       issues: write
     # Only run on issue labeled and if label starts with 'status:'
@@ -49,7 +49,7 @@ jobs:
             }
 
   on-issue-close:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     permissions:
       issues: write
     if: github.event.action == 'closed'
@@ -82,7 +82,7 @@ jobs:
             }
 
   on-issue-reopen:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     permissions:
       issues: write
     if: github.event.action == 'reopened'
@@ -93,7 +93,7 @@ jobs:
           labels: 'status: needs-triage'
 
   on-issue-assigned:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     permissions:
       issues: write
     if: >
@@ -106,11 +106,11 @@ jobs:
           labels: 'status: needs-triage'
 
   # on-pr-merge:
-  #   runs-on: ubuntu-24.04
+  #   runs-on: ubuntu-latest
   #   if: github.event.pull_request.merged == true
   #   steps:
 
   # on-pr-close:
-  #   runs-on: ubuntu-24.04
+  #   runs-on: ubuntu-latest
   #   if: github.event_name == 'pull_request_target' && github.event.pull_request.merged == false
   #   steps:

.github/workflows/lock-issues.yml

@@ -11,7 +11,7 @@ permissions:
 
 jobs:
   lock_issues:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     steps:
       - name: Lock issues
         uses: dessant/lock-threads@v5

.github/workflows/main.yml

@@ -23,12 +23,11 @@ env:
 
 jobs:
   changes:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     permissions:
       pull-requests: read
     outputs:
       needs_build: ${{ steps.filter.outputs.needs_build }}
-      needs_tests: ${{ steps.filter.outputs.needs_tests }}
       templates: ${{ steps.filter.outputs.templates }}
     steps:
       # https://github.com/actions/virtual-environments/issues/1187
@@ -36,6 +35,8 @@ jobs:
         run: sudo ethtool -K eth0 tx off rx off
 
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 25
       - uses: dorny/paths-filter@v3
         id: filter
         with:
@@ -47,36 +48,53 @@ jobs:
               - 'pnpm-lock.yaml'
               - 'package.json'
               - 'templates/**'
-            needs_tests:
-              - '.github/workflows/**'
-              - 'packages/**'
-              - 'test/**'
-              - 'pnpm-lock.yaml'
-              - 'package.json'
             templates:
               - 'templates/**'
       - name: Log all filter results
         run: |
           echo "needs_build: ${{ steps.filter.outputs.needs_build }}"
-          echo "needs_tests: ${{ steps.filter.outputs.needs_tests }}"
           echo "templates: ${{ steps.filter.outputs.templates }}"
 
   lint:
     if: >
       github.event_name == 'pull_request' && !contains(github.event.pull_request.title, 'no-lint') && !contains(github.event.pull_request.title, 'skip-lint')
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: Node setup
-        uses: ./.github/actions/setup
+      # 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 }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-          pnpm-install-cache-key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        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}
@@ -85,46 +103,78 @@ jobs:
   build:
     needs: changes
     if: ${{ needs.changes.outputs.needs_build == 'true' }}
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 25
 
-      - name: Node setup
-        uses: ./.github/actions/setup
+      # 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 }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-          pnpm-install-cache-key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        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
       - 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 }}
 
   tests-unit:
-    runs-on: ubuntu-24.04
-    needs: [changes, build]
-    if: ${{ needs.changes.outputs.needs_tests == 'true' }}
-    steps:
-      - uses: actions/checkout@v4
+    runs-on: ubuntu-latest
+    needs: build
 
-      - name: Node setup
-        uses: ./.github/actions/setup
+    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 }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-          pnpm-run-install: false
-          pnpm-restore-cache: false # Full build is restored below
-          pnpm-install-cache-key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        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 }}
@@ -134,37 +184,9 @@ jobs:
         env:
           NODE_OPTIONS: --max-old-space-size=8096
 
-  tests-types:
-    runs-on: ubuntu-24.04
-    needs: [changes, build]
-    if: ${{ needs.changes.outputs.needs_tests == 'true' }}
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Node setup
-        uses: ./.github/actions/setup
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-          pnpm-run-install: false
-          pnpm-restore-cache: false # Full build is restored below
-          pnpm-install-cache-key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - name: Restore build
-        uses: actions/cache@v4
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Types Tests
-        run: pnpm test:types --target '>=5.7'
-        env:
-          NODE_OPTIONS: --max-old-space-size=8096
-
   tests-int:
-    runs-on: ubuntu-24.04
-    needs: [changes, build]
-    if: ${{ needs.changes.outputs.needs_tests == 'true' }}
+    runs-on: ubuntu-latest
+    needs: build
     name: int-${{ matrix.database }}
     strategy:
       fail-fast: false
@@ -200,21 +222,24 @@ jobs:
 
     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: Node setup
-        uses: ./.github/actions/setup
+      - name: Setup Node@${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-          pnpm-run-install: false
-          pnpm-restore-cache: false # Full build is restored below
-          pnpm-install-cache-key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
 
-      - name: Restore build
-        uses: actions/cache@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
+          version: ${{ env.PNPM_VERSION }}
+          run_install: false
+
+      - run: pnpm install
 
       - name: Start LocalStack
         run: pnpm docker:start
@@ -249,22 +274,15 @@ jobs:
         if: matrix.database == 'supabase'
 
       - name: Integration Tests
-        uses: nick-fields/retry@v3
+        run: pnpm test:int
         env:
           NODE_OPTIONS: --max-old-space-size=8096
           PAYLOAD_DATABASE: ${{ matrix.database }}
           POSTGRES_URL: ${{ env.POSTGRES_URL }}
-        with:
-          retry_on: any
-          max_attempts: 5
-          timeout_minutes: 15
-          command: pnpm test:int
-          on_retry_command: pnpm clean:build && pnpm install --no-frozen-lockfile
 
   tests-e2e:
-    runs-on: ubuntu-24.04
-    needs: [changes, build]
-    if: ${{ needs.changes.outputs.needs_tests == 'true' }}
+    runs-on: ubuntu-latest
+    needs: build
     name: e2e-${{ matrix.suite }}
     strategy:
       fail-fast: false
@@ -278,7 +296,6 @@ jobs:
           - admin__e2e__3
           - admin-root
           - auth
-          - auth-basic
           - field-error-states
           - fields-relationship
           - fields
@@ -307,19 +324,24 @@ jobs:
     env:
       SUITE_NAME: ${{ matrix.suite }}
     steps:
-      - uses: actions/checkout@v4
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
 
-      - name: Node setup
-        uses: ./.github/actions/setup
+      - name: Setup Node@${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-          pnpm-run-install: false
-          pnpm-restore-cache: false # Full build is restored below
-          pnpm-install-cache-key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        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 }}
@@ -351,13 +373,7 @@ jobs:
         run: pnpm exec playwright install-deps chromium
 
       - name: E2E Tests
-        uses: nick-fields/retry@v3
-        with:
-          retry_on: any
-          max_attempts: 5
-          timeout_minutes: 20
-          command: PLAYWRIGHT_JSON_OUTPUT_NAME=results_${{ matrix.suite }}.json pnpm test:e2e:prod:ci ${{ matrix.suite }}
-          on_retry_command: pnpm clean:build && pnpm install --no-frozen-lockfile && pnpm build:all
+        run: PLAYWRIGHT_JSON_OUTPUT_NAME=results_${{ matrix.suite }}.json pnpm test:e2e:prod:ci ${{ matrix.suite }}
         env:
           PLAYWRIGHT_JSON_OUTPUT_NAME: results_${{ matrix.suite }}.json
           NEXT_TELEMETRY_DISABLED: 1
@@ -379,7 +395,7 @@ jobs:
 
   # Build listed templates with packed local packages
   build-templates:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     needs: build
     strategy:
       matrix:
@@ -410,19 +426,24 @@ jobs:
       POSTGRES_DB: payloadtests
 
     steps:
-      - uses: actions/checkout@v4
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
 
-      - name: Node setup
-        uses: ./.github/actions/setup
+      - name: Setup Node@${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-          pnpm-run-install: false
-          pnpm-restore-cache: false # Full build is restored below
-          pnpm-install-cache-key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        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 }}
@@ -458,23 +479,28 @@ jobs:
           pnpm runts scripts/build-template-with-local-pkgs.ts ${{ matrix.template }} $POSTGRES_URL
 
   tests-type-generation:
-    runs-on: ubuntu-24.04
-    needs: [changes, build]
-    if: ${{ needs.changes.outputs.needs_tests == 'true' }}
-    steps:
-      - uses: actions/checkout@v4
+    runs-on: ubuntu-latest
+    needs: build
 
-      - name: Node setup
-        uses: ./.github/actions/setup
+    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 }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-          pnpm-run-install: false
-          pnpm-restore-cache: false # Full build is restored below
-          pnpm-install-cache-key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        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 }}
@@ -488,16 +514,13 @@ jobs:
   all-green:
     name: All Green
     if: always()
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     needs:
       - lint
       - build
-      - build-templates
       - tests-unit
       - tests-int
       - tests-e2e
-      - tests-types
-      - tests-type-generation
 
     steps:
       - if: ${{ always() && (contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')) }}
@@ -505,7 +528,7 @@ jobs:
 
   publish-canary:
     name: Publish Canary
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     if: ${{ needs.all-green.result == 'success' && github.ref_name == 'main' }}
     needs:
       - all-green

.github/workflows/post-release-templates.yml

@@ -1,105 +0,0 @@
-name: post-release-templates
-
-on:
-  release:
-    types:
-      - published
-  workflow_dispatch:
-
-env:
-  NODE_VERSION: 22.6.0
-  PNPM_VERSION: 9.7.1
-  DO_NOT_TRACK: 1 # Disable Turbopack telemetry
-  NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry
-
-jobs:
-  update_templates:
-    runs-on: ubuntu-24.04
-    permissions:
-      contents: write
-      pull-requests: write
-    env:
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_DB: payloadtests
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0 # Needed for tags
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-
-      - name: Start PostgreSQL
-        uses: CasperWA/postgresql-action@v1.2
-        with:
-          postgresql version: '14' # See https://hub.docker.com/_/postgres for available versions
-          postgresql db: ${{ env.POSTGRES_DB }}
-          postgresql user: ${{ env.POSTGRES_USER }}
-          postgresql password: ${{ env.POSTGRES_PASSWORD }}
-
-      - name: Wait for PostgreSQL
-        run: sleep 30
-
-      - name: Configure PostgreSQL
-        run: |
-          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "CREATE ROLE runner SUPERUSER LOGIN;"
-          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "SELECT version();"
-          echo "POSTGRES_URL=postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" >> $GITHUB_ENV
-          echo "DATABASE_URI=postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" >> $GITHUB_ENV
-
-      - name: Start MongoDB
-        uses: supercharge/mongodb-github-action@1.11.0
-        with:
-          mongodb-version: 6.0
-
-      - name: Update template lockfiles and migrations
-        run: pnpm script:gen-templates
-
-      - name: Determine Release Tag
-        id: determine_tag
-        run: |
-          if [ "${{ github.event_name }}" == "release" ]; then
-            echo "Using tag from release event: ${{ github.event.release.tag_name }}"
-            echo "release_tag=${{ github.event.release.tag_name }}" >> "$GITHUB_OUTPUT"
-          else
-            # pull latest tag from github, must match any version except v2. Should match v3, v4, v99, etc.
-            echo "Fetching latest tag from github..."
-            LATEST_TAG=$(git describe --tags --abbrev=0 --match 'v[0-9]*' --exclude 'v2*')
-            echo "Latest tag: $LATEST_TAG"
-            echo "release_tag=$LATEST_TAG" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Commit and push changes
-        id: commit
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          set -ex
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
-
-          git diff --name-only
-
-          export BRANCH_NAME=templates/bump-${{ steps.determine_tag.outputs.release_tag }}-$(date +%s)
-          echo "branch=$BRANCH_NAME" >> "$GITHUB_OUTPUT"
-
-      - name: Create pull request
-        uses: peter-evans/create-pull-request@v7
-        with:
-          token: ${{ secrets.GH_TOKEN_POST_RELEASE_TEMPLATES }}
-          labels: 'area: templates'
-          author: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
-          commit-message: 'templates: bump templates for ${{ steps.determine_tag.outputs.release_tag }}'
-          branch: ${{ steps.commit.outputs.branch }}
-          base: main
-          assignees: ${{ github.actor }}
-          title: 'templates: bump for ${{ steps.determine_tag.outputs.release_tag }}'
-          body: |
-            🤖 Automated bump of templates for ${{ steps.determine_tag.outputs.release_tag }}
-
-            Triggered by user: @${{ github.actor }}

.github/workflows/post-release.yml

@@ -19,10 +19,12 @@ env:
 
 jobs:
   post_release:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     if: ${{ github.event_name != 'workflow_dispatch' }}
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - uses: ./.github/actions/release-commenter
         continue-on-error: true
         env:
@@ -37,16 +39,69 @@ jobs:
           comment-template: |
             🚀 This is included in version {release_link}
 
-  github-releases-to-discord:
-    runs-on: ubuntu-24.04
-    if: ${{ github.event_name != 'workflow_dispatch' }}
+  update_templates:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Github Releases To Discord
-        uses: SethCohen/github-releases-to-discord@v1.16.2
+      - name: Setup
+        uses: ./.github/actions/setup
         with:
-          webhook_url: ${{ secrets.DISCORD_RELEASES_WEBHOOK_URL }}
-          color: '16777215'
-          username: 'Payload Releases'
-          avatar_url: 'https://l4wlsi8vxy8hre4v.public.blob.vercel-storage.com/discord-bot-logo.png'
+          node-version: ${{ env.NODE_VERSION }}
+          pnpm-version: ${{ env.PNPM_VERSION }}
+
+      - name: Update template lockfiles and migrations
+        run: pnpm script:gen-templates
+
+      - name: Determine Release Tag
+        id: determine_tag
+        run: |
+          if [ "${{ github.event.inputs.tag }}" != "" ]; then
+            echo "Using tag from input: ${{ github.event.inputs.tag }}"
+            echo "release_tag=${{ github.event.inputs.tag }}" >> "$GITHUB_OUTPUT"
+          else
+            echo "Using tag from release event: ${{ github.event.release.tag_name }}"
+            echo "release_tag=${{ github.event.release.tag_name }}" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Commit and push changes
+        id: commit
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          set -ex
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          export BRANCH_NAME=chore/templates-${{ steps.determine_tag.outputs.release_tag }}
+          git checkout -b $BRANCH_NAME
+          git add -A
+
+          # If no files have changed, exit early with success
+          git diff --cached --quiet --exit-code && exit 0
+
+          git commit -m "chore(templates): bump lockfiles after ${{ steps.determine_tag.outputs.release_tag }}"
+          git push origin $BRANCH_NAME
+          echo "committed=true" >> "$GITHUB_OUTPUT"
+          echo "branch=$BRANCH_NAME" >> "$GITHUB_OUTPUT"
+
+      - name: Debug Branches
+        run: |
+          echo "Target Commitish: ${{ github.event.release.target_commitish }}"
+          echo "Branch: ${{ steps.commit.outputs.branch }}"
+          echo "Ref: ${{ github.ref }}"
+
+      - name: Create pull request
+        uses: peter-evans/create-pull-request@v7
+        if: steps.commit.outputs.committed == 'true'
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          labels: 'area: templates'
+          author: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
+          commit-message: 'Automated update after release'
+          branch: ${{ steps.commit.outputs.branch }}
+          base: ${{ github.event_name != 'workflow_dispatch' && github.event.release.target_commitish || github.ref }}
+          title: 'chore(templates): bump lockfiles after ${{ steps.determine_tag.outputs.release_tag }}'
+          body: 'Automated bump of template lockfiles after release ${{ steps.determine_tag.outputs.release_tag }}'

.github/workflows/pr-title.yml

@@ -1,7 +1,7 @@
 name: pr-title
 
 on:
-  pull_request_target:
+  pull_request:
     types:
       - opened
       - edited
@@ -12,7 +12,7 @@ permissions:
 jobs:
   main:
     name: lint-pr-title
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     steps:
       - uses: amannn/action-semantic-pull-request@v5
         id: lint_pr_title
@@ -24,15 +24,14 @@ jobs:
             chore
             ci
             docs
-            examples
             feat
             fix
             perf
             refactor
             revert
             style
-            templates
             test
+            types
           scopes: |
             cpa
             db-\*
@@ -107,7 +106,7 @@ jobs:
 
   label-pr-on-open:
     name: label-pr-on-open
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     if: github.event.action == 'opened'
     steps:
       - name: Tag with 2.x branch with v2

.github/workflows/release-canary.yml

@@ -14,7 +14,7 @@ jobs:
     name: release-canary-${{ github.ref_name }}-${{ github.sha }}
     permissions:
       id-token: write
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/stale.yml

@@ -1,21 +1,11 @@
 name: stale
 
 on:
-  schedule:
-    # Run nightly at 1am EST
-    - cron: '0 5 * * *'
-
   workflow_dispatch:
-    inputs:
-      dry-run:
-        description: Run the stale action in debug-only mode
-        default: false
-        required: false
-        type: boolean
 
 jobs:
   stale:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     permissions:
       issues: write
       pull-requests: write
@@ -23,35 +13,30 @@ jobs:
       - uses: actions/stale@v9
         id: stale
         with:
-          debug-only: ${{ inputs.dry-run || false }}
-
-          days-before-stale: 23
+          debug-only: true
+          days-before-stale: 90
           days-before-close: 7
-          days-before-pr-close: -1 # Never close PRs
           ascending: true
           operations-per-run: 300
 
+          # Ignore all assigned
+          exempt-all-assignees: false
+
           # Issues
-          stale-issue-label: stale
-          exempt-issue-labels: 'prioritized,keep,created-by: Payload team,created-by: Contributor,status: verified'
-          stale-issue-message: |
-            This issue has been marked as stale due to lack of activity.
-
-            To keep this issue open, please indicate that it is still relevant in a comment below.
-
-          close-issue-message: |
+          stale-issue-label: 'stale'
+          exempt-issue-labels: 'blocked,must,should,keep,created-by: Payload team,created-by: Contributor'
+          stale-issue-message: >
+            This issue has been marked as stale due to lack of activity. To keep the ticket open, please indicate that it is still relevant in a comment below.
+          close-issue-message: >
             This issue was automatically closed due to lack of activity.
 
           # Pull Requests
-          stale-pr-label: stale
-          exempt-pr-labels: 'prioritized,keep,created-by: Payload team,created-by: Contributor'
-          stale-pr-message: |
-            This PR is stale due to lack of activity.
-
-            To keep the PR open, please indicate that it is still relevant in a comment below.
-          close-pr-message: |
+          stale-pr-label: 'stale'
+          exempt-pr-labels: 'blocked,must,should,keep,created-by: Payload team,created-by: Contributor'
+          stale-pr-message: >
+            This PR is stale due to lack of activity. To keep the PR open, please indicate that it is still relevant in a comment below.
+          close-pr-message: >
             This pull request was automatically closed due to lack of activity.
 
-      # TODO: Add a step to notify team
       - name: Print outputs
         run: echo ${{ format('{0},{1}', toJSON(steps.stale.outputs.staled-issues-prs), toJSON(steps.stale.outputs.closed-issues-prs)) }}

.github/workflows/triage.yml

@@ -1,7 +1,7 @@
 name: triage
 
 on:
-  pull_request_target:
+  pull_request:
     types:
       - opened
   issues:
@@ -18,7 +18,7 @@ permissions:
 
 jobs:
   debug-context:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     steps:
       - name: View context attributes
         uses: actions/github-script@v7
@@ -27,10 +27,11 @@ jobs:
 
   label-created-by:
     name: label-on-open
-    runs-on: ubuntu-24.04
+    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: |
@@ -88,11 +89,10 @@ jobs:
   triage:
     name: initial-triage
     if: github.event_name == 'issues'
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.base.ref }}
           token: ${{ secrets.GITHUB_TOKEN }}
       - uses: ./.github/actions/triage
         with:

README.md

@@ -9,8 +9,6 @@
    
   <a href="https://www.npmjs.com/package/payload"><img alt="npm" src="https://img.shields.io/npm/dw/payload?style=flat-square" /></a>
   &nbsp;
-  <a href="https://github.com/payloadcms/payload/graphs/contributors"><img alt="npm" src="https://img.shields.io/github/contributors-anon/payloadcms/payload?color=yellow&style=flat-square" /></a>
-  &nbsp;
   <a href="https://www.npmjs.com/package/payload"><img alt="npm" src="https://img.shields.io/npm/v/payload?style=flat-square" /></a>
   &nbsp;
   <a href="https://twitter.com/payloadcms"><img src="https://img.shields.io/badge/follow-payloadcms-1DA1F2?logo=twitter&style=flat-square" alt="Payload Twitter" /></a>

docs/access-control/collections.mdx

@@ -6,7 +6,7 @@ desc: With Collection-level Access Control you can define which users can create
 keywords: collections, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-Collection Access Control is [Access Control](../access-control/overview) used to restrict access to Documents within a [Collection](../getting-started/concepts#collections), as well as what they can and cannot see within the [Admin Panel](../admin/overview) as it relates to that Collection.
+Collection Access Control is [Access Control](../access-control) used to restrict access to Documents within a [Collection](../collections/overview), as well as what they can and cannot see within the [Admin Panel](../admin/overview) as it relates to that Collection.
 
 To add Access Control to a Collection, use the `access` property in your [Collection Config](../configuration/collections):
 
@@ -259,7 +259,7 @@ The following arguments are provided to the `delete` function:
 
 ### Admin
 
-If the Collection is used to access the [Admin Panel](../admin/overview#the-admin-user-collection), the `Admin` Access Control function determines whether or not the currently logged in user can access the admin UI.
+If the Collection is use to access the [Admin Panel](../admin/overview#the-admin-user-collection), the `Admin` Access Control function determines whether or not the currently logged in user can access the admin UI.
 
 To add Admin Access Control to a Collection, use the `admin` property in the [Collection Config](../collections/overview):
 

docs/access-control/fields.mdx

@@ -6,7 +6,7 @@ desc: Field-level Access Control is specified within a field's config, and allow
 keywords: fields, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-Field Access Control is [Access Control](../overview) used to restrict access to specific [Fields](../fields/overview) within a Document.
+Field Access Control is [Access Control](../access-control) used to restrict access to specific [Fields](../fields/overview) within a Document.
 
 To add Access Control to a Field, use the `access` property in your [Field Config](../fields/overview):
 

docs/access-control/globals.mdx

@@ -6,7 +6,7 @@ desc: Global-level Access Control is specified within each Global's `access` pro
 keywords: globals, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-Global Access Control is [Access Control](../overview) used to restrict access to [Global](../globals/overview) Documents, as well as what they can and cannot see within the [Admin Panel](../admin/overview) as it relates to that Global.
+Global Access Control is [Access Control](../access-control) used to restrict access to [Global](../globals/overview) Documents, as well as what they can and cannot see within the [Admin Panel](../admin/overview) as it relates to that Global.
 
 To add Access Control to a Global, use the `access` property in your [Global Config](../configuration/globals):
 

docs/admin/collections.mdx

@@ -25,24 +25,24 @@ export const MyCollection: CollectionConfig = {
 
 The following options are available:
 
-| Option                           | Description                                                                                                                                                                                                                  |
-| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`group`**                      | Text or localization object used to group Collection and Global links in the admin navigation. Set to `false` to hide the link from the navigation while keeping its routes accessible.                                      |
-| **`hidden`**                     | Set to true or a function, called with the current user, returning true to exclude this Collection from navigation and admin routing.                                                                                        |
-| **`hooks`**                      | Admin-specific hooks for this Collection. [More details](../hooks/collections).                                                                                                                                              |
-| **`useAsTitle`**                 | Specify a top-level field to use for a document title throughout the Admin Panel. If no field is defined, the ID of the document is used as the title. A field with `virtual: true` cannot be used as the title.             |
+| Option                           | Description                                                                                                                                                                                                           |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`group`**                      | Text used as a label for grouping Collection and Global links together in the navigation.                                                                                                                             |
+| **`hidden`**                     | Set to true or a function, called with the current user, returning true to exclude this Collection from navigation and admin routing.                                                                                 |
+| **`hooks`**                      | Admin-specific hooks for this Collection. [More details](../hooks/collections).                                                                                                                                       |
+| **`useAsTitle`**                 | Specify a top-level field to use for a document title throughout the Admin Panel. If no field is defined, the ID of the document is used as the title. A field with `virtual: true` cannot be used as the title.      |
 | **`description`**                | Text to display below the Collection label in the List View to give editors more information. Alternatively, you can use the `admin.components.Description` to render a React component. [More details](#custom-components). |
-| **`defaultColumns`**             | Array of field names that correspond to which columns to show by default in this Collection's List View.                                                                                                                     |
-| **`hideAPIURL`**                 | Hides the "API URL" meta field while editing documents within this Collection.                                                                                                                                               |
-| **`enableRichTextLink`**         | The [Rich Text](../fields/rich-text) field features a `Link` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.                                   |
-| **`enableRichTextRelationship`** | The [Rich Text](../fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.                           |
-| **`meta`**                       | Page metadata overrides to apply to this Collection within the Admin Panel. [More details](./metadata).                                                                                                                      |
-| **`preview`**                    | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](#preview).                                                                                                               |
-| **`livePreview`**                | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                                                                                |
+| **`defaultColumns`**             | Array of field names that correspond to which columns to show by default in this Collection's List View.                                                                                                              |
+| **`hideAPIURL`**                 | Hides the "API URL" meta field while editing documents within this Collection.                                                                                                                                        |
+| **`enableRichTextLink`**         | The [Rich Text](../fields/rich-text) field features a `Link` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.                            |
+| **`enableRichTextRelationship`** | The [Rich Text](../fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.                    |
+| **`meta`**                       | Page metadata overrides to apply to this Collection within the Admin Panel. [More details](./metadata).                                                                                                               |
+| **`preview`**                    | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](#preview).                                                                                                        |
+| **`livePreview`**                | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                                                                         |
 | **`components`**                 | Swap in your own React components to be used within this Collection. [More details](#custom-components).                                                                                                                     |
-| **`listSearchableFields`**       | Specify which fields should be searched in the List search view. [More details](#list-searchable-fields).                                                                                                                    |
-| **`pagination`**                 | Set pagination-specific options for this Collection. [More details](#pagination).                                                                                                                                            |
-| **`baseListFilter`**             | You can define a default base filter for this collection's List view, which will be merged into any filters that the user performs.                                                                                          |
+| **`listSearchableFields`**       | Specify which fields should be searched in the List search view. [More details](#list-searchable-fields).                                                                                                             |
+| **`pagination`**                 | Set pagination-specific options for this Collection. [More details](#pagination).                                                                                                                                     |
+| **`baseListFilter`**             | You can define a default base filter for this collection's List view, which will be merged into any filters that the user performs.                                                                                   |
 
 ### Custom Components
 
@@ -108,20 +108,12 @@ export const Posts: CollectionConfig = {
 }
 ```
 
-The `preview` property resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path.
-
 The preview function receives two arguments:
 
 | Argument | Description |
 | --- | --- |
 | **`doc`** | The Document being edited. |
-| **`ctx`** | An object containing `locale`, `token`, and `req` properties. The `token` is the currently logged-in user's JWT. |
-
-If your application requires a fully qualified URL, such as within deploying to Vercel Preview Deployments, you can use the `req` property to build this URL:
-
-```ts
-preview: (doc, { req }) => `${req.protocol}//${req.host}/${doc.slug}` // highlight-line
-```
+| **`ctx`** | An object containing `locale` and `token` properties. The `token` is the currently logged-in user's JWT. |
 
 <Banner type="success">
   <strong>Note:</strong>

docs/admin/components.mdx

@@ -445,7 +445,7 @@ Then to colorize your Custom Component's background, for example, you can use th
 Payload also exports its [SCSS](https://sass-lang.com) library for reuse which includes mixins, etc. To use this, simply import it as follows into your `.scss` file:
 
 ```scss
-@import '~@payloadcms/ui/scss';
+@import '~payload/scss';
 
 .my-component {
   @include mid-break {

docs/admin/fields.mdx

@@ -50,7 +50,7 @@ The following options are available:
 | **`style`**             | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field.                                                                                                                 |
 | **`className`**         | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field.                                                                                             |
 | **`readOnly`**          | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value.                                                            |
-| **`disabled`**          | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely.                                                                                                                           |
+| **`disabled`**          | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview).                                                                                                                                    |
 | **`disableBulkEdit`**   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents. Defaults to `true` for UI fields.                                                               |
 | **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                             |
 | **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                              |

docs/admin/globals.mdx

@@ -25,9 +25,9 @@ export const MyGlobal: GlobalConfig = {
 
 The following options are available:
 
-| Option            | Description                                                                                                                       |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| **`group`**       | Text or localization object used to group Collection and Global links in the admin navigation. Set to `false` to hide the link from the navigation while keeping its routes accessible. |
+| Option        | Description                                                                                                                       |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| **`group`**       | Text used as a label for grouping Collection and Global links together in the navigation.                                         |
 | **`hidden`**      | Set to true or a function, called with the current user, returning true to exclude this Global from navigation and admin routing. |
 | **`components`**  | Swap in your own React components to be used within this Global. [More details](#custom-components).                           |
 | **`preview`**     | Function to generate a preview URL within the Admin Panel for this Global that can point to your app. [More details](#preview).           |

docs/admin/metadata.mdx

@@ -184,7 +184,7 @@ export const MyGlobal: GlobalConfig = {
     meta: {
     // highlight-end
       title: 'My Global',
-      description: 'The best admin panel in the world',
+      description: 'The best
     },
   },
 }

docs/admin/overview.mdx

@@ -86,21 +86,20 @@ const config = buildConfig({
 
 The following options are available:
 
-| Option                         | Description                                                                                                                                                           |
-|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **`avatar`**                   | Set account profile picture. Options: `gravatar`, `default` or a custom React component.                                                                              |
-| **`autoLogin`**                | Used to automate log-in for dev and demonstration convenience. [More details](../authentication/overview).                                                            |
-| **`buildPath`**                | Specify an absolute path for where to store the built Admin bundle used in production. Defaults to `path.resolve(process.cwd(), 'build')`.                            |
-| **`components`**               | Component overrides that affect the entirety of the Admin Panel. [More details](./components).                                                                        |
-| **`custom`**                   | Any custom properties you wish to pass to the Admin Panel.                                                                                                            |
-| **`dateFormat`**               | The date format that will be used for all dates within the Admin Panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.                       |
-| **`disable`**                  | If set to `true`, the entire Admin Panel will be disabled.                                                                                                            |
-| **`livePreview`**              | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                         |
-| **`meta`**                     | Base metadata to use for the Admin Panel. [More details](./metadata).                                                                                                 |
-| **`routes`**                   | Replace built-in Admin Panel routes with your own custom routes. [More details](#customizing-routes).                                                                 |
-| **`suppressHydrationWarning`** | If set to `true`, suppresses React hydration mismatch warnings during the hydration of the root <html> tag. Defaults to `false`.                                      |
-| **`theme`**                    | Restrict the Admin Panel theme to use only one of your choice. Default is `all`.                                                                                      |
-| **`user`**                     | The `slug` of the Collection that you want to allow to login to the Admin Panel. [More details](#the-admin-user-collection).                                          |
+| Option        | Description                                                                                                                                                           |
+|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **`avatar`**      | Set account profile picture. Options: `gravatar`, `default` or a custom React component.                                                                              |
+| **`autoLogin`**   | Used to automate log-in for dev and demonstration convenience. [More details](../authentication/overview).                                                            |
+| **`buildPath`**   | Specify an absolute path for where to store the built Admin bundle used in production. Defaults to `path.resolve(process.cwd(), 'build')`.                            |
+| **`components`**  | Component overrides that affect the entirety of the Admin Panel. [More details](./components).                                                                        |
+| **`custom`**      | Any custom properties you wish to pass to the Admin Panel.                                                                                                            |
+| **`dateFormat`**  | The date format that will be used for all dates within the Admin Panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.                       |
+| **`disable`**     | If set to `true`, the entire Admin Panel will be disabled.                                                                                                            |
+| **`livePreview`** | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                         |
+| **`meta`**        | Base metadata to use for the Admin Panel. [More details](./metadata). |
+| **`routes`**      | Replace built-in Admin Panel routes with your own custom routes. [More details](#customizing-routes).                                                                 |
+| **`theme`**       | Restrict the Admin Panel theme to use only one of your choice. Default is `all`.
+| **`user`**        | The `slug` of the Collection that you want to allow to login to the Admin Panel. [More details](#the-admin-user-collection).                                          |
 
 <Banner type="success">
   <strong>Reminder:</strong>
@@ -144,7 +143,7 @@ It is also possible to allow multiple user types into the Admin Panel with limit
 - `super-admin` - full access to the Admin Panel to perform any action
 - `editor` - limited access to the Admin Panel to only manage content
 
-To do this, add a `roles` or similar field to your auth-enabled Collection, then use the `access.admin` property to grant or deny access based on the value of that field. See [Access Control](/docs/access-control/overview) for full details. For a complete, working example of role-based access control, check out the official [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth).
+To do this, add a `roles` or similar field to your auth-enabled Collection, then use the `access.admin` property to grant or deny access based on the value of that field. See [Access Control](/docs/access-control/overview) for full details. For a complete, working example of role-based access control, check out the official [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth/payload).
 
 ## Customizing Routes
 

docs/authentication/email.mdx

@@ -34,8 +34,8 @@ The following options are available:
 
 | Option               | Description                                                                                                                                                                                                                         |
 |----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **`generateEmailHTML`** | Allows for overriding the HTML within emails that are sent to users indicating how to validate their account. [More details](#generateemailhtml). |
-| **`generateEmailSubject`** | Allows for overriding the subject of the email that is sent to users indicating how to validate their account. [More details](#generateemailsubject). |
+| **`generateEmailHTML`** | Allows for overriding the HTML within emails that are sent to users indicating how to validate their account. [More details](#generateEmailHTML). |
+| **`generateEmailSubject`** | Allows for overriding the subject of the email that is sent to users indicating how to validate their account. [More details](#generateEmailSubject). |
 
 #### generateEmailHTML
 
@@ -111,7 +111,6 @@ The following options are available:
 
 | Option               | Description                                                                                                                                                                                                                         |
 |----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **`expiration`** | Configure how long password reset tokens remain valid, specified in milliseconds. |
 | **`generateEmailHTML`** | Allows for overriding the HTML within emails that are sent to users attempting to reset their password. [More details](#generateEmailHTML). |
 | **`generateEmailSubject`** | Allows for overriding the subject of the email that is sent to users attempting to reset their password. [More details](#generateEmailSubject). |
 

docs/cloud/projects.mdx

@@ -98,7 +98,7 @@ From there, you are ready to make updates to your project. When you are ready to
 
 Projects generated from a template will come pre-configured with the official Cloud Plugin, but if you are using your own repository you will need to add this into your project. To do so, add the plugin to your Payload Config:
 
-`pnpm add @payloadcms/payload-cloud`
+`yarn add @payloadcms/payload-cloud`
 
 ```js
 import { payloadCloudPlugin } from '@payloadcms/payload-cloud'

docs/configuration/localization.mdx

@@ -35,7 +35,7 @@ import { buildConfig } from 'payload'
 export default buildConfig({
   // ...
   localization: {
-    locales: ['en', 'es', 'de'], // required
+    locales: ['en', 'es', 'de'] // required
     defaultLocale: 'en', // required
   },
 })

docs/configuration/overview.mdx

@@ -64,7 +64,7 @@ export default buildConfig({
 The following options are available:
 
 | Option                     | Description                                                                                                                                                                                    |
-|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`admin`**                | The configuration options for the Admin Panel, including Custom Components, Live Preview, etc. [More details](../admin/overview#admin-options).                                                |
 | **`bin`**                  | Register custom bin scripts for Payload to execute.                                                                                                                                            |
 | **`editor`**               | The Rich Text Editor which will be used by `richText` fields. [More details](../rich-text/overview).                                                                                           |
@@ -83,6 +83,7 @@ The following options are available:
 | **`defaultDepth`**         | If a user does not specify `depth` while requesting a resource, this depth will be used. [More details](../queries/depth).                                                                     |
 | **`defaultMaxTextLength`** | The maximum allowed string length to be permitted application-wide. Helps to prevent malicious public document creation.                                                                       |
 | **`maxDepth`**             | The maximum allowed depth to be permitted application-wide. This setting helps prevent against malicious queries. Defaults to `10`. [More details](../queries/depth).                          |
+| **`maxCallDepth`**         | The maximum allowed call depth for Local API operations. This setting helps prevent against hooks that lead to infinity loops. Can be disabled with passing `false`. Defaults to `30`.         |
 | **`indexSortableFields`**  | Automatically index all sortable top-level fields in the database to improve sort performance and add database compatibility for Azure Cosmos and similar.                                     |
 | **`upload`**               | Base Payload upload configuration. [More details](../upload/overview#payload-wide-upload-options).                                                                                             |
 | **`routes`**               | Control the routing structure that Payload binds itself to. [More details](../admin/overview#root-level-routes).                                                                               |

docs/database/migrations.mdx

@@ -51,44 +51,12 @@ export async function down({ payload, req }: MigrateDownArgs): Promise<void> {
 
 ## Using Transactions
 
-When migrations are run, each migration is performed in a new [transaction](/docs/database/transactions) for you. All
+When migrations are run, each migration is performed in a new [transactions](/docs/database/transactions) for you. All
 you need to do is pass the `req` object to any [local API](/docs/local-api/overview) or direct database calls, such as
 `payload.db.updateMany()`, to make database changes inside the transaction. Assuming no errors were thrown, the transaction is committed
 after your `up` or `down` function runs. If the migration errors at any point or fails to commit, it is caught and the
 transaction gets aborted. This way no change is made to the database if the migration fails.
 
-### Using database directly with the transaction
-
-Additionally, you can bypass Payload's layer entirely and perform operations directly on your underlying database within the active transaction:
-
-### MongoDB:
-```ts
-import { type MigrateUpArgs } from '@payloadcms/db-mongodb'
-
-export async function up({ session, payload, req }: MigrateUpArgs): Promise<void> {
-  const posts = await payload.db.collections.posts.collection.find({ session }).toArray()
-}
-```
-
-### Postgres:
-```ts
-import { type MigrateUpArgs, sql } from '@payloadcms/db-postgres'
-
-export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
-  const { rows: posts } = await db.execute(sql`SELECT * from posts`)
-}
-```
-
-### SQLite:
-In SQLite, transactions are disabled by default. [More](./transactions).
-```ts
-import { type MigrateUpArgs, sql } from '@payloadcms/db-sqlite'
-
-export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
-  const { rows: posts } = await db.run(sql`SELECT * from posts`)
-}
-```
-
 ## Migrations Directory
 
 Each DB adapter has an optional property `migrationDir` where you can override where you want your migrations to be

docs/database/postgres.mdx

@@ -60,7 +60,7 @@ export default buildConfig({
 | `schemaName` (experimental) | A string for the postgres schema to use, defaults to 'public'.                                                                                                                   |
 | `idType`                    | A string of 'serial', or 'uuid' that is used for the data type given to id columns.                                                                                              |
 | `transactionOptions`        | A PgTransactionConfig object for transactions, or set to `false` to disable using transactions. [More details](https://orm.drizzle.team/docs/transactions)                       |
-| `disableCreateDatabase`     | Pass `true` to disable auto database creation if it doesn't exist. Defaults to `false`.                                                                                           |
+| `disableCreateDatabase`     | Pass `true` to disale auto database creation if it doesn't exist. Defaults to `false`.                                                                                           |
 | `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'.                                                                                              |

docs/database/transactions.mdx

@@ -16,12 +16,6 @@ By default, Payload will use transactions for all data changing operations, as l
   MongoDB requires a connection to a replicaset in order to make use of transactions.
 </Banner>
 
-<Banner type="info">
-  <strong>Note:</strong>
-  <br />
-  Transactions in SQLite are disabled by default. You need to pass `transactionOptions: {}` to enable them.
-</Banner>
-
 The initial request made to Payload will begin a new transaction and attach it to the `req.transactionID`. If you have a `hook` that interacts with the database, you can opt in to using the same transaction by passing the `req` in the arguments. For example:
 
 ```ts

docs/examples/overview.mdx

@@ -6,7 +6,9 @@ desc:
 keywords: example, examples, starter, boilerplate, template, templates
 ---
 
-Payload provides a vast array of examples to help you get started with your project no matter what you are working on. These examples are designed to be easy to get up and running, and to be easy to understand. They showcase nothing more than the specific features being demonstrated so you can easily decipher precisely what is going on.
+Payload provides a vast array of examples to help you get started with your project no matter what you are working on. These examples are designed to be easy to get up and running, and to be easy to understand. They showcase nothing more than the specific features being demonstrated so you can easily decipher what is going on.
+
+Examples are changing every day, so be sure to check back often to see what new examples have been added. If you have a specific example you would like to see, please feel free to start a new [Discussion](https://github.com/payloadcms/payload/discussions) or open a new [PR](https://github.com/payloadcms/payload/pulls) to add it yourself.
 
 - [Auth](https://github.com/payloadcms/payload/tree/main/examples/auth)
 - [Custom Components](https://github.com/payloadcms/payload/tree/main/examples/custom-components)
@@ -19,4 +21,16 @@ Payload provides a vast array of examples to help you get started with your proj
 - [Tests](https://github.com/payloadcms/payload/tree/main/examples/testing)
 - [White-label Admin UI](https://github.com/payloadcms/payload/tree/main/examples/whitelabel)
 
-We are adding new examples every day, so if your particular use case is not demonstrated in any existing example, please feel free to start a new [Discussion](https://github.com/payloadcms/payload/discussions) or open a new [PR](https://github.com/payloadcms/payload/pulls) to add it yourself.
+When necessary, some examples include a front-end. Examples that require a front-end share this folder structure:
+
+```plaintext
+example/
+├── payload/
+├── next-app/
+├── next-pages/
+├── react-router/
+├── vue/
+├── svelte/
+```
+
+Where `payload` is your Payload project, and the other directories are dedicated to their respective front-end framework. We are adding new examples every day, so if your framework of choice is not yet supported in any particular example, please feel free to start a new [Discussion](https://github.com/payloadcms/payload/discussions) or open a new [PR](https://github.com/payloadcms/payload/pulls) to add it yourself.

docs/getting-started/installation.mdx

@@ -10,9 +10,9 @@ keywords: documentation, getting started, guide, Content Management System, cms,
 
 Payload requires the following software:
 
-- Any JavaScript package manager (pnpm, npm, or yarn - pnpm is preferred)
+- Any JavaScript package manager (Yarn, NPM, or pnpm - pnpm is preferred)
 - Node.js version 20.9.0+
-- Any [compatible database](/docs/database/overview) (MongoDB, Postgres or SQLite)
+- Any [compatible database](/docs/database/overview) (MongoDB or Postgres)
 
 <Banner type="warning">
   <strong>Important:</strong>
@@ -49,7 +49,7 @@ pnpm i payload @payloadcms/next @payloadcms/richtext-lexical sharp graphql
 
 <Banner type="warning">
   <strong>Note:</strong>
-  Swap out `pnpm` for your package manager. If you are using npm, you might need to install using legacy peer deps: `npm i --legacy-peer-deps`.
+  Swap out `pnpm` for your package manager. If you are using NPM, you might need to install using legacy peer deps: `npm i --legacy-peer-deps`.
 </Banner>
 
 Next, install a [Database Adapter](/docs/database/overview). Payload requires a Database Adapter to establish a database connection. Payload works with all types of databases, but the most common are MongoDB and Postgres.
@@ -181,6 +181,6 @@ Once you have a Payload Config, update your `tsconfig` to include a `path` that
 
 #### 5. Fire it up!
 
-After you've reached this point, it's time to boot up Payload. Start your project in your application's folder to get going. By default, the Next.js dev script is `pnpm dev` (or `npm run dev` if using npm).
+After you've reached this point, it's time to boot up Payload. Start your project in your application's folder to get going. By default, the Next.js dev script is `pnpm dev` (or `npm run dev` if using NPM).
 
 After it starts, you can go to `http://localhost:3000/admin` to create your first Payload user!

docs/graphql/graphql-schema.mdx

@@ -62,7 +62,7 @@ type Collection1 {
 
 The above example outputs all your definitions to a file relative from your payload config as `./graphql/schema.graphql`. By default, the file will be output to your current working directory as `schema.graphql`.
 
-### Adding an npm script
+### Adding an NPM script
 
 <Banner type="warning">
   <strong>Important</strong>
@@ -72,7 +72,7 @@ The above example outputs all your definitions to a file relative from your payl
 
 Payload will automatically try and locate your config, but might not always be able to find it. For example, if you are working in a `/src` directory or similar, you need to tell Payload where to find your config manually by using an environment variable.
 
-If this applies to you, create an npm script to make generating types easier:
+If this applies to you, create an NPM script to make generating types easier:
 
 ```json
 // package.json

docs/hooks/context.mdx

@@ -28,8 +28,6 @@ To pass data between hooks, you can assign values to context in an earlier hook
 For example:
 
 ```ts
-import type { CollectionConfig } from 'payload'
-
 const Customer: CollectionConfig = {
   slug: 'customers',
   hooks: {
@@ -45,6 +43,7 @@ const Customer: CollectionConfig = {
       },
     ],
     afterChange: [
+
       async ({ context, doc, req }) => {
         // use context.customerData without needing to fetch it again
         if (context.customerData.contacted === false) {
@@ -66,8 +65,6 @@ Let's say you have an `afterChange` hook, and you want to do a calculation insid
 Bad example:
 
 ```ts
-import type { CollectionConfig } from 'payload'
-
 const Customer: CollectionConfig = {
   slug: 'customers',
   hooks: {
@@ -95,8 +92,6 @@ Instead of the above, we need to tell the `afterChange` hook to not run again if
 Fixed example:
 
 ```ts
-import type { CollectionConfig } from 'payload'
-
 const MyCollection: CollectionConfig = {
   slug: 'slug',
   hooks: {
@@ -130,7 +125,7 @@ const MyCollection: CollectionConfig = {
 
 The default TypeScript interface for `context` is `{ [key: string]: unknown }`. If you prefer a more strict typing in your project or when authoring plugins for others, you can override this using the `declare` syntax.
 
-This is known as "type augmentation", a TypeScript feature which allows us to add types to existing types. Simply put this in any `.ts` or `.d.ts` file:
+This is known as "type augmentation", a TypeScript feature which allows us to add types to existing objects. Simply put this in any `.ts` or `.d.ts` file:
 
 ```ts
 import { RequestContext as OriginalRequestContext } from 'payload'

docs/hooks/overview.mdx

@@ -37,7 +37,7 @@ Root Hooks are not associated with any specific Collection, Global, or Field. Th
 To add Root Hooks, use the `hooks` property in your [Payload Config](/docs/configuration/config):
 
 ```ts
-import { buildConfig } from 'payload'
+import {  buildConfig } from 'payload'
 
 export default buildConfig({
   // ...
@@ -60,7 +60,7 @@ The following options are available:
 The `afterError` Hook is triggered when an error occurs in the Payload application. This can be useful for logging errors to a third-party service, sending an email to the development team, logging the error to Sentry or DataDog, etc. The output can be used to transform the result object / status code.
 
 ```ts
-import { buildConfig } from 'payload'
+import {  buildConfig } from 'payload'
 
 export default buildConfig({
   // ...

docs/jobs-queue/overview.mdx

@@ -42,7 +42,7 @@ Examples:
 
 **Offloading complex operations**
 
-You may run into the need to perform computationally expensive functions which might slow down your main Payload API server(s). The Jobs Queue allows you to offload these tasks to a separate compute resource rather than slowing down the server(s) that run your Payload APIs. With Payload Task definitions, you can even keep large dependencies out of your main Next.js bundle by dynamically importing them only when they are used. This keeps your Next.js + Payload compilation fast and ensures large dependencies do not get bundled into your Payload production build.
+You may run into the need to perform computationally expensive functions which might slow down your main Payload API server(s). The Jobs Queue allows you to offload these tasks a separate compute resource rather than slowing down the server(s) that run your Payload APIs. With Payload Task definitions, you can even keep large dependencies out of your main Next.js bundle by dynamically importing them only when they are used. This keeps your Next.js + Payload compilation fast and ensures large dependencies do not get bundled into your Payload production build.
 
 Examples:
 

docs/jobs-queue/queues.mdx

@@ -98,24 +98,11 @@ After the project is deployed to Vercel, the Vercel Cron job will automatically
 
 If you want to process jobs programmatically from your server-side code, you can use the Local API:
 
-**Run all jobs:**
-
 ```ts
 const results = await payload.jobs.run()
 
 // You can customize the queue name and limit by passing them as arguments:
 await payload.jobs.run({ queue: 'nightly', limit: 100 })
-
-// You can provide a where clause to filter the jobs that should be run:
-await payload.jobs.run({ where: { 'input.message': { equals: 'secret' } } })
-```
-
-**Run a single job:**
-
-```ts
-const results = await payload.jobs.runByID({
-  id: myJobID
-})
 ```
 
 #### Bin script

docs/jobs-queue/tasks.mdx

@@ -23,14 +23,14 @@ Simply add a task to the `jobs.tasks` array in your Payload config. A task consi
 | Option                      | Description                                                                      |
 | --------------------------- | -------------------------------------------------------------------------------- |
 | `slug` | Define a slug-based name for this job. This slug needs to be unique among both tasks and workflows.|
-| `handler`   | The function that should be responsible for running the job. You can either pass a string-based path to the job function file, or the job function itself. If you are using large dependencies within your job, you might prefer to pass the string path because that will avoid bundling large dependencies in your Next.js app. Passing a string path is an advanced feature that may require a sophisticated build pipeline in order to work.         |
+| `handler`   | The function that should be responsible for running the job. You can either pass a string-based path to the job function file, or the job function itself. If you are using large dependencies within your job, you might prefer to pass the string path because that will avoid bundling large dependencies in your Next.js app.         |
 | `inputSchema` | Define the input field schema - payload will generate a type for this schema. |
 | `interfaceName` | You can use interfaceName to change the name of the interface that is generated for this task. By default, this is "Task" + the capitalized task slug. |
 | `outputSchema` | Define the output field schema - payload will generate a type for this schema. |
 | `label` | Define a human-friendly label for this task. |
 | `onFail` | Function to be executed if the task fails. |
 | `onSuccess` | Function to be executed if the task succeeds. |
-| `retries` | Specify the number of times that this step should be retried if it fails. If this is undefined, the task will either inherit the retries from the workflow or have no retries. If this is 0, the task will not be retried. By default, this is undefined. |
+| `retries` | Specify the number of times that this step should be retried if it fails. |
 
 The logic for the Task is defined in the `handler` - which can be defined as a function, or a path to a function. The `handler` will run once a worker picks picks up a Job that includes this task.
 
@@ -93,8 +93,6 @@ export default buildConfig({
 
 In addition to defining handlers as functions directly provided to your Payload config, you can also pass an _absolute path_ to where the handler is defined. If your task has large dependencies, and you are planning on executing your jobs in a separate process that has access to the filesystem, this could be a handy way to make sure that your Payload + Next.js app remains quick to compile and has minimal dependencies.
 
-Keep in mind that this is an advanced feature that may require a sophisticated build pipeline, especially when using it in production or within Next.js, e.g. by calling opening the `/api/payload-jobs/run` endpoint. You will have to transpile the handler files separately and ensure they are available in the same location when the job is run. If you're using an endpoint to execute your jobs, it's recommended to define your handlers as functions directly in your Payload Config, or use import paths handlers outside of Next.js.
-
 In general, this is an advanced use case. Here's how this would look:
 
 `payload.config.ts:`

docs/jobs-queue/workflows.mdx

@@ -2,7 +2,7 @@
 title: Workflows
 label: Workflows
 order: 30
-desc: A Task is a distinct function declaration that can be run within Payload's Jobs Queue.
+desc: A Task is a distinct function declaration that can be run within Payload's Jobs Queue. 
 keywords: jobs queue, application framework, typescript, node, react, nextjs
 ---
 
@@ -25,12 +25,11 @@ To define a JS-based workflow, simply add a workflow to the `jobs.wokflows` arra
 | Option                      | Description                                                                      |
 | --------------------------- | -------------------------------------------------------------------------------- |
 | `slug` | Define a slug-based name for this workflow. This slug needs to be unique among both tasks and workflows.|
-| `handler`   | The function that should be responsible for running the workflow. You can either pass a string-based path to the workflow function file, or workflow job function itself. If you are using large dependencies within your workflow, you might prefer to pass the string path because that will avoid bundling large dependencies in your Next.js app. Passing a string path is an advanced feature that may require a sophisticated build pipeline in order to work.       |
+| `handler`   | The function that should be responsible for running the workflow. You can either pass a string-based path to the workflow function file, or workflow job function itself. If you are using large dependencies within your workflow, you might prefer to pass the string path because that will avoid bundling large dependencies in your Next.js app.         |
 | `inputSchema` | Define the input field schema - payload will generate a type for this schema. |
 | `interfaceName` | You can use interfaceName to change the name of the interface that is generated for this workflow. By default, this is "Workflow" + the capitalized workflow slug. |
 | `label` | Define a human-friendly label for this workflow. |
 | `queue` | Optionally, define the queue name that this workflow should be tied to. Defaults to "default". |
-| `retries` | You can define `retries` on the workflow level, which will enforce that the workflow can only fail up to that number of retries. If a task does not have retries specified, it will inherit the retry count as specified on the workflow. You can specify `0` as `workflow` retries, which will disregard all `task` retry specifications and fail the entire workflow on any task failure. You can leave `workflow` retries as undefined, in which case, the workflow will respect what each task dictates as their own retry count. By default this is undefined, meaning workflows retries are defined by their tasks |
 
 Example:
 

docs/lexical/converters.mdx

@@ -6,67 +6,14 @@ desc: Conversion between lexical, markdown and html
 keywords: lexical, rich text, editor, headless cms, convert, html, mdx, markdown, md, conversion, export
 ---
 
-Lexical saves data in JSON - this is great for storage and flexibility and allows you to easily to convert it to other formats like JSX, HTML or Markdown.
-
-## Lexical => JSX
-
-If you have a React-based frontend, converting lexical to JSX is the recommended way to render rich text content in your frontend. To do that, import the `RichText` component from `@payloadcms/richtext-lexical/react` and pass the lexical content to it:
-
-```tsx
-import React from 'react'
-import { RichText } from '@payloadcms/richtext-lexical/react'
-
-export const MyComponent = ({ lexicalData }) => {
-  return (
-    <RichText data={lexicalData} />
-  )
-}
-```
-
-The `RichText` component will come with the most common serializers built-in, though you can also pass in your own serializers if you need to.
-
-<Banner type="default">
-  The JSX converter expects the input data to be fully populated. When fetching data, ensure the `depth` setting is high enough, to ensure that lexical nodes such as uploads are populated.
-</Banner>
-
-### Converting Lexical Blocks to JSX
-
-In order to convert lexical blocks or inline blocks to JSX, you will have to pass the converter for your block to the RichText component. This converter is not included by default, as Payload doesn't know how to render your custom blocks.
-
-```tsx
-import React from 'react'
-import {
-  type JSXConvertersFunction,
-  RichText,
-} from '@payloadcms/richtext-lexical/react'
-import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
-
-const jsxConverters: JSXConvertersFunction = ({ defaultConverters }) => ({
-  ...defaultConverters,
-  blocks: {
-    // myTextBlock is the slug of the block
-    myTextBlock: ({ node }) => <div style={{ backgroundColor: 'red' }}>{node.fields.text}</div>,
-  },
-})
-
-export const MyComponent = ({ lexicalData }) => {
-  return (
-    <RichText
-      converters={jsxConverters}
-      data={lexicalData.lexicalWithBlocks as SerializedEditorState}
-    />
-  )
-}
-```
-
 ## Lexical => HTML
 
-If you don't have a React-based frontend, or if you need to send the content to a third-party service, you can convert lexical to HTML. There are two ways to do this:
+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 any server** Convert JSON to HTML on-demand on the server.
 
-In both cases, the conversion needs to happen on a server, as the HTML converter will automatically fetch data for nodes that require it (e.g. uploads and internal links). The editor comes with built-in HTML serializers, simplifying the process of converting JSON to HTML.
+The editor comes with built-in HTML serializers, simplifying the process of converting JSON to HTML.
 
 ### Outputting HTML from the Collection
 

docs/live-preview/overview.mdx

@@ -52,7 +52,7 @@ _\* An asterisk denotes that a property is required._
 
 ### URL
 
-The `url` property resolves to a string that points to your front-end application. This value is used as the `src` attribute of the iframe rendering your front-end. Once loaded, the Admin Panel will communicate directly with your app through `window.postMessage` events.
+The `url` property is a string that points to your front-end application. This value is used as the `src` attribute of the iframe rendering your front-end. Once loaded, the Admin Panel will communicate directly with your app through `window.postMessage` events.
 
 To set the URL, use the `admin.livePreview.url` property in your [Payload Config](../configuration/overview):
 
@@ -105,16 +105,8 @@ The following arguments are provided to the `url` function:
 | Path               | Description                                                                                                       |
 | ------------------ | ----------------------------------------------------------------------------------------------------------------- |
 | **`data`**         | The data of the Document being edited. This includes changes that have not yet been saved.                        |
+| **`documentInfo`** | Information about the Document being edited like collection slug. [More details](../admin/hooks#usedocumentinfo). |
 | **`locale`**       | The locale currently being edited (if applicable). [More details](../configuration/localization).                 |
-| **`collectionConfig`** | The Collection Admin Config of the Document being edited. [More details](../admin/collections).                 |
-| **`globalConfig`** | The Global Admin Config of the Document being edited. [More details](../admin/globals).                          |
-| **`req`**          | The Payload Request object.  |
-
-If your application requires a fully qualified URL, such as within deploying to Vercel Preview Deployments, you can use the `req` property to build this URL:
-
-```ts
-url: (doc, { req }) => `${req.protocol}//${req.host}/${doc.slug}` // highlight-line
-```
 
 ### Breakpoints
 

docs/local-api/overview.mdx

@@ -131,9 +131,6 @@ const post = await payload.create({
   // Alternatively, you can directly pass a File,
   // if file is provided, filePath will be omitted
   file: uploadedFile,
-
-  // If you want to create a document that is a duplicate of another document
-  duplicateFromID: 'document-id-to-duplicate',
 })
 ```
 
@@ -307,27 +304,6 @@ const result = await payload.delete({
 If a collection has [`Authentication`](/docs/authentication/overview) enabled, additional Local API operations will be
 available:
 
-### Auth
-
-```js
-// If you're using Next.js, you'll have to import headers from next/headers, like so:
-// import { headers as nextHeaders } from 'next/headers'
-
-// you'll also have to await headers inside your function, or component, like so:
-// const headers = await nextHeaders()
-
-// If you're using payload outside of Next.js, you'll have to provide headers accordingly.
-
-// result will be formatted as follows:
-// {
-//    permissions: { ... }, // object containing current user's permissions
-//    user: { ... }, // currently logged in user's document
-//    responseHeaders: { ... } // returned headers from the response
-// }
-
-const result = await payload.auth({headers})
-```
-
 ### Login
 
 ```js

docs/migration-guide/overview.mdx

@@ -10,8 +10,6 @@ keywords: local api, config, configuration, documentation, Content Management Sy
 
 Payload 3.0 completely replatforms the Admin Panel from a React Router single-page application onto the Next.js App Router with full support for React Server Components. This change completely separates Payload "core" from its rendering and HTTP layers, making it truly Node-safe and portable.
 
-If you are upgrading from a _previous beta_, please see the [Upgrade From Previous Beta](#upgrade-from-previous-beta) section.
-
 ## What has changed?
 
 The core logic and principles of Payload remain the same from 2.0 to 3.0, with the majority of changes affecting specifically the HTTP layer and the Admin Panel, which is now built upon Next.js. With this change, your entire application can be served within a single repo, with Payload endpoints are now opened within your own Next.js application, directly alongside your frontend. Payload is still headless, you will still be able to leverage it completely headlessly just as you do now with Sveltekit, etc. All Payload APIs remain exactly the same (with a few new features), and the Payload Config is generally the same, with the breaking changes detailed below.
@@ -28,7 +26,6 @@ All breaking changes are listed below. If you encounter changes that are not exp
 - [Types](#types)
 - [Email Adapters](#email-adapters)
 - [Plugins](#plugins)
-- [Upgrade From Previous Beta](#upgrade-from-previous-beta)
 
 ## Installation
 
@@ -40,7 +37,7 @@ Payload 3.0 requires a set of auto-generated files that you will need to bring i
 
 For more details, see the [Documentation](https://payloadcms.com/docs/getting-started/installation).
 
-1. **Install new dependencies of Payload, Next.js and React**:
+1. **Install new dependencies of payload, next.js and react**:
 
     Refer to the package.json file made in the create-payload-app, including peerDependencies, devDependencies, and dependencies. The core package and plugins require all versions to be synced. Previously, on 2.x it was possible to be running the latest version of payload 2.x with an older version of db-mongodb for example. This is no longer the case.
 
@@ -412,7 +409,7 @@ For more details, see the [Documentation](https://payloadcms.com/docs/getting-st
       }
     })
     ```
-1. The `./src/public` directory is now located directly at root level `./public` [see Next.js docs for details](https://nextjs.org/docs/pages/building-your-application/optimizing/static-assets)
+1. The `./src/public` directory is now located directly at root level `./public` [see nextJS docs for details](https://nextjs.org/docs/pages/building-your-application/optimizing/static-assets)
 
 ## Custom Components
 
@@ -1103,9 +1100,3 @@ plugins: [
 ## `@payloadcms/richtext-lexical`
 
 If you have custom features for `@payloadcms/richtext-lexical` you will need to migrate your code to the new API. Read more about the new API in the [documentation](https://payloadcms.com/docs/lexical/building-custom-features).
-
-## Upgrade from previous beta
-
-Reference this [community-made site](https://payload-releases-filter.vercel.app/?version=3&from=152429656&to=188243150&sort=asc&breaking=on). Set your version, sort by oldest first, enable breaking changes only.
-
-Then go through each one of the breaking changes and make the adjustments. You can optionally reference the [blank template](https://github.com/payloadcms/payload/tree/main/templates/blank) for how things should end up.

docs/plugins/build-your-own.mdx

@@ -84,7 +84,7 @@ cd dev
 npx create-payload-app@latest
 ```
 
-If you're using the plugin template, the dev folder is built out for you and the `samplePlugin` has already been installed in `dev/payload.config.ts`.
+If you're using the plugin template, the dev folder is built out for you and the `samplePlugin` has already been installed in `dev/payload.config()`.
 
 ```
   plugins: [
@@ -95,11 +95,11 @@ If you're using the plugin template, the dev folder is built out for you an
   ]
 ```
 
-You can add to the `dev/payload.config.ts` and build out the dev project as needed to test your plugin.
+You can add to the `dev/payload.config` and build out the dev project as needed to test your plugin.
 
 When you're ready to start development, navigate into this folder with `cd dev`
 
-And then start the project with `pnpm dev` and pull up `http://localhost:3000` in your browser.
+And then start the project with `yarn dev` and pull up `http://localhost:3000` in your browser.
 
 ## Testing
 
@@ -112,7 +112,7 @@ Jest organizes tests into test suites and cases. We recommend creating tests bas
 The plugin template provides a stubbed out test suite at `dev/plugin.spec.ts` which is ready to go - just add in your own test conditions and you're all set!
 
 ```
-let payload: Payload
+import payload from 'payload'
 
 describe('Plugin tests', () => {
   // Example test to check for seeded data
@@ -245,7 +245,7 @@ config.hooks = {
 ```
 
 ### Extending functions
-Function properties cannot use spread syntax. The way to extend them is to execute the existing function if it exists and then run your additional functionality.
+Function properties cannot use spread syntax. The way to extend them is to execute the existing function if it exists and then run your additional functionality. 
 
 Here is an example extending the `onInit` property:
 
@@ -285,11 +285,11 @@ For a better user experience, provide a way to disable the plugin without uninst
 
 ### Include tests in your GitHub CI workflow
 
-If you've configured tests for your package, integrate them into your workflow to run the tests each time you commit to the plugin repository. Learn more about [how to configure tests into your GitHub CI workflow.](https://docs.github.com/en/actions/use-cases-and-examples/building-and-testing/building-and-testing-nodejs)
+If you've configured tests for your package, integrate them into your workflow to run the tests each time you commit to the plugin repository. Learn more about [how to configure tests into your GitHub CI workflow.](https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs)
 
-### Publish your finished plugin to npm
+### Publish your finished plugin to NPM
 
-The best way to share and allow others to use your plugin once it is complete is to publish an npm package. This process is straightforward and well documented, find out more about [creating and publishing a npm package here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).
+The best way to share and allow others to use your plugin once it is complete is to publish an NPM package. This process is straightforward and well documented, find out more about [creating and publishing a NPM package here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).
 
 ### Add payload-plugin topic tag
 

docs/plugins/form-builder.mdx

@@ -6,7 +6,7 @@ desc: Easily build and manage forms from the Admin Panel. Send dynamic, personal
 keywords: plugins, plugin, form, forms, form builder
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-form-builder)](https://www.npmjs.com/package/@payloadcms/plugin-form-builder)
+[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-form-builder)](https://www.npmjs.com/package/@payloadcms/plugin-form-builder)
 
 This plugin allows you to build and manage custom forms directly within the [Admin Panel](../admin/overview). Instead of hard-coding a new form into your website or application every time you need one, admins can simply define the schema for each form they need on-the-fly, and your front-end can map over this schema, render its own UI components, and match your brand's design system.
 
@@ -33,7 +33,7 @@ Forms can be as simple or complex as you need, from a basic contact form, to a m
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
+Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
 
 ```bash
 pnpm add @payloadcms/plugin-form-builder
@@ -72,7 +72,7 @@ The `fields` property is an object of field types to allow your admin editors to
 
 ```ts
 // payload.config.ts
-formBuilderPlugin({
+formBuilder({
   // ...
   fields: {
     text: true,
@@ -95,7 +95,7 @@ The `redirectRelationships` property is an array of collection slugs that, when
 
 ```ts
 // payload.config.ts
-formBuilderPlugin({
+formBuilder({
   // ...
   redirectRelationships: ['pages'],
 })
@@ -107,7 +107,7 @@ The `beforeEmail` property is a [beforeChange](https://payloadcms.com/docs/hooks
 
 ```ts
 // payload.config.ts
-formBuilderPlugin({
+formBuilder({
   // ...
   beforeEmail: (emailsToSend, beforeChangeParams) => {
     // modify the emails in any way before they are sent
@@ -142,7 +142,7 @@ Provide a fallback for the email address to send form submissions to. If the ema
 
 ```ts
 // payload.config.ts
-formBuilderPlugin({
+formBuilder({
   // ...
   defaultToEmail: 'test@example.com',
 })
@@ -160,7 +160,7 @@ Good to know: The form collection is publicly available to read by default. The
 
 ```ts
 // payload.config.ts
-formBuilderPlugin({
+formBuilder({
   // ...
   formOverrides: {
     slug: 'contact-forms',
@@ -196,7 +196,7 @@ Override anything on the `form-submissions` collection by sending a [Payload Col
 
 ```ts
 // payload.config.ts
-formBuilderPlugin({
+formBuilder({
   // ...
   formSubmissionOverrides: {
     slug: 'leads',
@@ -228,7 +228,7 @@ Then in your plugin's config:
 
 ```ts
 // payload.config.ts
-formBuilderPlugin({
+formBuilder({
   // ...
   handlePayment: async ({ form, submissionData }) => {
     // first calculate the price
@@ -396,7 +396,7 @@ Then merging it into your own custom field:
 
 ```ts
 // payload.config.ts
-formBuilderPlugin({
+formBuilder({
   // ...
   fields: {
     text: {

docs/plugins/nested-docs.mdx

@@ -6,7 +6,7 @@ desc: Nested documents in a parent, child, and sibling relationship.
 keywords: plugins, nested, documents, parent, child, sibling, relationship
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-nested-docs)](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs)
+[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-nested-docs)](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs)
 
 This plugin allows you to easily nest the documents of your application inside of one another. It does so by adding a
 new `parent` field onto each of your documents that, when selected, attaches itself to the parent's tree. When you edit
@@ -44,7 +44,8 @@ but different parents.
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
+Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com),
+or [PNPM](https://pnpm.io):
 
 ```bash
   pnpm add @payloadcms/plugin-nested-docs
@@ -119,7 +120,7 @@ You can also pass a function to dynamically set the `label` of your breadcrumb.
 
 ```ts
 // payload.config.ts
-nestedDocsPlugin({
+nestedDocs({
   //...
   generateLabel: (_, doc) => doc.title, // NOTE: 'title' is a hypothetical field
 })
@@ -140,7 +141,7 @@ that point, like `/about-us/company/our-team`.
 
 ```ts
 // payload.config.ts
-nestedDocsPlugin({
+nestedDocs({
   //...
   generateURL: (docs) => docs.reduce((url, doc) => `${url}/${doc.slug}`, ''), // NOTE: 'slug' is a hypothetical field
 })

docs/plugins/redirects.mdx

@@ -6,7 +6,7 @@ desc: Automatically create redirects for your Payload application
 keywords: plugins, redirects, redirect, plugin, payload, cms, seo, indexing, search, search engine
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-redirects)](https://www.npmjs.com/package/@payloadcms/plugin-redirects)
+[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-redirects)](https://www.npmjs.com/package/@payloadcms/plugin-redirects)
 
 This plugin allows you to easily manage redirects for your application from within your [Admin Panel](../admin/overview). It does so by adding a `redirects` collection to your config that allows you specify a redirect from one URL to another. Your front-end application can use this data to automatically redirect users to the correct page using proper HTTP status codes. This is useful for SEO, indexing, and search engine ranking when re-platforming or when changing your URL structure.
 
@@ -29,7 +29,7 @@ For example, if you have a page at `/about` and you want to change it to `/about
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
+Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
 
 ```bash
   pnpm add @payloadcms/plugin-redirects

docs/plugins/search.mdx

@@ -6,7 +6,7 @@ desc: Generates records of your documents that are extremely fast to search on.
 keywords: plugins, search, search plugin, search engine, search index, search results, search bar, search box, search field, search form, search input
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-search)](https://www.npmjs.com/package/@payloadcms/plugin-search)
+[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-search)](https://www.npmjs.com/package/@payloadcms/plugin-search)
 
 This plugin generates records of your documents that are extremely fast to search on. It does so by creating a new `search` collection that is indexed in the database then saving a static copy of each of your documents using only search-critical data. Search records are automatically created, synced, and deleted behind-the-scenes as you manage your application's documents.
 
@@ -33,11 +33,10 @@ This plugin is a great way to implement a fast, immersive search experience such
 - Allows you to query search results using first-party Payload APIs
 - Allows you to query documents without triggering any of their underlying hooks
 - Allows you to easily prioritize search results by collection or document
-- Allows you to reindex search results by collection on demand
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
+Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
 
 ```bash
   pnpm add @payloadcms/plugin-search
@@ -82,7 +81,7 @@ export default config
 
 The `collections` property is an array of collection slugs to enable syncing to search. Enabled collections receive a `beforeChange` and `afterDelete` hook that creates, updates, and deletes its respective search record as it changes over time.
 
-#### `localize`
+### `localize`
 
 By default, the search plugin will add `localization: true` to the `title` field of the newly added `search` collection if you have localization enabled. If you would like to disable this behavior, you can set this to `false`.
 
@@ -160,14 +159,6 @@ When `syncDrafts` is true, draft documents will be synced to search. This is fal
 
 If true, will delete documents from search whose status changes to draft. This is true by default. You must have [Payload Drafts](https://payloadcms.com/docs/versions/drafts) enabled for this to apply.
 
-#### `reindexBatchSize`
-
-A number that, when specified, will be used as the value to determine how many search documents to fetch for reindexing at a time in each batch. If not set, this will default to `50`.
-
-### Collection reindexing
-
-Collection reindexing allows you to recreate search documents from your search-enabled collections on demand. This is useful if you have existing documents that don't already have search indexes, commonly when adding `plugin-search` to an existing project. To get started, navigate to your search collection and click the pill in the top right actions slot of the list view labelled `Reindex`. This will open a popup with options to select one of your search-enabled collections, or all, for reindexing.
-
 ## TypeScript
 
 All types can be directly imported:

docs/plugins/sentry.mdx

@@ -6,7 +6,7 @@ desc: Integrate Sentry error tracking into your Payload application
 keywords: plugins, sentry, error, tracking, monitoring, logging, bug, reporting, performance
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-sentry)](https://www.npmjs.com/package/@payloadcms/plugin-sentry)
+[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-sentry)](https://www.npmjs.com/package/@payloadcms/plugin-sentry)
 
 This plugin allows you to integrate [Sentry](https://sentry.io/) seamlessly with your [Payload](https://github.com/payloadcms/payload) application.
 
@@ -36,7 +36,7 @@ This multi-faceted software offers a range of features that will help you manage
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
+Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
 
 ```bash
   pnpm add @payloadcms/plugin-sentry

docs/plugins/seo.mdx

@@ -6,7 +6,7 @@ desc: Manage SEO metadata from your Payload admin
 keywords: plugins, seo, meta, search, engine, ranking, google
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-seo)](https://www.npmjs.com/package/@payloadcms/plugin-seo)
+[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-seo)](https://www.npmjs.com/package/@payloadcms/plugin-seo)
 
 This plugin allows you to easily manage SEO metadata for your application from within your [Admin Panel](../admin/overview). When enabled on your [Collections](../configuration/collections) and [Globals](../configuration/globals), it adds a new `meta` field group containing `title`, `description`, and `image` by default. Your front-end application can then use this data to render meta tags however your application requires. For example, you would inject a `title` tag into the `<head>` of your page using `meta.title` as its content.
 
@@ -34,7 +34,7 @@ To help you visualize what your page might look like in a search engine, a previ
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
+Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
 
 ```bash
   pnpm add @payloadcms/plugin-seo
@@ -277,7 +277,7 @@ Tip: You can override the length rules by changing the minLength and maxLength p
 All types can be directly imported:
 
 ```ts
-import type {
+import {
   PluginConfig,
   GenerateTitle,
   GenerateDescription
@@ -288,9 +288,9 @@ import type {
 You can then pass the collections from your generated Payload types into the generation types, for example:
 
 ```ts
-import type { Page } from './payload-types.ts';
+import { Page } from './payload-types.ts';
 
-import type { GenerateTitle } from '@payloadcms/plugin-seo/types';
+import { GenerateTitle } from '@payloadcms/plugin-seo/types';
 
 const generateTitle: GenerateTitle<Page> = async ({ doc, locale }) => {
   return `Website.com — ${doc?.title}`

docs/plugins/stripe.mdx

@@ -6,7 +6,7 @@ desc: Easily accept payments with Stripe
 keywords: plugins, stripe, payments, ecommerce
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-stripe)](https://www.npmjs.com/package/@payloadcms/plugin-stripe)
+[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-stripe)](https://www.npmjs.com/package/@payloadcms/plugin-stripe)
 
 With this plugin you can easily integrate [Stripe](https://stripe.com) into Payload. Simply provide your Stripe credentials and this plugin will open up a two-way communication channel between the two platforms. This enables you to easily sync data back and forth, as well as proxy the Stripe REST API through Payload's [Access Control](../access-control/overview). Use this plugin to completely offload billing to Stripe and retain full control over your application's data.
 
@@ -36,7 +36,7 @@ The beauty of this plugin is the entirety of your application's content and busi
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
+Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
 
 ```bash
   pnpm add @payloadcms/plugin-stripe

docs/production/deployment.mdx

@@ -160,19 +160,7 @@ Follow the docs to configure any one of these storage providers. For local devel
 This is an example of a multi-stage docker build of Payload for production. Ensure you are setting your environment
 variables on deployment, like `PAYLOAD_SECRET`, `PAYLOAD_CONFIG_PATH`, and `DATABASE_URI` if needed.
 
-In your Next.js config, set the `output` property `standalone`.
-
-```js
-// next.config.js
-const nextConfig = {
-  output: 'standalone',
-}
-```
-
-Dockerfile
-
 ```dockerfile
-# Dockerfile
 # From https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
 
 FROM node:18-alpine AS base

docs/queries/depth.mdx

@@ -43,9 +43,7 @@ But with a `depth` of `1`, the response might look like this:
 To specify depth in the [Local API](../local-api/overview), you can use the `depth` option in your query:
 
 ```ts
-import type { Payload } from 'payload'
-
-const getPosts = async (payload: Payload) => {
+const getPosts = async () => {
   const posts = await payload.find({
     collection: 'posts',
     depth: 2, // highlight-line

docs/queries/overview.mdx

@@ -19,9 +19,7 @@ Each of these APIs share the same underlying querying language, and fully suppor
 To query your Documents, you can send any number of [Operators](#operators) through your request:
 
 ```ts
-import type { Where } from 'payload'
-
-const query: Where = {
+const query = {
   color: {
     equals: 'blue',
   },
@@ -69,9 +67,7 @@ In addition to defining simple queries, you can join multiple queries together u
 To join queries, use the `and` or `or` keys in your query object:
 
 ```ts
-import type { Where } from 'payload'
-
-const query: Where = {
+const query = {
   or: [ // highlight-line
     {
       color: {
@@ -103,9 +99,7 @@ Written in plain English, if the above query were passed to a `find` operation,
 When working with nested properties, which can happen when using relational fields, it is possible to use the dot notation to access the nested property. For example, when working with a `Song` collection that has a `artists` field which is related to an `Artists` collection using the `name: 'artists'`. You can access a property within the collection `Artists` like so:
 
 ```js
-import type { Where } from 'payload'
-
-const query: Where = {
+const query = {
   'artists.featured': {
     // nested property name to filter on
     exists: true, // operator to use and boolean value that needs to be true
@@ -122,9 +116,7 @@ Writing queries in Payload is simple and consistent across all APIs, with only m
 The [Local API](../local-api/overview) supports the `find` operation that accepts a raw query object:
 
 ```ts
-import type { Payload } from 'payload'
-
-const getPosts = async (payload: Payload) => {
+const getPosts = async () => {
   const posts = await payload.find({
     collection: 'posts',
     where: {
@@ -165,20 +157,19 @@ For this reason, we recommend to use the extremely helpful and ubiquitous [`qs-e
 
 ```ts
 import { stringify } from 'qs-esm'
-import type { Where } from 'payload'
 
-const query: Where = {
+const query = {
   color: {
     equals: 'mint',
   },
   // This query could be much more complex
-  // and qs-esm would handle it beautifully
+  // and QS would handle it beautifully
 }
 
 const getPosts = async () => {
   const stringifiedQuery = stringify(
     {
-      where: query, // ensure that `qs-esm` adds the `where` property, too!
+      where: query, // ensure that `qs` adds the `where` property, too!
     },
     { addQueryPrefix: true },
   )

docs/queries/select.mdx

@@ -15,10 +15,8 @@ This is where Payload's `select` feature comes in. Here, you can define exactly
 To specify `select` in the [Local API](../local-api/overview), you can use the `select` option in your query:
 
 ```ts
-import type { Payload } from 'payload'
-
 // Include mode
-const getPosts = async (payload: Payload) => {
+const getPosts = async () => {
   const posts = await payload.find({
     collection: 'posts',
     select: {
@@ -36,7 +34,7 @@ const getPosts = async (payload: Payload) => {
 }
 
 // Exclude mode
-const getPosts = async (payload: Payload) => {
+const getPosts = async () => {
   const posts = await payload.find({
     collection: 'posts',
     // Select everything except for array and group.number
@@ -75,9 +73,8 @@ For this reason, we recommend to use the extremely helpful and ubiquitous [`qs-e
 
 ```ts
 import { stringify } from 'qs-esm'
-import type { Where } from 'payload'
 
-const select: Where = {
+const select = {
   text: true,
   group: {
     number: true
@@ -119,6 +116,9 @@ Loading all of the page content, its related links, and everything else is going
 ```ts
 import type { CollectionConfig } from 'payload'
 
+import { lexicalEditor, LinkFeature } from '@payloadcms/richtext-lexical'
+import { slateEditor } from '@payloadcms/richtext-slate'
+
 // The TSlug generic can be passed to have type safety for `defaultPopulate`.
 // If avoided, the `defaultPopulate` type resolves to `SelectType`.
 export const Pages: CollectionConfig<'pages'> = {
@@ -144,9 +144,7 @@ Setting `defaultPopulate` will enforce that each time Payload performs a "popula
 **Local API:**
 
 ```ts
-import type { Payload } from 'payload'
-
-const getPosts = async (payload: Payload) => {
+const getPosts = async () => {
   const posts = await payload.find({
     collection: 'posts',
     populate: {

docs/queries/sort.mdx

@@ -20,9 +20,7 @@ Because sorting is handled by the database, the field cannot be a [Virtual Field
 To sort Documents in the [Local API](../local-api/overview), you can use the `sort` option in your query:
 
 ```ts
-import type { Payload } from 'payload'
-
-const getPosts = async (payload: Payload) => {
+const getPosts = async () => {
   const posts = await payload.find({
     collection: 'posts',
     sort: '-createdAt', // highlight-line
@@ -35,9 +33,7 @@ const getPosts = async (payload: Payload) => {
 To sort by multiple fields, you can use the `sort` option with fields in an array:
 
 ```ts
-import type { Payload } from 'payload'
-
-const getPosts = async (payload: Payload) => {
+const getPosts = async () => {
   const posts = await payload.find({
     collection: 'posts',
     sort: ['priority', '-createdAt'], // highlight-line

docs/typescript/generating-types.mdx

@@ -213,7 +213,7 @@ export interface Collection1 {
 
 Now that your types have been generated, payloads local API will now be typed. It is common for users to want to use this in their frontend code, we recommend generating them with Payload and then copying the file over to your frontend codebase. This is the simplest way to get your types into your frontend codebase.
 
-### Adding an npm script
+### Adding an NPM script
 
 <Banner type="warning">
   <strong>Important</strong>
@@ -221,9 +221,9 @@ Now that your types have been generated, payloads local API will now be typed. I
   Payload needs to be able to find your config to generate your types.
 </Banner>
 
-Payload will automatically try and locate your config, but might not always be able to find it. For example, if you are working in a `/src` directory or similar, you need to tell Payload where to find your config manually by using an environment variable. If this applies to you, you can create an npm script to make generating your types easier.
+Payload will automatically try and locate your config, but might not always be able to find it. For example, if you are working in a `/src` directory or similar, you need to tell Payload where to find your config manually by using an environment variable. If this applies to you, you can create an NPM script to make generating your types easier.
 
-To add an npm script to generate your types and show Payload where to find your config, open your `package.json` and update the `scripts` property to the following:
+To add an NPM script to generate your types and show Payload where to find your config, open your `package.json` and update the `scripts` property to the following:
 
 ```
 {
@@ -233,4 +233,4 @@ To add an npm script to generate your types and show Payload where to find your
 }
 ```
 
-Now you can run `pnpm generate:types` to easily generate your types.
+Now you can run `yarn generate:types` to easily generate your types.

eslint.config.js

@@ -42,7 +42,6 @@ export const rootEslintConfig = [
       'test/live-preview/next-app',
       'packages/**/*.spec.ts',
       'templates/**',
-      'examples/**',
     ],
   },
   {

examples/auth/next-app/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_PAYLOAD_URL=http://localhost:3000

examples/auth/next-app/.eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ['plugin:@next/next/recommended', '@payloadcms'],
+  rules: {
+    'import/extensions': 'off',
+  },
+}

examples/auth/next-app/.gitignore

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

examples/auth/next-app/README.md

@@ -0,0 +1,44 @@
+# Payload Auth Example Front-End
+
+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
+
+First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/main/examples/auth/payload). If you have not done so already, clone it down and follow the setup instructions there. This will provide all the necessary APIs that your Next.js app requires for authentication.
+
+### Next.js
+
+1. Clone this repo
+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. `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.
+
+## Learn More
+
+To learn more about Payload and Next.js, take a look at the following resources:
+
+- [Payload Documentation](https://payloadcms.com/docs) - learn about Payload features and API.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Payload GitHub repository](https://github.com/payloadcms/payload) as well as [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deployment
+
+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. You could also combine this app into a [single Express server](https://github.com/payloadcms/payload/tree/main/examples/custom-server) and deploy in to [Payload Cloud](https://payloadcms.com/new/import).
+
+Check out our [Payload deployment documentation](https://payloadcms.com/docs/production/deployment) or the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more 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/next-app/app/_components/Button/index.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import React, { ElementType } from 'react'
+import Link from 'next/link'
+
+import classes from './index.module.scss'
+
+export type Props = {
+  label?: string
+  appearance?: 'default' | 'primary' | 'secondary'
+  el?: 'button' | 'link' | 'a'
+  onClick?: () => void
+  href?: string
+  newTab?: boolean
+  className?: string
+  type?: 'submit' | 'button'
+  disabled?: boolean
+  invert?: boolean
+}
+
+export const Button: React.FC<Props> = ({
+  el: elFromProps = 'link',
+  label,
+  newTab,
+  href,
+  appearance,
+  className: classNameFromProps,
+  onClick,
+  type = 'button',
+  disabled,
+  invert,
+}) => {
+  let el = elFromProps
+  const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
+
+  const className = [
+    classes.button,
+    classNameFromProps,
+    classes[`appearance--${appearance}`],
+    invert && classes[`${appearance}--invert`],
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const content = (
+    <div className={classes.content}>
+      <span className={classes.label}>{label}</span>
+    </div>
+  )
+
+  if (onClick || type === 'submit') el = 'button'
+
+  if (el === 'link') {
+    return (
+      <Link href={href || ''} className={className} {...newTabProps} onClick={onClick}>
+        {content}
+      </Link>
+    )
+  }
+
+  const Element: ElementType = el
+
+  return (
+    <Element
+      href={href}
+      className={className}
+      type={type}
+      {...newTabProps}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {content}
+    </Element>
+  )
+}

examples/auth/next-app/app/_components/Gutter/index.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, Ref } from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  left?: boolean
+  right?: boolean
+  className?: string
+  children: React.ReactNode
+  ref?: Ref<HTMLDivElement>
+}
+
+export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const { left = true, right = true, className, children } = props
+
+  return (
+    <div
+      ref={ref}
+      className={[
+        classes.gutter,
+        left && classes.gutterLeft,
+        right && classes.gutterRight,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  )
+})
+
+Gutter.displayName = 'Gutter'

examples/auth/next-app/app/_components/Header/Nav/index.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+
+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/next-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 classes from './index.module.scss'
+import { HeaderNav } from './Nav'
+
+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/ui/src/assets/payload-logo-light.svg"
+            />
+            <Image
+              alt="Payload Logo"
+              height={30}
+              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-logo-dark.svg"
+              width={150}
+            />
+          </picture>
+        </Link>
+        <HeaderNav />
+      </Gutter>
+    </header>
+  )
+}
+
+export default Header

examples/auth/next-app/app/_components/Input/index.tsx

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

examples/auth/next-app/app/_components/Message/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+export const Message: React.FC<{
+  message?: React.ReactNode
+  error?: React.ReactNode
+  success?: React.ReactNode
+  warning?: React.ReactNode
+  className?: string
+}> = ({ message, error, success, warning, className }) => {
+  const messageToRender = message || error || success || warning
+
+  if (messageToRender) {
+    return (
+      <div
+        className={[
+          classes.message,
+          className,
+          error && classes.error,
+          success && classes.success,
+          warning && classes.warning,
+          !error && !success && !warning && classes.default,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {messageToRender}
+      </div>
+    )
+  }
+  return null
+}

examples/auth/next-app/app/_components/RenderParams/index.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+import { Message } from '../Message'
+
+export const RenderParams: React.FC<{
+  params?: string[]
+  message?: string
+  className?: string
+}> = ({ params = ['error', 'message', 'success'], message, className }) => {
+  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/next-app/app/_components/RichText/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import serialize from './serialize'
+
+import classes from './index.module.scss'
+
+const RichText: React.FC<{ className?: string; content: any }> = ({ className, content }) => {
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div className={[classes.richText, className].filter(Boolean).join(' ')}>
+      {serialize(content)}
+    </div>
+  )
+}
+
+export default RichText

examples/auth/next-app/app/_components/RichText/serialize.tsx

@@ -0,0 +1,92 @@
+import React, { Fragment } from 'react'
+import escapeHTML from 'escape-html'
+import { Text } from 'slate'
+
+// eslint-disable-next-line no-use-before-define
+type Children = Leaf[]
+
+type Leaf = {
+  type: string
+  value?: {
+    url: string
+    alt: string
+  }
+  children: Children
+  url?: string
+  [key: string]: unknown
+}
+
+const serialize = (children: Children): React.ReactNode[] =>
+  children.map((node, i) => {
+    if (Text.isText(node)) {
+      let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />
+
+      if (node.bold) {
+        text = <strong key={i}>{text}</strong>
+      }
+
+      if (node.code) {
+        text = <code key={i}>{text}</code>
+      }
+
+      if (node.italic) {
+        text = <em key={i}>{text}</em>
+      }
+
+      if (node.underline) {
+        text = (
+          <span style={{ textDecoration: 'underline' }} key={i}>
+            {text}
+          </span>
+        )
+      }
+
+      if (node.strikethrough) {
+        text = (
+          <span style={{ textDecoration: 'line-through' }} key={i}>
+            {text}
+          </span>
+        )
+      }
+
+      return <Fragment key={i}>{text}</Fragment>
+    }
+
+    if (!node) {
+      return null
+    }
+
+    switch (node.type) {
+      case 'h1':
+        return <h1 key={i}>{serialize(node.children)}</h1>
+      case 'h2':
+        return <h2 key={i}>{serialize(node.children)}</h2>
+      case 'h3':
+        return <h3 key={i}>{serialize(node.children)}</h3>
+      case 'h4':
+        return <h4 key={i}>{serialize(node.children)}</h4>
+      case 'h5':
+        return <h5 key={i}>{serialize(node.children)}</h5>
+      case 'h6':
+        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>
+      case 'ol':
+        return <ol key={i}>{serialize(node.children)}</ol>
+      case 'li':
+        return <li key={i}>{serialize(node.children)}</li>
+      case 'link':
+        return (
+          <a href={escapeHTML(node.url)} key={i}>
+            {serialize(node.children)}
+          </a>
+        )
+
+      default:
+        return <p key={i}>{serialize(node.children)}</p>
+    }
+  })
+
+export default serialize

examples/auth/next-app/app/_providers/Auth/gql.ts

@@ -0,0 +1,34 @@
+export const USER = `
+  id
+  email
+  firstName
+  lastName
+`
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const gql = async (query: string): Promise<any> => {
+  try {
+    const res = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/graphql`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query,
+      }),
+    })
+
+    const { data, errors } = await res.json()
+
+    if (errors) {
+      throw new Error(errors[0].message)
+    }
+
+    if (res.ok && data) {
+      return data
+    }
+  } catch (e: unknown) {
+    throw new Error(e as string)
+  }
+}

examples/auth/next-app/app/_providers/Auth/index.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
+
+import { User } from '../../payload-types'
+import { gql, USER } from './gql'
+import { rest } from './rest'
+import { AuthContext, Create, ForgotPassword, Login, Logout, ResetPassword } from './types'
+
+const Context = createContext({} as AuthContext)
+
+export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' | 'gql' }> = ({
+  children,
+  api = 'rest',
+}) => {
+  const [user, setUser] = useState<User | null>()
+
+  const create = useCallback<Create>(
+    async (args) => {
+      if (api === 'rest') {
+        const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, args)
+        setUser(user)
+        return user
+      }
+
+      if (api === 'gql') {
+        const { createUser: user } = await gql(`mutation {
+        createUser(data: { email: "${args.email}", password: "${args.password}", firstName: "${args.firstName}", lastName: "${args.lastName}" }) {
+          ${USER}
+        }
+      }`)
+
+        setUser(user)
+        return user
+      }
+    },
+    [api],
+  )
+
+  const login = useCallback<Login>(
+    async (args) => {
+      if (api === 'rest') {
+        const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/login`, args)
+        setUser(user)
+        return user
+      }
+
+      if (api === 'gql') {
+        const { loginUser } = await gql(`mutation {
+        loginUser(email: "${args.email}", password: "${args.password}") {
+          user {
+            ${USER}
+          }
+          exp
+        }
+      }`)
+
+        setUser(loginUser?.user)
+        return loginUser?.user
+      }
+    },
+    [api],
+  )
+
+  const logout = useCallback<Logout>(async () => {
+    if (api === 'rest') {
+      await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/logout`)
+      setUser(null)
+      return
+    }
+
+    if (api === 'gql') {
+      await gql(`mutation {
+        logoutUser
+      }`)
+
+      setUser(null)
+    }
+  }, [api])
+
+  // On mount, get user and set
+  useEffect(() => {
+    const fetchMe = async () => {
+      if (api === 'rest') {
+        const user = await rest(
+          `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/me`,
+          {},
+          {
+            method: 'GET',
+          },
+        )
+        setUser(user)
+      }
+
+      if (api === 'gql') {
+        const { meUser } = await gql(`query {
+          meUser {
+            user {
+              ${USER}
+            }
+            exp
+          }
+        }`)
+
+        setUser(meUser.user)
+      }
+    }
+
+    fetchMe()
+  }, [api])
+
+  const forgotPassword = useCallback<ForgotPassword>(
+    async (args) => {
+      if (api === 'rest') {
+        const user = await rest(
+          `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
+          args,
+        )
+        setUser(user)
+        return user
+      }
+
+      if (api === 'gql') {
+        const { forgotPasswordUser } = await gql(`mutation {
+        forgotPasswordUser(email: "${args.email}")
+      }`)
+
+        return forgotPasswordUser
+      }
+    },
+    [api],
+  )
+
+  const resetPassword = useCallback<ResetPassword>(
+    async (args) => {
+      if (api === 'rest') {
+        const user = await rest(
+          `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,
+          args,
+        )
+        setUser(user)
+        return user
+      }
+
+      if (api === 'gql') {
+        const { resetPasswordUser } = await gql(`mutation {
+        resetPasswordUser(password: "${args.password}", token: "${args.token}") {
+          user {
+            ${USER}
+          }
+        }
+      }`)
+
+        setUser(resetPasswordUser.user)
+        return resetPasswordUser.user
+      }
+    },
+    [api],
+  )
+
+  return (
+    <Context.Provider
+      value={{
+        user,
+        setUser,
+        login,
+        logout,
+        create,
+        resetPassword,
+        forgotPassword,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  )
+}
+
+type UseAuth<T = User> = () => AuthContext // eslint-disable-line no-unused-vars
+
+export const useAuth: UseAuth = () => useContext(Context)

examples/auth/next-app/app/_providers/Auth/rest.ts

@@ -0,0 +1,34 @@
+import type { User } from '../../payload-types'
+
+export const rest = async (
+  url: string,
+  args?: any, // eslint-disable-line @typescript-eslint/no-explicit-any
+  options?: RequestInit,
+): Promise<User | null | undefined> => {
+  const method = options?.method || 'POST'
+
+  try {
+    const res = await fetch(url, {
+      method,
+      ...(method === 'POST' ? { body: JSON.stringify(args) } : {}),
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+      ...options,
+    })
+
+    const { errors, user } = await res.json()
+
+    if (errors) {
+      throw new Error(errors[0].message)
+    }
+
+    if (res.ok) {
+      return user
+    }
+  } catch (e: unknown) {
+    throw new Error(e as string)
+  }
+}

examples/auth/next-app/app/_providers/Auth/types.ts

@@ -0,0 +1,31 @@
+import type { User } from '../../payload-types'
+
+// eslint-disable-next-line no-unused-vars
+export type ResetPassword = (args: {
+  password: string
+  passwordConfirm: string
+  token: string
+}) => Promise<User>
+
+export type ForgotPassword = (args: { email: string }) => Promise<User> // eslint-disable-line no-unused-vars
+
+export type Create = (args: {
+  email: string
+  password: string
+  firstName: string
+  lastName: string
+}) => Promise<User> // eslint-disable-line no-unused-vars
+
+export type Login = (args: { email: string; password: string }) => Promise<User> // eslint-disable-line no-unused-vars
+
+export type Logout = () => Promise<void>
+
+export interface AuthContext {
+  user?: User | null
+  setUser: (user: User | null) => void // eslint-disable-line no-unused-vars
+  logout: Logout
+  login: Login
+  create: Create
+  resetPassword: ResetPassword
+  forgotPassword: ForgotPassword
+}

examples/auth/next-app/app/_utilities/getMeUser.ts

@@ -0,0 +1,41 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+import type { User } from '../payload-types'
+
+export const getMeUser = async (args?: {
+  nullUserRedirect?: string
+  validUserRedirect?: string
+}): Promise<{
+  user: User
+  token: string | undefined
+}> => {
+  const { nullUserRedirect, validUserRedirect } = args || {}
+  const cookieStore = cookies()
+  const token = cookieStore.get('payload-token')?.value
+
+  const meUserReq = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/me`, {
+    headers: {
+      Authorization: `JWT ${token}`,
+    },
+  })
+
+  const {
+    user,
+  }: {
+    user: User
+  } = await meUserReq.json()
+
+  if (validUserRedirect && meUserReq.ok && user) {
+    redirect(validUserRedirect)
+  }
+
+  if (nullUserRedirect && (!meUserReq.ok || !user)) {
+    redirect(nullUserRedirect)
+  }
+
+  return {
+    user,
+    token,
+  }
+}

examples/auth/next-app/app/account/AccountForm/index.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useRouter } from 'next/navigation'
+
+import { Button } from '../../_components/Button'
+import { Input } from '../../_components/Input'
+import { Message } from '../../_components/Message'
+import { useAuth } from '../../_providers/Auth'
+
+import classes from './index.module.scss'
+
+type FormData = {
+  email: string
+  name: string
+  password: string
+  passwordConfirm: string
+}
+
+export const AccountForm: React.FC = () => {
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+  const { user, setUser } = useAuth()
+  const [changePassword, setChangePassword] = useState(false)
+  const router = useRouter()
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isLoading },
+    reset,
+    watch,
+  } = useForm<FormData>()
+
+  const password = useRef({})
+  password.current = watch('password', '')
+
+  const onSubmit = useCallback(
+    async (data: FormData) => {
+      if (user) {
+        const response = await fetch(
+          `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/${user.id}`,
+          {
+            // Make sure to include cookies with fetch
+            credentials: 'include',
+            method: 'PATCH',
+            body: JSON.stringify(data),
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        )
+
+        if (response.ok) {
+          const json = await response.json()
+          setUser(json.doc)
+          setSuccess('Successfully updated account.')
+          setError('')
+          setChangePassword(false)
+          reset({
+            email: json.doc.email,
+            name: json.doc.name,
+            password: '',
+            passwordConfirm: '',
+          })
+        } else {
+          setError('There was a problem updating your account.')
+        }
+      }
+    },
+    [user, setUser, reset],
+  )
+
+  useEffect(() => {
+    if (user === null) {
+      router.push(`/login?unauthorized=account`)
+    }
+
+    // Once user is loaded, reset form to have default values
+    if (user) {
+      reset({
+        email: user.email,
+        password: '',
+        passwordConfirm: '',
+      })
+    }
+  }, [user, router, reset, changePassword])
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
+      <Message error={error} success={success} className={classes.message} />
+      {!changePassword ? (
+        <Fragment>
+          <p>
+            {'To change your password, '}
+            <button
+              type="button"
+              className={classes.changePassword}
+              onClick={() => setChangePassword(!changePassword)}
+            >
+              click here
+            </button>
+            .
+          </p>
+          <Input
+            name="email"
+            label="Email Address"
+            required
+            register={register}
+            error={errors.email}
+            type="email"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <p>
+            {'Change your password below, or '}
+            <button
+              type="button"
+              className={classes.changePassword}
+              onClick={() => setChangePassword(!changePassword)}
+            >
+              cancel
+            </button>
+            .
+          </p>
+          <Input
+            name="password"
+            type="password"
+            label="Password"
+            required
+            register={register}
+            error={errors.password}
+          />
+          <Input
+            name="passwordConfirm"
+            type="password"
+            label="Confirm Password"
+            required
+            register={register}
+            validate={(value) => value === password.current || 'The passwords do not match'}
+            error={errors.passwordConfirm}
+          />
+        </Fragment>
+      )}
+      <Button
+        type="submit"
+        className={classes.submit}
+        label={isLoading ? 'Processing' : changePassword ? 'Change password' : 'Update account'}
+        appearance="primary"
+      />
+    </form>
+  )
+}

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { Button } from '../_components/Button'
+import { Gutter } from '../_components/Gutter'
+import { RenderParams } from '../_components/RenderParams'
+import { getMeUser } from '../_utilities/getMeUser'
+import { AccountForm } from './AccountForm'
+
+import classes from './index.module.scss'
+
+export default async function Account() {
+  await getMeUser({
+    nullUserRedirect: `/login?error=${encodeURIComponent(
+      'You must be logged in to access your account.',
+    )}&redirect=${encodeURIComponent('/account')}`,
+  })
+
+  return (
+    <Gutter className={classes.account}>
+      <RenderParams className={classes.params} />
+      <h1>Account</h1>
+      <p>
+        {`This is your account dashboard. Here you can update your account information and more. To manage all users, `}
+        <Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
+          login to the admin dashboard
+        </Link>
+        {'.'}
+      </p>
+      <AccountForm />
+      <Button href="/logout" appearance="secondary" label="Log out" />
+    </Gutter>
+  )
+}

examples/auth/next-app/app/create-account/CreateAccountForm/index.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import React, { useCallback, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+import { Button } from '../../_components/Button'
+import { Input } from '../../_components/Input'
+import { Message } from '../../_components/Message'
+import { useAuth } from '../../_providers/Auth'
+
+import classes from './index.module.scss'
+
+type FormData = {
+  email: string
+  password: string
+  passwordConfirm: string
+}
+
+export const CreateAccountForm: React.FC = () => {
+  const searchParams = useSearchParams()
+  const allParams = searchParams.toString() ? `?${searchParams.toString()}` : ''
+  const { login } = useAuth()
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<FormData>()
+
+  const password = useRef({})
+  password.current = watch('password', '')
+
+  const onSubmit = useCallback(
+    async (data: FormData) => {
+      const response = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        const message = response.statusText || 'There was an error creating the account.'
+        setError(message)
+        return
+      }
+
+      const redirect = searchParams.get('redirect')
+
+      const timer = setTimeout(() => {
+        setLoading(true)
+      }, 1000)
+
+      try {
+        await login(data)
+        clearTimeout(timer)
+        if (redirect) router.push(redirect as string)
+        else router.push(`/account?success=${encodeURIComponent('Account created successfully')}`)
+      } catch (_) {
+        clearTimeout(timer)
+        setError('There was an error with the credentials provided. Please try again.')
+      }
+    },
+    [login, router, searchParams],
+  )
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
+      <p>
+        {`This is where new customers can signup and create a new account. To manage all users, `}
+        <Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
+          login to the admin dashboard
+        </Link>
+        {'.'}
+      </p>
+      <Message error={error} className={classes.message} />
+      <Input
+        name="email"
+        label="Email Address"
+        required
+        register={register}
+        error={errors.email}
+        type="email"
+      />
+      <Input
+        name="password"
+        type="password"
+        label="Password"
+        required
+        register={register}
+        error={errors.password}
+      />
+      <Input
+        name="passwordConfirm"
+        type="password"
+        label="Confirm Password"
+        required
+        register={register}
+        validate={(value) => value === password.current || 'The passwords do not match'}
+        error={errors.passwordConfirm}
+      />
+      <Button
+        type="submit"
+        className={classes.submit}
+        label={loading ? 'Processing' : 'Create Account'}
+        appearance="primary"
+      />
+      <div>
+        {'Already have an account? '}
+        <Link href={`/login${allParams}`}>Login</Link>
+      </div>
+    </form>
+  )
+}

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { Gutter } from '../_components/Gutter'
+import { RenderParams } from '../_components/RenderParams'
+import { getMeUser } from '../_utilities/getMeUser'
+import { CreateAccountForm } from './CreateAccountForm'
+
+import classes from './index.module.scss'
+
+export default async function CreateAccount() {
+  await getMeUser({
+    validUserRedirect: `/account?message=${encodeURIComponent(
+      'Cannot create a new account while logged in, please log out and try again.',
+    )}`,
+  })
+
+  return (
+    <Gutter className={classes.createAccount}>
+      <h1>Create Account</h1>
+      <RenderParams />
+      <CreateAccountForm />
+    </Gutter>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { Header } from './_components/Header'
+import { AuthProvider } from './_providers/Auth'
+
+import './_css/app.scss'
+
+export const metadata = {
+  title: 'Payload Auth + Next.js App Router Example',
+  description: 'An example of how to authenticate with Payload from a Next.js app.',
+}
+
+export default async function RootLayout(props: { children: React.ReactNode }) {
+  const { children } = props
+
+  return (
+    <html lang="en">
+      <body>
+        <AuthProvider
+          // To toggle between the REST and GraphQL APIs,
+          // change the `api` prop to either `rest` or `gql`
+          api="rest" // change this to `gql` to use the GraphQL API
+        >
+          <Header />
+          <main>{children}</main>
+        </AuthProvider>
+      </body>
+    </html>
+  )
+}

examples/auth/next-app/app/login/LoginForm/index.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import React, { useCallback, useRef } from 'react'
+import { useForm } from 'react-hook-form'
+import Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+import { Button } from '../../_components/Button'
+import { Input } from '../../_components/Input'
+import { Message } from '../../_components/Message'
+import { useAuth } from '../../_providers/Auth'
+
+import classes from './index.module.scss'
+
+type FormData = {
+  email: string
+  password: string
+}
+
+export const LoginForm: React.FC = () => {
+  const searchParams = useSearchParams()
+  const allParams = searchParams.toString() ? `?${searchParams.toString()}` : ''
+  const redirect = useRef(searchParams.get('redirect'))
+  const { login } = useAuth()
+  const router = useRouter()
+  const [error, setError] = React.useState<string | null>(null)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isLoading },
+  } = useForm<FormData>({
+    defaultValues: {
+      email: 'demo@payloadcms.com',
+      password: 'demo',
+    },
+  })
+
+  const onSubmit = useCallback(
+    async (data: FormData) => {
+      try {
+        await login(data)
+        if (redirect?.current) router.push(redirect.current as string)
+        else router.push('/account')
+      } catch (_) {
+        setError('There was an error with the credentials provided. Please try again.')
+      }
+    },
+    [login, router],
+  )
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
+      <p>
+        {'To log in, use the email '}
+        <b>demo@payloadcms.com</b>
+        {' with the password '}
+        <b>demo</b>
+        {'. To manage your users, '}
+        <Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
+          login to the admin dashboard
+        </Link>
+        .
+      </p>
+      <Message error={error} className={classes.message} />
+      <Input
+        name="email"
+        label="Email Address"
+        required
+        register={register}
+        error={errors.email}
+        type="email"
+      />
+      <Input
+        name="password"
+        type="password"
+        label="Password"
+        required
+        register={register}
+        error={errors.password}
+      />
+      <Button
+        type="submit"
+        disabled={isLoading}
+        className={classes.submit}
+        label={isLoading ? 'Processing' : 'Login'}
+        appearance="primary"
+      />
+      <div>
+        <Link href={`/create-account${allParams}`}>Create an account</Link>
+        <br />
+        <Link href={`/recover-password${allParams}`}>Recover your password</Link>
+      </div>
+    </form>
+  )
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { Gutter } from '../_components/Gutter'
+import { RenderParams } from '../_components/RenderParams'
+import { getMeUser } from '../_utilities/getMeUser'
+import { LoginForm } from './LoginForm'
+
+import classes from './index.module.scss'
+
+export default async function Login() {
+  await getMeUser({
+    validUserRedirect: `/account?message=${encodeURIComponent('You are already logged in.')}`,
+  })
+
+  return (
+    <Gutter className={classes.login}>
+      <RenderParams className={classes.params} />
+      <h1>Log in</h1>
+      <LoginForm />
+    </Gutter>
+  )
+}