Setting Up Supabase API for Next.js 14 App with Server-Side Rendering (SSR)

Creating a Supabase client for SSR from the Next.js docs

Setting up a Next.js application to use Supabase with PostgreSQL for CRUD operations can be streamlined with the @supabase/ssr package. This guide will walk you through configuring client and server functions to connect to Supabase, enabling you to perform CRUD operations from both client and server components without focusing on authentication.

Prerequisites

• Next.js 14 with the App Router
• Supabase project with configured URL and anon key
• Node.js and npm

Step 1: Install Required Packages

Install the Supabase packages to enable SSR capabilities and direct database connectivity:

bashCopy
npm install @supabase/ssr @supabase/supabase-js

Step 2: Configure Environment Variables

In the root of your Next.js project, create a .env.local file to store your Supabase credentials:

plaintextCopy
# .env.local
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

• Replace your_supabase_project_url and your_supabase_anon_key with your project’s actual values, which you can find in the Supabase dashboard under Project Settings > API.

Step 3: Create Supabase Client Functions

3.1 Client-Side Supabase Client (/utils/supabase/client.ts)

This client function is for browser-based operations, making it suitable for CRUD actions that don’t require server-side capabilities.

typescriptCopy
// /utils/supabase/client.ts
import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL as string,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
  );
}

The createClient function initializes a Supabase client configured with your environment variables, ready to handle client-side data operations.

3.2 Server-Side Supabase Client (/utils/supabase/server.ts)

This server-side client setup will be used in API routes or server components, ideal for secure data manipulation without exposing credentials to the client.

typescriptCopy
// /utils/supabase/server.ts
import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export async function createClient() {
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL as string,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string,
    {
      cookies: {
        getAll() {
          return cookies().getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => {
            cookies().set(name, value, options);
          });
        },
      },
    }
  );
}

This configuration provides a secure connection to your Supabase database using SSR. Although you may not need cookies for CRUD-only operations, this setup future-proofs your configuration should you add authentication.

Step 4: Usage Example for CRUD Operations

Now, with both client and server functions created, you can use createClient from /utils/supabase/client in client-side components and from /utils/supabase/server in server-side components or API routes. Here’s how to initialize the Supabase client for CRUD operations:

• Server-Side Component or API Route: Call await createClient() from server.ts to interact with the database.
• Client-Side Component: Use createClient() from client.ts to fetch or manipulate data directly in React components.

Conclusion

With this setup, your Next.js app can now perform CRUD operations using Supabase as a PostgreSQL database. This configuration offers flexibility to expand your application, letting you add authentication or session management later as needed.