feat(basic-example): Add basic-example project

Author: CrawlerCode

examples/basic/.env.example

@@ -0,0 +1,10 @@
+# Payload
+DATABASE_URI=postgres://postgres:<password>@127.0.0.1:5432/your-database-name
+PAYLOAD_SECRET=YOUR_SECRET_HERE
+
+NEXT_PUBLIC_SERVER_URL=http://localhost:3000
+
+# Auth.js
+AUTH_SECRET=YOUR_SECRET_HERE
+AUTH_GITHUB_ID=YOUR_GITHUB_ID
+AUTH_GITHUB_SECRET=YOUR_GITHUB_SECRET

examples/basic/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+
+/media

examples/basic/README.md

@@ -0,0 +1 @@
+# Basic Example

examples/basic/eslint.config.mjs

@@ -0,0 +1,35 @@
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+})
+
+const eslintConfig = [
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+  {
+    rules: {
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          args: 'after-used',
+          ignoreRestSiblings: false,
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^(_|ignore)',
+        },
+      ],
+    },
+  },
+]
+
+export default eslintConfig

examples/basic/next.config.mjs

@@ -0,0 +1,6 @@
+import { withPayload } from "@payloadcms/next/withPayload";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default withPayload(nextConfig);

examples/basic/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "basic-example",
+  "version": "1.0.0",
+  "description": "A basic example of Payload CMS using payload-authjs plugin",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
+    "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
+  },
+  "dependencies": {
+    "@payloadcms/db-postgres": "^3.19.0",
+    "@payloadcms/next": "^3.19.0",
+    "@payloadcms/richtext-lexical": "^3.19.0",
+    "cross-env": "^7.0.3",
+    "graphql": "^16.10.0",
+    "next": "15.1.6",
+    "next-auth": "5.0.0-beta.25",
+    "payload": "^3.19.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "sharp": "0.32.6",
+    "payload-authjs": "workspace:*"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@types/node": "^22.10.10",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "eslint": "^9.19.0",
+    "eslint-config-next": "15.1.6",
+    "typescript": "5.7.3"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0"
+  }
+}

examples/basic/project.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/basic/src",
+  "projectType": "application",
+  "targets": {}
+}

examples/basic/src/_middleware.ts

@@ -0,0 +1,9 @@
+import NextAuth from "next-auth";
+import { authConfig } from "./auth.config";
+
+const { auth: middleware } = NextAuth(authConfig);
+export default middleware;
+
+export const config = {
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};

packages/dev/src/app/(app)/_components/SignInButton.tsx renamed to examples/basic/src/app/(app)/_components/SignInButton.tsx

@@ -1,14 +1,14 @@
-import { signIn } from "@/auth";
-
-export function SignInButton() {
-  return (
-    <form
-      action={async () => {
-        "use server";
-        await signIn();
-      }}
-    >
-      <button type="submit">Sign In</button>
-    </form>
-  );
-}
+import { signIn } from "@/auth";
+
+export function SignInButton() {
+  return (
+    <form
+      action={async () => {
+        "use server";
+        await signIn("github");
+      }}
+    >
+      <button type="submit">Sign In</button>
+    </form>
+  );
+}

examples/basic/src/app/(app)/_components/SignOutButton.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { CollectionSlug } from "payload";
+
+export function SignOutButton({
+  userCollectionSlug = "users",
+}: {
+  userCollectionSlug?: CollectionSlug;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        await fetch(`/api/${userCollectionSlug}/logout`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }).then(() => {
+          window.location.reload();
+        });
+      }}
+    >
+      Sign Out
+    </button>
+  );
+}

examples/basic/src/app/(app)/globals.scss

@@ -0,0 +1,27 @@
+html,
+body {
+  font-family: "Roboto", "Inter", sans-serif;
+}
+
+main {
+  max-width: 37.5rem;
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+button {
+  cursor: pointer;
+  background: #ededed;
+  padding: 10px 25px;
+  border-radius: 10px;
+  border: 2px solid #ccc;
+}
+
+pre {
+  background: #ededed;
+  padding: 15px;
+  border-radius: 10px;
+  overflow: auto;
+}

examples/basic/src/app/(app)/layout.tsx

@@ -0,0 +1,9 @@
+import "./globals.scss";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

examples/basic/src/app/(app)/page.tsx

@@ -0,0 +1,23 @@
+import { auth } from "@/auth";
+import { getPayloadUser } from "payload-authjs";
+import { SignInButton } from "./_components/SignInButton";
+import { SignOutButton } from "./_components/SignOutButton";
+
+const Page = async () => {
+  const session = await auth();
+  const payloadUser = await getPayloadUser();
+
+  return (
+    <main>
+      {payloadUser ? <SignOutButton /> : <SignInButton />}
+      <br />
+      <h3>Auth.js Session</h3>
+      <pre>{JSON.stringify(session?.user, null, 2)}</pre>
+      <br />
+      <h3>Payload CMS User</h3>
+      <pre>{JSON.stringify(payloadUser, null, 2)}</pre>
+    </main>
+  );
+};
+
+export default Page;

examples/basic/src/app/(auth)/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from "@/auth";
+
+export const { GET, POST } = handlers;

examples/basic/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

examples/basic/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

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

@@ -0,0 +1,5 @@
+import { SignInWithAuthjsButton as SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+
+export const importMap = {
+  "payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e
+}

examples/basic/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)

examples/basic/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)

examples/basic/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)