Next.js 15 Admin Dashboard Template

Built with the Next.js App Router

Demo · Clone & Deploy

Overview

This is a starter template using the following stack:

• Framework - Next.js (App Router)
• Language - TypeScript
• Auth - Auth.js
• Database - Postgres
• Deployment - Vercel
• Styling - Tailwind CSS
• Components - Shadcn UI
• Analytics - Vercel Analytics
• Formatting - Prettier

This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.

Getting Started for Local Development

These instructions will guide you through setting up the project to run on your local machine with a local PostgreSQL database.

Prerequisites

• Node.js (version 20.x or later)
• pnpm
• PostgreSQL installed and running.

1. Clone the Repository and Install Dependencies

git clone https://github.com/your-username/your-repo-name.git # Change this to your repo URL
cd your-repo-name
pnpm install

2. Set Up Environment Variables

Create a .env file in the root of the project. You can do this by copying the .env.example if it exists, or by creating a new file. Add the following content, replacing the placeholder values:

# Example URL for a local PostgreSQL database
POSTGRES_URL="postgresql://YOUR_USERNAME:YOUR_PASSWORD@localhost:5432/YOUR_DATABASE_NAME"

# You can generate a new secret with `openssl rand -base64 32`
NEXTAUTH_URL=http://localhost:3000
AUTH_SECRET="YOUR_AUTH_SECRET"

# GitHub OAuth credentials (optional, for authentication)
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

3. Create the Database

Connect to your local PostgreSQL instance using a client like psql and create the database you specified in your POSTGRES_URL.

CREATE DATABASE your_database_name;

4. Run Database Migrations

This project uses drizzle-kit to manage database schema migrations.

• To generate a new migration file after making changes to the schema in lib/schema.ts:

  pnpm drizzle-kit generate

• To apply all pending migrations to your database:

  pnpm drizzle-kit migrate

Run the migrate command now to set up your initial tables.

5. Run the Development Server

pnpm dev

You should now be able to access the application at http://localhost:3000.