A minimal, production-ready blog starter built with Next.js 16, Payload CMS 3, and Tailwind CSS 4. Get a beautiful, fast blog up and running in minutes.

Content Management

• Rich text editor with Lexical
• Draft versioning with autosave
• Live preview as you edit
• SEO fields on every post

Modern Stack

• Next.js 16 App Router
• Payload CMS 3.65
• PostgreSQL + Vercel Blob Storage
• Tailwind CSS 4 + shadcn/ui
• Dark/light mode

Production Ready

• Automatic sitemap generation
• SEO-optimized meta tags
• Responsive design
• Type-safe with TypeScript

# Clone and install
git clone https://github.com/brijr/payload-blog.git
cd payload-blog
pnpm install

# Configure environment
cp .env.example .env
# Edit .env with your DATABASE_URI and PAYLOAD_SECRET

# Start developing
pnpm dev

Open localhost:3000/admin to create your first post.

src/
├── app/
│   ├── (frontend)/(site)/     # Public routes
│   │   ├── page.tsx           # Homepage
│   │   └── posts/             # Blog posts
│   └── (payload)/             # Admin panel
├── collections/
│   ├── Posts.ts               # Blog posts
│   ├── Media.ts               # File uploads
│   └── Users.ts               # Admin users
└── components/
    ├── ds.tsx                 # Design system
    ├── posts/                 # Post components
    └── ui/                    # shadcn/ui

Add a new collection:

1. Create /src/collections/YourCollection.ts
2. Add to collections array in /src/payload.config.ts
3. Run pnpm generate:types

Add a new page:

1. Create /src/app/(frontend)/(site)/your-page/page.tsx
2. Use the design system components from /src/components/ds.tsx

Or deploy manually:

1. Set up a PostgreSQL database (Neon, Supabase, etc.)
2. Configure environment variables
3. Deploy to Vercel, Railway, or any Node.js host

MIT

Built by brijr