payload-next-starter 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# Payload Next.js Starter
+
+Quickly add PayloadCMS to any existing Next.js project. This package scaffolds PayloadCMS with PostgreSQL support into your Next.js application.
+
+## Installation
+
+Run the setup command in your Next.js project:
+
+```bash
+npx payload-next-starter
+```
+
+Or install globally:
+
+```bash
+npm install -g payload-next-starter
+payload-next-starter
+```
+
+## What it does
+
+This CLI tool will:
+1. Copy Payload admin routes to `src/app/(payload)/`
+2. Copy API routes to `src/app/api/[...payload]/`
+3. Copy collections (Users, Media) to `src/collections/`
+4. Install required dependencies
+5. Update `next.config.ts` with Payload plugin
+6. Create `.env.example` with required variables
+
+## After installation
+
+1. Copy `.env.example` to `.env` and fill in your values:
+   ```bash
+   DATABASE_URI=postgresql://user:password@host:5432/database
+   PAYLOAD_SECRET=your-secret-key-min-16-chars
+   NEXT_PUBLIC_SERVER_URL=http://localhost:3000
+   ```
+
+2. Generate Payload import maps:
+   ```bash
+   npx payload generate:importmap
+   ```
+
+3. Generate TypeScript types:
+   ```bash
+   npx payload generate:types
+   ```
+
+4. Start your dev server:
+   ```bash
+   npm run dev
+   ```
+
+5. Visit `http://localhost:3000/admin` to create your first admin user
+
+## Requirements
+
+- Next.js 13+ with App Router
+- Node.js 18.20+ or 20.9+
+- PostgreSQL database
+
+## Collections included
+
+- **Users** - Authentication-enabled collection with admin access
+- **Media** - Uploads collection with image handling
+
+## Deploying
+
+Deploy to Vercel, Railway, or any platform supporting Next.js:
+
+```bash
+npm run build
+```
+
+Ensure these environment variables are set in production:
+- `DATABASE_URI`
+- `PAYLOAD_SECRET`
+- `NEXT_PUBLIC_SERVER_URL`
+
+## Customization
+
+Edit `src/payload.config.ts` to add:
+- More collections
+- Globals
+- Hooks
+- Access control
+- Custom components
+
+## License
+
+MIT
+
+## Support
+
+[GitHub Issues](https://github.com/sentayhu19/test-payload/issues)

package/bin/setup.js

@@ -0,0 +1,146 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process'
+import { existsSync, mkdirSync, copyFileSync, readFileSync, writeFileSync, cpSync } from 'fs'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const rootDir = join(__dirname, '..')
+const targetDir = process.cwd()
+
+console.log('🚀 Setting up PayloadCMS...\n')
+
+// Check if target is a Next.js project
+if (!existsSync(join(targetDir, 'package.json'))) {
+  console.error('❌ No package.json found. Run this in a Next.js project.')
+  process.exit(1)
+}
+
+const pkg = JSON.parse(readFileSync(join(targetDir, 'package.json'), 'utf8'))
+if (!pkg.dependencies?.next) {
+  console.error('❌ This doesn\'t appear to be a Next.js project.')
+  process.exit(1)
+}
+
+console.log('✓ Found Next.js project\n')
+
+// Copy template files
+console.log('📁 Copying Payload files...')
+
+const templatesDir = join(rootDir, 'templates')
+
+// Create directories
+try {
+  mkdirSync(join(targetDir, 'src/app/(payload)'), { recursive: true })
+  mkdirSync(join(targetDir, 'src/app/api/[...payload]'), { recursive: true })
+  mkdirSync(join(targetDir, 'src/collections'), { recursive: true })
+} catch (e) {
+  // Directories might already exist
+}
+
+// Copy payload.config.ts
+if (existsSync(join(templatesDir, 'payload.config.ts'))) {
+  copyFileSync(
+    join(templatesDir, 'payload.config.ts'),
+    join(targetDir, 'src/payload.config.ts')
+  )
+  console.log('  ✓ payload.config.ts')
+}
+
+// Copy collections
+if (existsSync(join(templatesDir, 'collections'))) {
+  cpSync(join(templatesDir, 'collections'), join(targetDir, 'src/collections'), { recursive: true, force: true })
+  console.log('  ✓ collections/')
+}
+
+// Copy app routes
+if (existsSync(join(templatesDir, 'app/(payload)'))) {
+  cpSync(join(templatesDir, 'app/(payload)'), join(targetDir, 'src/app/(payload)'), { recursive: true, force: true })
+  console.log('  ✓ app/(payload)/')
+}
+
+if (existsSync(join(templatesDir, 'app/api/[...payload]'))) {
+  cpSync(join(templatesDir, 'app/api/[...payload]'), join(targetDir, 'src/app/api/[...payload]'), { recursive: true, force: true })
+  console.log('  ✓ app/api/[...payload]/')
+}
+
+console.log('\n📦 Installing dependencies...')
+
+const deps = [
+  'payload',
+  '@payloadcms/next',
+  '@payloadcms/db-postgres',
+  '@payloadcms/richtext-lexical',
+  '@payloadcms/ui',
+  'dotenv',
+  'cross-env'
+]
+
+try {
+  const pkgManager = existsSync(join(targetDir, 'pnpm-lock.yaml')) ? 'pnpm' :
+                     existsSync(join(targetDir, 'yarn.lock')) ? 'yarn' : 'npm'
+
+  execSync(`${pkgManager} add ${deps.join(' ')}`, {
+    cwd: targetDir,
+    stdio: 'inherit'
+  })
+  console.log('✓ Dependencies installed\n')
+} catch (e) {
+  console.error('❌ Failed to install dependencies:', e.message)
+  process.exit(1)
+}
+
+// Update next.config
+console.log('⚙️  Updating next.config...')
+const nextConfigPath = existsSync(join(targetDir, 'next.config.ts'))
+  ? join(targetDir, 'next.config.ts')
+  : existsSync(join(targetDir, 'next.config.js'))
+    ? join(targetDir, 'next.config.js')
+    : null
+
+if (nextConfigPath) {
+  const content = readFileSync(nextConfigPath, 'utf8')
+  if (!content.includes('withPayload')) {
+    const newConfig = `import { withPayload } from '@payloadcms/next/withPayload'
+
+${content.replace('export default ', 'const nextConfig = ')}
+
+export default withPayload(nextConfig)
+`
+    writeFileSync(nextConfigPath, newConfig)
+    console.log('  ✓ next.config updated\n')
+  } else {
+    console.log('  ℹ next.config already has Payload\n')
+  }
+} else {
+  console.log('  ⚠ No next.config found, creating one...')
+  writeFileSync(join(targetDir, 'next.config.ts'), `import { withPayload } from '@payloadcms/next/withPayload'
+
+const nextConfig = {
+  // your config
+}
+
+export default withPayload(nextConfig)
+`)
+  console.log('  ✓ next.config.ts created\n')
+}
+
+// Create .env.example
+if (!existsSync(join(targetDir, '.env'))) {
+  writeFileSync(join(targetDir, '.env.example'), `# PayloadCMS
+DATABASE_URI=postgresql://user:password@host:5432/database
+PAYLOAD_SECRET=your-secret-key-here-at-least-16-chars
+NEXT_PUBLIC_SERVER_URL=http://localhost:3000
+`)
+  console.log('  ✓ .env.example created')
+}
+
+console.log('\n🎉 PayloadCMS setup complete!')
+console.log('\nNext steps:')
+console.log('  1. Copy .env.example to .env and fill in your values')
+console.log('  2. Run: npx payload generate:importmap')
+console.log('  3. Run: npx payload generate:types')
+console.log('  4. Start your dev server: npm run dev')
+console.log('\nAdmin panel will be at: http://localhost:3000/admin')

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "payload-next-starter",
+  "version": "1.0.0",
+  "description": "PayloadCMS starter for Next.js - install into any Next.js app",
+  "license": "MIT",
+  "type": "module",
+  "bin": "./bin/setup.js",
+  "files": [
+    "bin/",
+    "templates/",
+    "README.md"
+  ],
+  "keywords": [
+    "payload",
+    "payloadcms",
+    "nextjs",
+    "cms",
+    "headless-cms",
+    "starter"
+  ],
+  "author": "Sentayhu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sentayhu19/test-payload.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sentayhu19/test-payload/issues"
+  },
+  "homepage": "https://github.com/sentayhu19/test-payload#readme",
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=\"--no-deprecation --max-old-space-size=8000\" 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 eslint .",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "test": "pnpm run test:int && pnpm run test:e2e",
+    "test:e2e": "cross-env NODE_OPTIONS=\"--no-deprecation --import=tsx/esm\" playwright test --config=playwright.config.ts",
+    "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts"
+  },
+  "dependencies": {
+    "@payloadcms/next": "3.82.1",
+    "@payloadcms/richtext-lexical": "3.82.1",
+    "@payloadcms/ui": "3.82.1",
+    "cross-env": "^7.0.3",
+    "dotenv": "16.4.7",
+    "graphql": "^16.8.1",
+    "next": "16.2.3",
+    "payload": "3.82.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "sharp": "0.34.2",
+    "@payloadcms/db-postgres": "3.82.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.58.2",
+    "@testing-library/react": "16.3.0",
+    "@types/node": "22.19.9",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "4.5.2",
+    "eslint": "^9.16.0",
+    "eslint-config-next": "16.2.3",
+    "jsdom": "28.0.0",
+    "prettier": "^3.4.2",
+    "tsx": "4.21.0",
+    "typescript": "5.7.3",
+    "vite-tsconfig-paths": "6.0.5",
+    "vitest": "4.0.18"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0",
+    "pnpm": "^9 || ^10"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp",
+      "esbuild",
+      "unrs-resolver"
+    ]
+  }
+}

