Next.js CMS Boilerplate

English | Türkçe

A website starter built with the Next.js App Router, featuring a ready-to-use admin panel, content management, authentication, and SEO infrastructure. It can serve as a foundation for corporate websites, personal brands, and content-driven projects.

Features

• Responsive public website and protected admin panel
• Role-based user management (SUPER_ADMIN, ADMIN, EDITOR)
• Blog post, page, nested page, and FAQ management
• Drag-and-drop navigation and FAQ ordering
• Tiptap-powered rich text editor
• Homepage section, branding, contact, and social media settings
• Contact form submissions and request rate limiting
• Dynamic metadata, Open Graph, JSON-LD, sitemap, and robots.txt
• PostgreSQL data layer powered by Prisma
• Dynamic brand colors and logo settings

Tech Stack

• Next.js 16 and React 19
• TypeScript
• Tailwind CSS 4
• Prisma ORM and PostgreSQL
• Auth.js / NextAuth.js
• React Hook Form and Zod
• Tiptap
• dnd-kit

Requirements

• Node.js 20.9 or later
• npm
• PostgreSQL database

Installation

Install the dependencies:

npm install

Create a .env file in the project root:

DATABASE_URL="postgresql://USER:PASSWORD@HOST:5432/DATABASE"
DIRECT_URL="postgresql://USER:PASSWORD@HOST:5432/DATABASE"
AUTH_SECRET="a-strong-random-value"
NEXT_PUBLIC_SITE_URL="http://localhost:3000"

You can generate a random value for AUTH_SECRET with:

openssl rand -base64 32

Apply the database schema and create the initial data:

npm run db:push
npm run db:seed

Start the development server:

npm run dev

The website will be available at http://localhost:3000, and the admin login at http://localhost:3000/login.

Default Admin Account

The seed command creates the following account for development:

Email:    admin@example.com
Password: admin123

Change these credentials before deploying to production. Preferably, replace the defaults in prisma/seed.ts with secure, project-specific values.

Available Scripts

Command	Description
npm run dev	Starts the development server
npm run build	Generates Prisma Client and creates a production build
npm run start	Starts the production server
npm run lint	Runs ESLint checks
npm run db:generate	Generates Prisma Client
npm run db:push	Applies the schema to the database
npm run db:migrate	Creates and applies a development migration
npm run db:seed	Creates the initial data
npm run db:studio	Opens Prisma Studio

Main Routes

Route	Description
/	Public homepage
/blog	Blog post listing
/iletisim	Contact page
/login	Admin login
/admin/dashboard	Admin dashboard
/admin/posts	Blog post management
/admin/pages	Page management
/admin/faqs	FAQ management
/admin/contact	Contact submissions
/admin/settings	Website and homepage settings

Project Structure

src/
├── app/
│   ├── (auth)/       # Authentication screens
│   ├── (public)/     # Public pages
│   ├── admin/        # Admin panel
│   └── api/          # Route handlers
├── components/
│   ├── admin/        # Admin interface
│   ├── public/       # Public website components
│   ├── seo/          # Structured data components
│   └── ui/           # Reusable UI components
├── lib/              # Auth, Prisma, validation, and utilities
└── types/            # TypeScript types
prisma/
├── schema.prisma     # Database schema
└── seed.ts           # Initial data

Adapting the Boilerplate

1. Update the website copy and admin account in prisma/seed.ts.
2. Replace the default metadata in src/app/layout.tsx.
3. Configure the logo, colors, contact details, social links, and homepage sections from the admin panel.
4. Set NEXT_PUBLIC_SITE_URL to the production domain.
5. Restrict the remote image rules in next.config.ts to the sources used by the project when appropriate.

Production

Define all environment variables in the production environment and apply the database schema. If the project uses migration files, run npx prisma migrate deploy during deployment. Then run:

npm run build
npm run start

For Vercel deployments, the build command already generates Prisma Client.