chore: migrate template to use latest beta of payload packages

Author: paulpopus

.gitignore

@@ -1,5 +1,7 @@
 dev/tmp
 dev/yarn.lock
+dev/.next
+dev/pnpm-lock.yaml
 
 # Created by https://www.gitignore.io/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 

dev/.gitignore

@@ -4,3 +4,4 @@ dist
 node_modules
 .DS_Store
 .env
+.next

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/basic-features/typescript for more information.

dev/package.json

@@ -1,35 +1,37 @@
 {
-  "name": "Payload2Blank",
+  "name": "payload-blank-plugin",
   "description": "A blank template to get started with Payload",
   "version": "1.0.0",
   "main": "dist/server.js",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
-    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload"
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types",
+    "standalone-script": "tsx ./src/scripts/standalone-script.ts",
+    "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0",
-    "@payloadcms/db-mongodb": "^1.0.0",
-    "@payloadcms/plugin-cloud": "^2.0.0",
-    "@payloadcms/richtext-slate": "^1.0.0",
+    "@payloadcms/db-mongodb": "3.0.0-beta.10",
+    "@payloadcms/next": "3.0.0-beta.10",
+    "@payloadcms/richtext-lexical": "3.0.0-beta.10",
+    "@payloadcms/ui": "3.0.0-beta.10",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "^2.0.0"
+    "payload": "3.0.0-beta.10",
+    "react": "^18.2.0",
+    "sharp": "^0.33.3"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
+    "@types/react": "^18.2.78",
     "copyfiles": "^2.4.1",
+    "next": "^14.2.1",
     "nodemon": "^2.0.6",
     "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "typescript": "^5.4.2"
   }
-}
+}

dev/src/app/(app)/globals.scss

@@ -0,0 +1,37 @@
+html,
+body {
+  font-family: 'Roboto', 'Inter', sans-serif;
+}
+
+.container {
+  max-width: 37.5rem;
+  padding: 0 2rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+h1 {
+  font-size: 4rem;
+}
+
+.rainbow {
+  font-family: monospace;
+  letter-spacing: 5px;
+  background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: rainbow_animation 6s ease-in-out infinite;
+  background-size: 400% 100%;
+}
+
+@keyframes rainbow_animation {
+  0%,
+  100% {
+    background-position: 0 0;
+  }
+
+  50% {
+    background-position: 100% 0;
+  }
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import './globals.scss'
+
+/* Our app sits here to not cause any conflicts with payload's root layout  */
+const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
+
+export default Layout

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

@@ -0,0 +1,57 @@
+import Example from '@/components/Example'
+import Link from 'next/link'
+import React from 'react'
+
+const Page = () => {
+  return (
+    <article className={['container'].filter(Boolean).join(' ')}>
+      <h1>
+        Payload 3.0 <span className="rainbow">BETA</span>!
+      </h1>
+      <p>
+        This BETA is rapidly evolving, you can report any bugs against{' '}
+        <a href="https://github.com/payloadcms/payload-3.0-demo/issues" target="_blank">
+          the repo
+        </a>{' '}
+        or in the{' '}
+        <a
+          href="https://discord.com/channels/967097582721572934/1215659716538273832"
+          target="_blank"
+        >
+          dedicated channel in Discord
+        </a>
+        .
+      </p>
+
+      <p>
+        <strong>
+          Payload is running at <Link href="/admin">/admin</Link>
+        </strong>
+      </p>
+
+      <p>
+        <Link href="/my-route" target="_blank">
+          /my-route
+        </Link>{' '}
+        contains an example of a custom route running the Local API.
+      </p>
+
+      <Example />
+
+      <p>You can use the Local API in your server components like this:</p>
+      <pre>
+        <code>
+          {`import { getPayload } from 'payload'
+import configPromise from "@payload-config";
+const payload = await getPayload({ config: configPromise })
+
+const data = await payload.find({
+  collection: 'posts',
+})`}
+        </code>
+      </pre>
+    </article>
+  )
+}
+
+export default Page

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

@@ -0,0 +1,22 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+
+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 })
+
+export default NotFound

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

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

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

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