A modern, full-stack starter template powered by PayloadCMS and Next.js. Built with performance and developer experience in mind.

• Next.js 15 with App Router
• PayloadCMS for content management
• PostgreSQL database with Neon
• AWS S3 for media storage
• Authentication with Server Actions & JWT
• Tailwind CSS & shadcn/ui for styling
• Responsive & Mobile-First design
• TypeScript for type safety
• brijr/craft utilities included

Before you begin, ensure you have:

• Node.js (^18.20.2 or >=20.9.0)
• pnpm package manager
• PostgreSQL database (local or cloud)
• AWS S3 bucket for media storage
• Basic knowledge of TypeScript and React

1. Clone and install dependencies:

git clone https://github.com/9d8dev/pay.git cd pay pnpm install

2. Set up your environment:

cp .env.example .env

3. Configure your .env file with:

# Database ConfigurationDATABASE_URI=your_postgres_connection_stringPAYLOAD_SECRET=your_secure_secret_key# S3 ConfigurationS3_BUCKET=your_bucket_nameS3_REGION=your_bucket_regionS3_ACCESS_KEY_ID=your_access_keyS3_SECRET_ACCESS_KEY=your_secret_key

4. Start the development server:

pnpm dev

5. Visit http://localhost:3000/admin to create your first admin user

1. Local PostgreSQL:

   • Install PostgreSQL on your machine
   • Create a new database
   • Use the connection string: postgresql://username:password@localhost:5432/database

2. Cloud PostgreSQL (Recommended):

   • Create a database on Neon
   • Copy the connection string from your dashboard
   • Enable SSL mode with ?sslmode=require

1. Create an S3 bucket:

   • Go to AWS Console > S3
   • Create a new bucket
   • Enable public access settings
   • Configure CORS for your domain

2. Create IAM credentials:

   • Create a new IAM user
   • Attach AmazonS3FullAccess policy
   • Save the access key and secret

3. Configure bucket policy:

{"Version": "2012-10-17", "Statement": [{"Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::your-bucket-name/*" } ] }

pay/ ├── src/ │ ├── app/ # Next.js app router │ ├── collections/ # PayloadCMS collections │ ├── components/ # React components │ └── lib/ # Utility functions ├── public/ # Static assets └── package.json # Dependencies 

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm generate:types - Generate PayloadCMS types

1. Push your code to GitHub
2. Import project to Vercel
3. Configure environment variables
4. Deploy!

• Use PostgreSQL (We recommend Neon, or any other cloud provider with PostgreSQL support)
• Enable serverless pooling
• Configure connection pooling

We welcome contributions! Please:

1. Fork the repository
2. Create a feature branch
3. Submit a pull request

• PayloadCMS Documentation
• Next.js Documentation
• Payload Discord Community
• Issue Tracker

MIT 9d8

• Server-side authentication using Next.js Server Actions
• JWT-based session management with secure HTTP-only cookies
• Built-in login, register, and logout functionality
• Protected routes with automatic redirects
• TypeScript types for auth responses
• Pre-build App Users collection at collections/AppUsers.ts

1. Login Form tsx import{LoginForm } from '@/components/auth/login-form'

export default function LoginPage(){return }

 2. **Register Form** ```tsx import{RegisterForm } from '@/components/auth/register-form' export default function RegisterPage(){return <RegisterForm />} 

3. Logout Button

import{LogoutButton}from'@/components/auth/logout-button'exportdefaultfunctionNavBar(){return<LogoutButton/>}

4. Protected Routes Create a layout.tsx in your protected route directory:

import{redirect}from'next/navigation'import{getUser}from'@/lib/actions/auth'import{cookies}from'next/headers'exportdefaultasyncfunctionProtectedLayout({ children }){constcookieStore=awaitcookies()consttoken=cookieStore.get('payload-token')if(!token){redirect('/login')}constuser=awaitgetUser()if(!user){redirect('/login')}return<>{children}</>}

The following server actions are available in @/lib/actions/auth:

• loginUser({email, password }) - Authenticates user and sets session
• registerUser({email, password }) - Creates new user and logs them in
• logoutUser() - Ends session and redirects to home
• getUser() - Returns current authenticated user or null