xiaole

What is supabase#

supabase is an open-source BaaS project that serves as an alternative to Firebase. It provides stable, powerful, easy-to-use, and scalable backend functionality required by various modern applications. Supabase is built on PostgreSQL database and RESTful API, and it offers authentication, real-time data streaming, storage, and other common backend services.

You don't need to buy servers, just have a basic understanding of SQL statements and database knowledge to create a backend service. Of course, it has very powerful features, but this article only focuses on how to use it in Next.js.

Using supabase#

Detailed reading of the official documentation is required for learning tasks.

According to the content in the official documentation Use Supabase with NextJS, the usage steps are as follows:

Here, I am using supabase to store the number of views for a blog.

Creating a project and setting up tables and data#

Create a project through https://app.supabase.com/projects

Create a table named "Views" in the SQL editor or the graphical interface of the Database.

Here, I am creating it through the graphical interface. In the Database, use the "New table" option in the top right corner to create the "Views" table.

The "slug" in the columns represents the title of the blog, and "count" represents the corresponding blog's view count.

Creating a Next.js project#

npx create-next-app@latest --typescript

Installing supabase-js#

npm install @supabase/supabase-js

Creating supabase#

Create a folder named "lib" in the root directory, and create a file named "supabase.ts" inside it.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_KEY as string;
export const supabase = createClient(supabaseUrl, supabaseKey);

The "supabaseUrl" and "supabaseKey" can be found in the project's settings.

It is not recommended to expose the key, so it can be stored in the env.local file.

💡 tips: In Next.js, when using env.local, you need to add the prefix "NEXT_PUBLIC", otherwise it will throw an error.

CRUD#

Detailed commands can be found in the JavaScript documentation.

When opening a blog post page, you need to retrieve the view count of the current blog. You can use:

fetch(`/api/views`);

Create an index.ts file in the pages/api/views directory:

import { supabase } from '@/lib/supabase';
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    let { data } = await supabase.from('Views').select('*');
    return res.status(200).json(data);
  } catch (e: any) {
    console.log(e);
    return res.status(500).json({ message: e.message });
  }
}

By writing SQL-like statements, you can retrieve all the data from the "Views" table.

You can also pass the slug as a parameter through a POST request to retrieve the corresponding data.

At the same time, when opening a blog post page, you also need to increment the view count of the current blog. You can use a POST request to pass the slug parameter:

fetch(`/api/views/${slug}`, {
	method: 'POST'
});

Create a file named "[slug].ts" in the pages/api/views directory:

import { supabase } from '@/lib/supabase';
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const slug = req.query?.slug as string;
    if (!slug) {
      return res.status(400).json({ message: 'Slug is required.' });
    }

    const { data } = await supabase
      .from('Views')
      .select('count')
      .eq('slug', slug);

    const views = !data?.length ? 0 : Number(data[0].count);

    if (req.method === 'POST') {
      if (views === 0) {
        await supabase.from('Views').insert({ count: views + 1, slug: slug });

        return res.status(200).json({
          total: views + 1
        });
      } else {
        await supabase
          .from('views')
          .update({ count: views + 1 })
          .eq('slug', slug);
        return res.status(200).json({
          total: views + 1
        });
      }
    }

    if (req.method === 'GET') {
      return res.status(200).json({ total: views });
    }
  } catch (e: any) {
    console.log(e);
    return res.status(500).json({ message: e.message });
  }
}

Use "insert" for creating and "update" for updating. This way, the view count can be stored in supabase.

Other features#

Supabase also supports bucket storage. In my project, I store the og image in supabase.

I will continue using supabase in the upcoming projects as a replacement for Firebase.