nextjs-planetscale-nextauth-tailwindcss-template: A TypeScript repository from woshicixide

Shows all of the tools in the stack for this template, also listed in the README file.

Next.js 13 Admin Dashboard Template

Built with the Next.js App Router

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.

woshicixide/nextjs-planetscale-nextauth-tailwindcss-template

Overview

Getting Started