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 (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

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 TYPE status AS ENUM ('active', 'inactive', 'archived');

CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  image_url TEXT NOT NULL,
  name TEXT NOT NULL,
  status status NOT NULL,
  price NUMERIC(10, 2) NOT NULL,
  stock INTEGER NOT NULL,
  available_at TIMESTAMP NOT NULL
);

Then, uncomment app/api/seed.ts and hit http://localhost:3000/api/seed to seed the database with products.

Next, copy the .env.example file to .env and update the values. Follow the instructions in the .env.example file to set up your GitHub OAuth application.

npm i -g vercel
vercel link
vercel env pull

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.