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.