Plasmic & Prisma Starter

This repository provides a boilerplate to quickly set up a Next.js application with authentication using Auth.js, Prisma Postgres and Prisma ORM, connect to Plasmic and deploy it to Vercel. It includes an easy setup process and example routes that demonstrate basic CRUD operations against the database.

Features

• Next.js 15 app with App Router, Server Actions & API Routes
• Data modeling, database migrations, seeding & querying
• Log in and sign up authentication flows
• CRUD operations to create, view and delete blog posts
• Pagination, filtering & relations queries
• Visual development with Plasmic

Getting started

1. Install dependencies

After cloning the repo and navigating into it, install dependencies:

yarn

1. Create a Prisma Postgres instance

Create a Prisma Postgres instance by running the following command:

npx prisma init --db

This command is interactive and will prompt you to:

1. Log in to the Prisma Console
2. Select a region for your Prisma Postgres instance
3. Give a name to your Prisma project

Once the command has terminated, copy the Database URL from the terminal output. You'll need it in the next step when you configure your .env file.

2. Set up your .env file

You now need to configure your database connection via an environment variable.

First, create an .env file:

touch .env

Then update the .env file by replacing the existing DATABASE_URL value with the one you previously copied. It will look similar to this:

DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"

To ensure your authentication works properly, you'll also need to set env vars for NextAuth.js:

AUTH_SECRET="RANDOM_32_CHARACTER_STRING"

You can generate a random 32 character string for the AUTH_SECRET secret with this command:

npx auth secret

In the end, your entire .env file should look similar to this (but using your own values for the env vars):

DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcGlfa2V5IjoiMWEzMjBiYTEtYjg2Yy00ZTA5LThmZTktZDBhODA3YjQwZjBkIiwidGVuYW50X2lkIjoiY2RhYmM3ZTU1NzdmMmIxMmM0ZTI1Y2IwNWJhZmZhZmU4NjAxNzkxZThlMzhlYjI1NDgwNmIzZjI5NmU1NTkzNiIsImludGVybmFsX3NlY3JldCI6ImI3YmQzMjFhLTY2ODQtNGRiMC05ZWRiLWIyMGE2ZTQ0ZDMwMSJ9.JgKXQBatjjh7GIG3_fRHDnia6bDv8BdwvaX5F-XdBfw"

AUTH_SECRET="gTwLSXFeNWFRpUTmxlRniOfegXYw445pd0k6JqXd7Ag="

3. Migrate the database

Run the following commands to set up your database and Prisma schema:

npx prisma migrate dev --name init

4. Seed the database

Add initial data to your database:

npx prisma db seed

5. Create a Plasmic project

Create an account in Plasmic Studio, and then follow this guide to create the project in Plasmic.

6. Connect Plasmic to your codebase

You need to connect your Plasmic project with the codebase. To do that, you will need to change following variables in plasmic-init.ts:

• id - id of your project in Plasmic, can be found in the URL bar when opening the project
• token - public project token, can be found when clicking Code button in the top right corner of a project navbar.

7. Run the app

Start the development server:

yarn dev

Once the server is running, visit http://localhost:3000 to start using the app.

8. Configure Plasmic project app host

To see your code components inside Plasmic you will need to follow this short guide to configure the app host - a bridge between the codebase and the studio.

Next steps

• Prisma ORM documentation
• Prisma Client API reference
• Join our Discord community
• Follow us on Twitter