MakerKit is a SaaS starter project built with Next.js, Supabase and Tailwind CSS.

This is a Next.js project bootstrapped with create-next-app.

This is a quick guide to get you started with the project. For more details, please refer to the documentation.

Ensure you have the following installed:

• Node.js
• Git
• Docker

Clone this repository and name it according to your preferences:

git clone https://github.com/makerkit/next-supabase-saas-kit.git your-saas --depth=1

Move to the folder just cloned:

cd your-saas

Reinitialize Git and set this repository as your upstream fork, so you can pull updates when needed:

rm -rf .git
git init
git add .
git commit -am "Inital Commit"
git remote add upstream https://github.com/makerkit/next-supabase-saas-kit

We recommend to watch to the repository, so you know when there's an update. To pull the latest updates, use:

git pull upstream main --allow-unrelated-histories

In case we change the same files, you will need to resolve the conflicts.

Alternatively, you can cherry-pick changes so to reduce the amount of conflicts across the files.

Install the Node modules with the following command:

npm i

First, run the Supabase stack:

npm run supabase:start

NB: this does not run your remote Supabase project, but a local instance using Docker. This is useful for development and testing.

For production, you will need to copy your remote instance keys, and push the database migrations to your remote instance.

My recommendation is to use the local instance for development, and the production instance when you're ready to deploy. Please set up the local instance first before attempting to use the production instance.

If you are planning to deploy Supabase to production right away, please ensure you read this guide by Supabase first.

If this is the first time you run this command, we will need to get the Supabase keys and add them to our local environment variables configuration file .env.local. The file does not exist because it's not supposed to be pushed to the repository: please create it and add the environment variables below.

When running the command, we will see a message like this:

> supabase start

Applying migration 20221215192558_schema.sql...
Seeding data supabase/seed.sql...
Started supabase local development setup.

         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: ****************************************************
service_role key: ****************************************************

Now, we need to copy the anon key and service_role key values and add them to the .env.local file:

NEXT_PUBLIC_SUPABASE_ANON_KEY=****************************************************
SUPABASE_SERVICE_ROLE_KEY=****************************************************

Now, generate the DB types with:

npm run typegen

Then, run the Next.js development server:

npm run dev
# or
yarn dev
# or
pnpm dev

If you're testing Stripe, also run the Stripe server (requires Docker running):

npm run stripe:listen

Then, copy the printed webhook key and add it to your environment files. This can also be used for running the E2E tests.

The environment variable name is STRIPE_WEBHOOK_SECRET.

STRIPE_WEBHOOK_SECRET=whsec_***********************

Open http://localhost:3000 with your browser to see the result.

Make sure to add the environment variables to the provider you're deploying.

Before running tests, add the required environment variables to your .env.test file:

SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

Retrieve the keys after starting the Supabase server and paste them in the .env.test file.

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.