package/templates/app/(payload)/admin/[[...admin]]/page.tsx

@@ -0,0 +1,17 @@
+import type { ServerFunctionClient } from 'payload'
+
+import config from '@/payload.config'
+import { AdminPage } from '@payloadcms/next/pages'
+
+const serverFunction: ServerFunctionClient = async (args) => {
+  'use server'
+  const { createServerFunctionClient } = await import('@payloadcms/next')
+  const { serverFunction: payloadServerFunction } = createServerFunctionClient({ config, importMap: {} })
+  return payloadServerFunction(args)
+}
+
+const Page = ({ params, searchParams }: { params: Promise<{ admin?: string[] }>; searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) => (
+  <AdminPage config={config} importMap={{}} params={params} searchParams={searchParams} serverFunction={serverFunction} />
+)
+
+export default Page

package/templates/app/(payload)/layout.tsx

@@ -0,0 +1,22 @@
+import type { ServerFunctionClient } from 'payload'
+
+import config from '@/payload.config'
+import { RootLayout } from '@payloadcms/next/layouts'
+import React from 'react'
+
+import './styles.css'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const serverFunction: ServerFunctionClient = async (args) => {
+  'use server'
+  const { createServerFunctionClient } = await import('@payloadcms/next')
+  const { serverFunction: payloadServerFunction } = createServerFunctionClient({ config, importMap: {} })
+  return payloadServerFunction(args)
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={config} importMap={{}} serverFunction={serverFunction}>{children}</RootLayout>
+
+export default Layout

package/templates/app/(payload)/styles.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@payloadcms/next/css';

package/templates/app/api/[...payload]/route.ts

@@ -0,0 +1,9 @@
+import config from '@/payload.config'
+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)

package/templates/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: true,
+    },
+  ],
+  upload: true,
+}

package/templates/collections/Users.ts

@@ -0,0 +1,13 @@
+import type { CollectionConfig } from 'payload'
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  admin: {
+    useAsTitle: 'email',
+  },
+  auth: true,
+  fields: [
+    // Email added by default
+    // Add more fields as needed
+  ],
+}

package/templates/payload.config.ts

@@ -0,0 +1,34 @@
+import { postgresAdapter } from '@payloadcms/db-postgres'
+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: postgresAdapter({
+    pool: {
+      connectionString: process.env.DATABASE_URL || '',
+    },
+  }),
+  sharp,
+  plugins: [],
+})