Tutorial: Deploying Directus with Supabase and Next.js on Vercel

1

Overview

In this tutorial, you’ll learn how to integrate Directus with Supabase for database management, use Next.js for your frontend, and deploy the whole setup on Vercel.

Step 1: Setting Up Supabase

  1. Create a Supabase Account and Project:

    • Visit Supabase and sign up.
    • Create a new project in Supabase and take note of your project’s URL and anon key.

  2. Set Up Your Database Schema:

    • Use the Supabase UI to create tables and define relationships as needed for your project.

Step 2: Integrating Directus

  1. Install Directus (Optional):

    • You might want to use Directus locally to define your content schema. However, it’s important to note that Directus and Supabase serve similar purposes as headless CMS, and typically, you would choose one over the other.

  2. Configure Directus with Supabase (If Using Both):

    • If you decide to use Directus, you’ll need to configure it to use your Supabase database. This might involve custom configuration and adapting Directus to work with Supabase’s PostgreSQL database.

Step 3: Creating a Next.js Application

  1. Set Up a New Next.js Project:

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

  2. Install Supabase Client:

    npm install @supabase/supabase-js

  3. Integrate Supabase:

    • In your Next.js project, initialize Supabase:
      import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

  4. Fetch Data from Supabase:

    • Create a function to fetch data from your Supabase tables:
      export async function fetchData() {
  let { data, error } = await supabase
    .from('your_table')
    .select('*');
  if (error) throw error;
  return data;
}

  5. Use the Data in Next.js Pages:

    • Example in pages/index.js:
      import { fetchData } from '../path/to/your/fetchFunction';

export default function Home({ data }) {
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.field}</div>
      ))}
    </div>
  );
}

export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

Step 4: Deploying on Vercel

  1. Push Your Next.js Project to GitHub:

    • Ensure your Next.js project, with Supabase integration, is in a GitHub repository.

  2. Sign Up/Login to Vercel:

    • Go to Vercel and sign up or log in.

  3. Import Your GitHub Repository:

    • On Vercel, create a new project and import your Next.js GitHub repository.

  4. Set Environment Variables:

    • In your Vercel project settings, set the environment variables like YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY.

  5. Deploy:

    • Vercel will automatically deploy your Next.js project. You can view the deployment URL provided by Vercel.

Conclusion

You’ve successfully integrated Directus with Supabase for database management, developed a Next.js frontend, and deployed it on Vercel. This setup gives you a powerful combination of a flexible CMS, a robust database, and a modern frontend framework.