Getting Started

nextstarter for Next.js 14

This guide will walk you through setting up nextstarter for Next.js (with app router). We will go through the process of 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 nextstarter uses.

Prerequisites

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

Project setup

Create a new database

nextstarter 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 nextstarter 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 nextstarter 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

First, we are going to install all the dependencies. Make sure you have installed pnpm (opens in a new tab) before running the following command:

pnpm install

Now, we need to set up the environment variables. To do this, copy the .env.local.example file in the root of your project and rename it to .env.local.

Then open the .env.local file and set at least the DATABASE_URL:

.env.local
# Database
DATABASE_URL="YOUR_DATABASE_CONNECTION_STRING"

This is also the place to set the variables for your mailing provider.

Here are the necessary variables for each provider:

  • Plunk -> PLUNK_API_KEY
  • Resend -> RESEND_API_KEY
  • Postmark -> POSTMARK_SERVER_TOKEN
  • Nodemailer -> MAIL_HOST, MAIL_PORT, MAIL_USER, MAIL_PASS

Next, we need to link the correct providers for payments and mailing.

In the /packages/mail/providers/index.ts file, set the export to the provider you want to use:

export  from './plunk';
// or export * from './resend';
// or export * from './postmark';
// or export * from './nodemailer';

Do the same for the payment provider in the packages/api/modules/billing/provider/index.ts file:

export * from './stripe';
// or export * from './lemonsqueezy';

Next step is to migrate your database. Make sure to check your schema in packages/database/prisma/schema.prisma before.

To migrate the database, run the following command:

pnpm db:push

Then, to generate the Prisma client, run the following command:

pnpm db:generate

Set up your storage provider

Storage is necessary to upload and serve files like images for example for the avatars of users and teams. nextstarter supports multiple storage providers, so please ollow the instructions for your preferred provider:

S3 or S3 compatible (like Cloudflare R2)Supabase Storage

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) (opens in a new tab) in your browser to see the your app.

Project structure & architecture