supastarter documentation

內容

Documentation

Next.js

Getting started

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.

Prerequisites

Before you can get started, you will need to have the following installed on your machine.

Project setup

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).

You can also find setup guides for certain providers in the supastarter blog (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

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.

If you get any errors during the setup process, please try the manual setup instead.

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.

Open http://localhost:3000 (opens in a new tab) in your browser to see the your app.

OverviewProject structure & architecture

連結
https://docs.supastarter.dev/2.0/nextjs/getting-started
總結
This guide provides instructions for setting up supastarter for Next.js 13, including cloning the project, installing dependencies, setting up the database, and running the local development server. The tools and libraries used include TurboRepo, Next 13 with app router, Prisma, Lucia Auth, Tailwind CSS, Radix UI, Contentlayer, Stripe or Lemonsqueezy, and React Email. Prerequisites for getting started include Node.js, Git, pnpm, and a code editor. The project setup involves creating a new database supported by Prisma, initializing a new supastarter project by providing project name, database provider, and connection string, and starting the development server. Recommended database providers are Supabase, PlanetScale, and Neon, with setup guides available on the supastarter blog.