Getting Started

Getting Started with Supabase by integrating it to a Next.js application

What is Supabase?

Supabase can simply be defined as an alternative to Firebase. Diving deeper, Supabase provides core services such as database, authentication, file storage, and autogenerated APIs. It is very useful for frontend developers or mobile developers are you can have a simple functional backend in less than 10 minutes. In this article, we will see how to integrate Supabase into a Next.js application. You can read more about the Next.js project here. However, if you are in hurry feel free to clone and set up the project.

git clone https://github.com/app-generator/sample-next-js-getting-started.git

Then create a new branch called supabase.

git checkout -b supabase

The project serves some products but it's actually retrieving the data from a json file. We will use supabase to fetch the products information. Let's start by retrieving API keys and creating a Product table in the Supabase dashboard.

Supabase setup

Make sure to have an account created at Supabase. When the account is created and verified, you can create a new project.

Button to create a project

Then, enter the necessary information to create the project.

Creating project

After that, you will have access to options on the Dashboard. We need to create a new table and insert data. We will do this directly in the SQL editor.

Clicking on SQL editor

Here's the SQL script.

create table "Product" (
  id bigint generated by default as identity primary key,
  name text,
  image text,
  price bigint
);

insert into "Product"
  (name, price, image)
values
  (
    'Syrup - Chocolate',
    1,
    'https://iambaker.net/wp-content/uploads/2020/05/syrup-fb.jpg'
  ),
  (
    'Cookies Oatmeal Raisin',
    5,
    'https://i0.wp.com/www.livewellbakeoften.com/wp-content/uploads/2020/08/Oatmeal-Raisin-Cookies-9.jpg'
  ),
  (
    'Longos - Grilled Chicken With',
    10,
    'https://i0.wp.com/www.themodernnonna.com/wp-content/uploads/2022/04/Easiest-2-Ingredient-Baked-Chicken.jpeg'
  ),
  (
    'Dried Figs',
    4,
    'https://www.bottegadicalabria.com/media/magefan_blog/Fichi_secchi_1200X800.jpg'
  ),
  (
    'Stock - Veal, White',
    40,
    'https://images.ctfassets.net/3s5io6mnxfqz/VEXn1Oiog0DgbUNU79cja/7016c63c031ee03abfb57548c5c10af4/AdobeStock_214296869.jpeg'
  );

Now you will have a ready-to-use Table with data we can fetch.

Configuring supabase client

We’ll need to install the Supabase client package to connect to our Next.js app later. We can do so by running the following command.

yarn add @supabase/supabase-js

After that, create a new file in the project root called supabaseClient.js.

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

We are using environment variables so we need to create a .env file at the root of the project.

To avoid unexpected behaviors, keep the .env file and the supabaseClient.js in the same directory.

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

You can find the keys on the project page.

Supabase keys

Let's fetch the product list from Supabase now.

Fetching data from the Supabase backend

In the pages/index.js file, add an asynchronous function to fetch data from supabase.

...
import { supabase } from "../supabaseClient";

const getProducts = async () => {
  const { data, error } = await supabase.from("Product").select("*");

  return data;
};
...

The supabase client provides functions and methods to fetch data from a Table in the most intuitive way possible. Remove this line from the imports to avoid conflicts.

import getProducts from "./api/products"; // remove

Start the dev server and head to http://localhost:3000.

Final result

Conclusion

In this document, we made a quick introduction to Supabase by learning how to set up a project, create a table and fetch data. In the next steps, we will dive into authentication and more complex CRUD operations using Next.js and Supabase.