Next.js 13 with Drizzle ORM & PlanetScale Starter Template

Next.js 13 with Drizzle ORM & PlanetScale Starter Template is a GitHub-hosted boilerplate that wires together the Next.js App Router, server actions, Drizzle ORM, PlanetScale, and Tailwind CSS into a ready-to-run full-stack project.

What is Next.js 13 with Drizzle ORM & PlanetScale Starter Template?

This starter template is a pre-configured Next.js 13 application that demonstrates how to use the App Router, experimental server actions, Drizzle ORM, and a PlanetScale MySQL database together. It takes a developer through the setup flow of cloning the repository, adding a PlanetScale connection string, running the Drizzle migration push, and starting the development server on localhost:3000. The template is published under an MIT license on GitHub by user tuffstuff9 and targets Node.js v14 or newer.

Key Features

• Next.js App Router — Built on the current version of Next.js 13, using the app directory for file-based routing, layouts, and server components.
• Drizzle ORM — Pre-wired ORM for TypeScript that manages database schemas and queries, with a drizzle-kit push:mysql command to sync schema to the database.
• PlanetScale — Configured for PlanetScale's serverless MySQL database, requiring a DATABASE_URL environment variable and a modified SSL connection string.
• Tailwind CSS — Utility-first styling framework included for rapid UI development with no additional configuration needed.
• Server Actions — Experimental Next.js feature to run server-side mutations directly from client components, demonstrated in the template.
• useFormStatus hook — Includes the experimental useFormStatus hook from React/Next.js to manage pending states in form submissions.

Who is it for?

• Next.js developers who want a working example of the App Router and server actions together with a real database, rather than wiring it up from scratch.
• Developers evaluating Drizzle ORM who want a minimal, production-oriented setup with PlanetScale and a migration workflow.
• Hackathon or side-project builders who need a fast starting point with Tailwind and a MySQL-compatible serverless database already configured.

What can you do with it?

• Full-stack prototyping: scaffold a complete Next.js 13 app with server-side data mutations and a PlanetScale database in minutes by following the repository's setup instructions.
• Learning server actions: study the implementation of server actions and the experimental useFormStatus hook in a small, readable codebase.
• Database schema experimentation: use drizzle-kit push:mysql to push Drizzle schema changes directly to a PlanetScale branch, iterating on tables without writing SQL migrations by hand.

How does the template work?

1. Clone the repository and install dependencies with yarn or npm.
2. Create a .env file with a DATABASE_URL from your PlanetScale database, replacing ?sslaccept=strict with ?ssl={"rejectUnauthorized":true} in the connection string.
3. Run drizzle-kit push:mysql to push the Drizzle schema to PlanetScale.
4. Start the development server with yarn dev or npm run dev and open http://localhost:3000.

FAQ

Does this template use Tailwind CSS?

Yes, Tailwind CSS is included and configured as part of the starter template, so you can use utility classes immediately.

What database does the template work with?

PlanetScale, a serverless MySQL database. The template includes Drizzle ORM and a command to push schema changes to PlanetScale.

Is the template free to use?

The project is licensed under the MIT license, meaning you can use, modify, and distribute it freely with attribution.

What are the prerequisites?

The prerequisites are Node.js v14 or newer and a package manager like npm or Yarn. The setup steps are documented in the repository's README.