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 - PlanetScale
• 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

After creating an account with PlanetScale, you'll need to create a new database and retrieve the DATABASE_URL. Optionally, you can use Vercel integration, which will add the DATABASE_URL to the environment variables for your project.

This is the provided .env.local.example file, which you'll want to use to create your own .env.local file:

# https://vercel.com/integrations/planetscale
DATABASE_URL=

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32

# https://next-auth.js.org/providers/github
GITHUB_ID=
GITHUB_SECRET=

Next, inside PlanetScale, create a users table based on the schema defined in this repository.

CREATE TABLE `users` (
  `id` int NOT NULL AUTO_INCREMENT,
  `email` varchar(255) NOT NULL,
  `name` varchar(255),
  `username` varchar(255),
  PRIMARY KEY (`id`)
);

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.