Next.js 13 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 13
• Language - TypeScript
• Auth - NextAuth.js
• Database - Vercel Postgres
• Deployment - Vercel
• Styling - Tailwind CSS
• Components - Tremor
• Analytics - Vercel Analytics
• Linting - ESLint
• 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');

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.