Install NextJS with PayloadCMS v3

dev/.env.example

@@ -1,5 +1,10 @@
 MONGODB_URI=mongodb://localhost:27017/test
 REDIS_URI=redis://localhost:6379
-PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
+NEXT_PUBLIC_URL=http://localhost:3000
 PAYLOAD_SECRET=XXXX
-PAYLOAD_CONFIG_PATH=src/payload.config.ts
+PAYLOAD_CONFIG_PATH=src/payload.config.ts
+
+PAYLOAD_PUBLIC_SEED=false
+
+[email protected]
+ADMIN_PASSWORD=xxxxxx

dev/next-env.d.ts

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

dev/next.config.ts

@@ -0,0 +1,18 @@
+import type { NextConfig } from 'next'
+import withPayload from '@payloadcms/next/withPayload'
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  experimental: {
+    reactCompiler: false
+  },
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has type errors.
+    // !! WARN !!
+    ignoreBuildErrors: true
+  }
+}
+
+export default withPayload(nextConfig)

dev/package.json

@@ -4,31 +4,34 @@
   "main": "dist/server.js",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
+    "dev": "next dev --turbopack -p 6006",
     "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
     "build:server": "tsc",
     "build": "yarn copyfiles && yarn build:payload && yarn build:server",
     "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
+    "dropdb": "PAYLOAD_PUBLIC_SEED=true yarn dev",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
     "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
     "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
   },
   "dependencies": {
     "@aengz/payload-redis-cache": "^1.0.4",
-    "@payloadcms/bundler-webpack": "^1.0.5",
-    "@payloadcms/db-mongodb": "^1.0.6",
-    "@payloadcms/richtext-slate": "^1.1.0",
-    "dotenv": "^16.0.3",
-    "express": "^4.17.1",
-    "payload": "2.0.15",
-    "redis": "^4.5.1"
+    "@payloadcms/db-mongodb": "3.5.0",
+    "@payloadcms/next": "3.5.0",
+    "@payloadcms/richtext-lexical": "3.5.0",
+    "graphql": "^16.9.0",
+    "next": "15.0.4",
+    "payload": "3.5.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "redis": "^4.7.0"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "nodemon": "^2.0.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8",
+    "typescript": "^5"
   }
 }

dev/payload.config.ts

@@ -0,0 +1,37 @@
+import { buildConfig } from 'payload'
+
+// import { cachePlugin, initRedis } from '@aengz/payload-redis-cache'
+// import { cachePlugin, initRedis } from '@redisplugin'
+// import { cachePlugin } from '@aengz/payload-redis-cache'
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+// Collections
+import { Examples } from './src/payload/collections/Examples'
+import { Users } from './src/payload/collections/Users'
+
+export default buildConfig({
+  serverURL: process.env.NEXT_PUBLIC_URL,
+  onInit: () => {
+    // initRedis({
+    //   redisUrl: process.env.REDIS_URI!
+    // })
+  },
+  admin: {
+    user: Users.slug
+  },
+  collections: [Users, Examples],
+
+  // If you'd like to use Rich Text, pass your editor here
+  editor: lexicalEditor(),
+  // 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.MONGODB_URI || ''
+  }),
+  plugins: [
+    // cachePlugin({ excludedCollections: ['users'] }) // ADD HERE
+  ],
+  // Your Payload secret - should be a complex and secure string, unguessable
+  secret: process.env.PAYLOAD_SECRET || ''
+})

dev/src/app/(next)/api/middleware.ts

@@ -0,0 +1,9 @@
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function middleware(request: NextRequest) {
+  // eslint-disable-next-line no-console
+  console.log('middleware hit: ', request.url)
+  return NextResponse.next()
+}

dev/src/app/(next)/api/route.ts

@@ -0,0 +1,5 @@
+import { cookies } from 'next/headers'
+
+export async function GET(request: Request) {
+  console.log('Route handler')
+}

dev/src/app/(next)/api/seed/route.ts

@@ -0,0 +1,26 @@
+import { getPayload } from "payload";
+import config from "@payload-config";
+import { headers } from "next/headers";
+import { seed } from "../../../../payload/seed";
+
+export const maxDuration = 60; // This function can run for a maximum of 60 seconds
+
+export async function GET(): Promise<Response> {
+  const payload = await getPayload({ config });
+  const requestHeaders = await headers();
+
+  // Authenticate by passing request headers
+  const { user } = await payload.auth({ headers: requestHeaders });
+
+  if (!user) {
+    return new Response("Action forbidden.", { status: 403 });
+  }
+
+  try {
+    await seed({ payload });
+
+    return Response.json({ success: true });
+  } catch {
+    return new Response("Error seeding data.");
+  }
+}

dev/src/app/(next)/layout.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang='en' suppressHydrationWarning>
+      <body>{children}</body>
+    </html>
+  )
+}

dev/src/app/(next)/page.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import React from 'react'
+
+// Simple query to fetch cached examples
+export default function Home() {
+  const [examples, setExamples] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+
+  React.useEffect(() => {
+    const fetchExamples = async () => {
+      try {
+        // Fetches examples from Payload
+        const response = await fetch(`${process.env.NEXT_PUBLIC_URL}/api/examples`);
+        if (!response.ok) {
+          throw new Error('Failed to fetch examples');
+        }
+        const data = await response.json();
+        setExamples(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchExamples();
+  }, []);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return <main className='flex-1'>
+    <h1>Hello NextJS + Payloadv3 + Redis</h1>
+    <ul>
+      {(examples.docs ?? []).map(example => (
+        <li key={example.id}>{example.someField}</li>
+      ))}
+    </ul>
+  </main>
+}

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from "@payload-config";
+import "@payloadcms/next/css";
+import {
+  REST_DELETE,
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+  REST_PUT,
+} from "@payloadcms/next/routes";
+
+export const GET = REST_GET(config);
+export const POST = REST_POST(config);
+export const DELETE = REST_DELETE(config);
+export const PATCH = REST_PATCH(config);
+export const PUT = REST_PUT(config);
+export const OPTIONS = REST_OPTIONS(config);

dev/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 REWRITTEN AT ANY TIME. */
+import config from "@payload-config";
+import "@payloadcms/next/css";
+import { GRAPHQL_PLAYGROUND_GET } from "@payloadcms/next/routes";
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config);

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

@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from "@payload-config";
+import { GRAPHQL_POST, REST_OPTIONS } from "@payloadcms/next/routes";
+
+export const POST = GRAPHQL_POST(config);
+
+export const OPTIONS = REST_OPTIONS(config);

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

@@ -0,0 +1,31 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from "@payload-config";
+import "@payloadcms/next/css";
+import type { ServerFunctionClient } from "payload";
+import { handleServerFunctions, RootLayout } from "@payloadcms/next/layouts";
+import React from "react";
+
+import { importMap } from "./admin/importMap.js";
+import "./custom.scss";
+
+type Args = {
+  children: React.ReactNode;
+};
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  "use server";
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  });
+};
+
+const Layout = ({ children }: Args) => (
+  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
+    {children}
+  </RootLayout>
+);
+
+export default Layout;

dev/src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function NotFound() {
+  return redirect('/')
+}