Как подключить Payload CMS к существующему проекту Next.js

Полностью рабочая и проверенная инструкция по подключению Payload CMS к существующему проекту Next.js (App Router).

1. Создаём в папке app существующего проекта две подпапки (frontend) и (payload).

2. Переносим исходники существующего проекта из папки app в подпапку (frontend).

3. Копируем исходники Payload CMS в подпапку (payload). Исходники Payload CMS необходимо скопировать из папки (payload) пустого шаблона Payload CMS на GitHub по ссылке.

4. Копируем файлы payload.config.ts и payload-types.ts и папку collections из пустого шаблона Payload CMS на GitHub по ссылке выше на один уровень (рядом) с папкой app.

В результате должна получиться примерно такая структура исходников:

src
├─ app
├─── (frontend)
├───── // Исходники существующего проекта
├─── (payload)
├───── // Исходники Payload CMS
├─ collections
├─ payload-types.ts
├─ payload.config.ts

5. Копируем файл tsconfig.json из корня пустого шаблона Payload CMS на GitHub по ссылке выше в корень существующего проекта (если его нет). Если файл tsconfig.json уже существует – добавляем в него путь к конфигурации Payload CMS:

{
  "compilerOptions": {
    // ...
    "paths": {
      "@/*": ["./src/*"],
      "@payload-config": ["./src/payload.config.ts"]
    }
  }
  // ...
}

6. Добавляем в файл package.json параметр "type": "module":

{
  "name": "next-payload",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
  // ...
}

7. Добавляем к проекту необходимые пакеты Payload CMS:

npm i payload @payloadcms/next @payloadcms/richtext-lexical sharp graphql

8. Добавляем адаптер базы данных на примере SQLite:

npm i @payloadcms/db-sqlite

С инструкциями по установке другого адаптера, например, MongoDB или Postgres, можно ознакомиться по ссылке.

9. Добавляем плагин Payload CMS в конфигурацию Next.js:

import { withPayload } from '@payloadcms/next/withPayload';
 
/** @type {import('next').NextConfig} */
const nextConfig = {};
 
export default nextConfig;
export default withPayload(nextConfig);

10. Завершаем настройку конфигурации Payload CMS в файле payload.config.ts, который мы скопировали в п. 4 выше:

import { mongooseAdapter } from "@payloadcms/db-mongodb";
import { payloadCloudPlugin } from "@payloadcms/payload-cloud";
 
import { sqliteAdapter } from "@payloadcms/db-sqlite";
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import path from "path";
import { buildConfig } from "payload";
import { fileURLToPath } from "url";
import sharp from "sharp";
 
import { Users } from "./collections/Users";
import { Media } from "./collections/Media";
 
const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);
 
export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
  },
  collections: [Users, Media],
  editor: lexicalEditor(),
  secret: process.env.PAYLOAD_SECRET || "",
  typescript: {
    outputFile: path.resolve(dirname, "payload-types.ts"),
  },
 
  db: mongooseAdapter({
    url: process.env.DATABASE_URI || "",
  }),
  db: sqliteAdapter({
    client: {
      url: process.env.DATABASE_URI || "",
    },
  }),
 
  sharp,
  plugins: [payloadCloudPlugin()],
});

11. Создаем в корне проекта файл .env или добавляем в существующий файл .env следующие переменные окружения:

DATABASE_URI=file:./.db
PAYLOAD_SECRET=423152346576796780678623

Примечания:

• файл .db создавать не нужно, он автоматически будет создан при первом обращении к админке в режиме разработчика;
• PAYLOAD_SECRET необходимо заменить на свои цифры.

12. Запускаем проект в режиме разработчика:

npm run dev

и переходим в админку по адресу:

http://localhost:3000/admin

Если всё было выполнено правильно – откроется форма для создания первого пользователя.