feat: ✨ initialize PayloadCMS and setup base collections

docker-compose.yml

@@ -0,0 +1,43 @@
+version: '3'
+
+services:
+  # payload:
+  #   image: node:18-alpine
+  #   ports:
+  #     - '3000:3000'
+  #   volumes:
+  #     - .:/home/node/app
+  #     - node_modules:/home/node/app/node_modules
+  #   working_dir: /home/node/app/
+  #   command: sh -c "corepack enable && corepack prepare pnpm@latest --activate && pnpm install && pnpm dev"
+  #   depends_on:
+  #     - mongo
+  #     # - postgres
+  #   env_file:
+  #     - .env
+
+  # Ensure your DATABASE_URI uses 'mongo' as the hostname ie. mongodb://mongo/my-db-name
+  mongo:
+    image: mongo:latest
+    ports:
+      - '27017:27017'
+    command:
+      - --storageEngine=wiredTiger
+    volumes:
+      - data:/data/db
+    logging:
+      driver: none
+
+  # Uncomment the following to use postgres
+  # postgres:
+  #   restart: always
+  #   image: postgres:latest
+  #   volumes:
+  #     - pgdata:/var/lib/postgresql/data
+  #   ports:
+  #     - "5432:5432"
+
+volumes:
+  data:
+  # pgdata:
+  node_modules:

next.config.mts

@@ -1,7 +1,8 @@
 import type { NextConfig } from "next";
+import { withPayload } from "@payloadcms/next/withPayload";
 
 const nextConfig: NextConfig = {
   /* config options here */
 };
 
-export default nextConfig;
+export default withPayload(nextConfig);

package.json

@@ -4,21 +4,32 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",
+    "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
+    "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
+    "@payloadcms/db-mongodb": "3.0.0-beta.94",
+    "@payloadcms/next": "^3.0.0-beta.94",
+    "@payloadcms/richtext-lexical": "^3.0.0-beta.94",
+    "@payloadcms/translations": "^3.0.0-beta.94",
+    "graphql": "^16.9.0",
+    "next": "15.0.0-canary.132",
+    "payload": "^3.0.0-beta.94",
     "react": "19.0.0-rc-eb3ad065-20240822",
     "react-dom": "19.0.0-rc-eb3ad065-20240822",
-    "next": "15.0.0-canary.132"
+    "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "15.0.0-canary.132"
+    "eslint-config-next": "15.0.0-canary.132",
+    "typescript": "^5"
   }
 }

payload.config.ts

@@ -0,0 +1,27 @@
+import { Media } from "./src/collections/Media";
+import { Users } from "./src/collections/Users";
+import { buildConfig } from "payload";
+import { lexicalEditor } from "@payloadcms/richtext-lexical";
+import { mongooseAdapter } from "@payloadcms/db-mongodb";
+import sharp from "sharp";
+
+export default buildConfig({
+  // If you'd like to use Rich Text, pass your editor here
+  editor: lexicalEditor(),
+
+  // Define and configure your collections in this array
+  collections: [Users, Media],
+
+  // Your Payload secret - should be a complex and secure string, unguessable
+  secret: process.env.PAYLOAD_SECRET || "",
+  // Whichever Database Adapter you're using should go here
+  // Mongoose is shown as an example, but you can also use Postgres
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI || "",
+  }),
+  // If you want to resize images, crop, set focal point, etc.
+  // make sure to install it and pass it to the config.
+  // This is optional - if you don't need to do these things,
+  // you don't need it!
+  sharp,
+});

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

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

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

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

src/app/(payload)/admin/importMap.js

@@ -0,0 +1,5 @@
+
+
+export const importMap = {
+
+}

src/app/(payload)/admin/layout.tsx

@@ -0,0 +1,27 @@
+import "@payloadcms/next/css";
+import "./custom.scss";
+import "../globals.css";
+
+import React from "react";
+import { RootLayout } from "@payloadcms/next/layouts";
+import configPromise from "@payload-config";
+import { importMap } from "./importMap";
+
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+
+
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+
+
+
+type Args = {
+  children: React.ReactNode;
+};
+
+const Layout = ({ children }: Args) => (
+  <RootLayout importMap={importMap} config={configPromise}>
+    {children}
+  </RootLayout>
+);
+
+export default Layout;

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

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

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

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

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

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

src/collections/Media.ts

@@ -0,0 +1,16 @@
+import type { CollectionConfig } from "payload";
+
+export const Media: CollectionConfig = {
+  slug: "media",
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: "alt",
+      type: "text",
+      required: false,
+    },
+  ],
+  upload: true,
+};

src/collections/Users.ts

@@ -0,0 +1,23 @@
+import type { CollectionConfig } from "payload";
+
+export const Users: CollectionConfig = {
+  slug: "users",
+  labels: {
+    singular: {
+      en: "User",
+      de: "Benutzer",
+    },
+    plural: {
+      en: "Users",
+      de: "Benutzer",
+    },
+  },
+  admin: {
+    useAsTitle: "email",
+  },
+  auth: true,
+  fields: [
+    // Email added by default
+    // Add more fields as needed
+  ],
+};

tsconfig.json

@@ -19,9 +19,12 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@payload-config": [
+        "./payload.config.ts"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next.config.mts"],
   "exclude": ["node_modules"]
 }