Build API-Only Projects with Next.js, Prisma, and Supabase

Pandiyan Murugan

Creating an API-only project in Next.js offers the flexibility to leverage the Next.js file-based routing system, API routes, and powerful integrations such as Prisma and Supabase. This setup will allow you to manage your database, interact with it via Prisma, and handle authentication and data with Supabase Postgres.

  1. Prerequisites
  2. Setting up the Project
  3. Installing Dependencies
  4. Configuring Supabase
  5. Setting up Prisma
  6. Creating API Routes in Next.js
  7. Deploying the API
  8. Conclusion

Prerequisites

Before starting, make sure you have the necessary installed:

  • Node.js (v16+)
  • Supabase Account (for database hosting)
  • Postgres Database (via Supabase)
  • Prisma ORM

Familiarity with Next.js, Prisma, and Supabase will also help.

Setting up the Project

First, set up a new Next.js project.

npx create-next-app@latest my-api-project
cd my-api-project

Since this is an API-only project, you can safely remove the default pages/index.tsx and pages/api/hello.ts files. We’ll focus on building our API inside the pages/api directory.

Installing Dependencies

Now, install the necessary dependencies for Prisma and Supabase:

npm install @prisma/client prisma @supabase/supabase-js
  • @prisma/client: The Prisma client to query the database.
  • prisma: The Prisma toolkit for schema migrations.
  • @supabase/supabase-js: Supabase JavaScript SDK for interacting with the Supabase database.

Configuring Supabase

  1. Create a New Supabase Project: Go to the Supabase dashboard and create a new project. Note down the API link, public anon key, and the database connection string from the Settings > API section.
  2. Set Up Environment Variables: In your Next.js project, create an .env.local file to store sensitive information like the database URL and Supabase keys.
NEXT_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
DATABASE_URL=postgresql://username:password@dbhost:5432/mydb
  • NEXT_PUBLIC_SUPABASE_URL: URL for your Supabase project.
  • NEXT_PUBLIC_SUPABASE_ANON_KEY: The public anonymous key for accessing Supabase from the frontend.
  • DATABASE_URL: The connection string to your Postgres database hosted on Supabase.

Setting up Prisma

  1. Initialize Prisma: Run the following command to initialize Prisma in your project.
npx prisma init

This creates a prisma folder with a schema.prisma file and updates your .env with DATABASE_URL.

  1. Update Schema: Open prisma/schema.prisma and define a model. For example:
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
  1. Migrate the Database: After updating the schema, apply the changes to your Supabase database:
npx prisma migrate dev --name init

This will create a User table in your Supabase Postgres database.

  1. Generate Prisma Client: Run the following command to generate the Prisma client.
npx prisma generate

Creating API Routes in Next.js

Next.js provides a simple way to create APIs using the /pages/api directory. Let’s create a basic CRUD API for the User model.

  1. Creating a User: Inside pages/api/user/index.ts, create a POST endpoint to add a new user.
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, name } = req.body;

    try {
      const user = await prisma.user.create({
        data: {
          email,
          name,
        },
      });
      res.status(201).json(user);
    } catch (error) {
      res.status(400).json({ error: 'User creation failed' });
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}
  1. Getting All Users: To fetch all users, add a GET request handler in the same file.
if (req.method === 'GET') {
  try {
    const users = await prisma.user.findMany();
    res.status(200).json(users);
  } catch (error) {
    res.status(400).json({ error: 'Failed to fetch users' });
  }
}

Now you have both POST and GET API endpoints ready for creating and fetching users.

Deploying the API

You can deploy your Next.js API project using Vercel, the creators of Next.js. Simply push your code to a GitHub repository and connect it to Vercel.

  1. Push Code to GitHub:
   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin <YOUR_GITHUB_REPO_URL>
   git push -u origin main
  1. Deploy to Vercel:
  • Sign in to Vercel and import your GitHub repository.
  • Add the necessary environment variables (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, and DATABASE_URL).
  • Click deploy, and your API will be live.

Conclusion

In this guide, you learned how to create an API-only project in Next.js with Prisma and Supabase Postgres. This stack provides a powerful yet flexible way to build backends quickly, with an API layer built into the Next.js framework.

You can now extend this API with additional models. You can integrate authentication using Supabase’s built-in auth tools. You can also expand it with more advanced features like pagination and filtering.

Happy Coding!

Leave a comment