Next.js 14 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 14
• Language - TypeScript
• Auth - NextAuth.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

During the deployment, Vercel will prompt you to create a new Postgres database. This will add the necessary environment variables to your project.

Inside the Vercel Postgres dashboard, create a table based on the schema defined in this repository.

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  email VARCHAR(255) NOT NULL,
  name VARCHAR(255),
  username VARCHAR(255)
);

Insert a row for testing:

INSERT INTO users (id, email, name, username) VALUES (1, 'me@site.com', 'Me', 'username');

Copy the .env.example file to .env and update the values.

Finally, run the following commands to start the development server:

pnpm install
pnpm dev

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