supastarter for Next 13 (app router)
This guide will walk you through setting up supastarter for Next.js 13. We will go through the process of cloning the project, installing dependencies, setting up your database and running the local development server.
Tools & libraries
Before we start I quickly want to go over the tools and libraries that supastarter uses.
- 🚀 TurboRepo (opens in a new tab) -> Monorepo
- 👨🏼💻 Next 13 with app router (opens in a new tab) -> React framework
- 💽 Prisma (opens in a new tab) -> ORM (Database access layer)
- 🔐 Lucia Auth (opens in a new tab) -> Authentication
- 💅🏼 Tailwind CSS (opens in a new tab) -> CSS framework
- 🧩 Radix UI (opens in a new tab) -> Headless components
- 📝 Contentlayer (opens in a new tab) -> MDX based CMS
- 💳 Stripe (opens in a new tab) or Lemonsqueezy (opens in a new tab) -> Payment processing
Prerequisites
Before you can get started, you will need to have the following installed on your machine.
- Node.js (opens in a new tab) (v18 or higher)
- Git (opens in a new tab)
- Github account (opens in a new tab)
- pnpm (opens in a new tab)
- VSCode (opens in a new tab) (recommended, or any other code editor)
Project setup
Create a new repository
The first thing you need to do is create a new repository on the git provider of your choice. Copy the URL of the repository (that ends with .git), we will need it in the next step.
Create a new database
supastarter uses Prisma (opens in a new tab) as an ORM (database access layer). This means you can use any database supported by Prisma, including PostgreSQL, MySQL, SQLite, and MongoDB. You can find all supported databases here (opens in a new tab).
Before creating a new supastarter project, make sure to have created a new database and have the connection string ready. For example when using PostgreSQL, the connection string will look something like this:
postgresql://user:password@host:port/database
Recommended database providers are Supabase (opens in a new tab), PlanetScale (opens in a new tab) and Neon (opens in a new tab).
Initialize a new supastarter project
During the setup process you will be asked to provide the following information:
- Project name - The name of your project
- Database provider - The database provider you are using
- Database connection string - The connection string of your database
- Github repository URL - The URL of the repository you created in the previous step
To create a new supastarter project all you need to do is run the following command (replace my-awesome-project
with the name of your project):
npx supastarter new my-awesome-project
This will clone the supastarter repository, install all the dependencies and set up the database for you.
Start your development server
Now your app should be ready to go. To start the local development server, navigate into your project root folder and run the following command.
pnpm dev
Open http://localhost:3000 (opens in a new tab) in your browser to see the your app.