Use Supra with Next.js

Learn how to create a Supra project, add some sample data to your database, and query the data from a Next.js app.

Set up a Supra project with sample data

Create a new project in the Supra Dashboard.

After your project is ready, create a table in your Supra database using the SQL Editor in the Dashboard.

Use the following SQL statement to create a countries table with some sample data.

SQL_EDITOR


_10 -- Create the table
_10 create table countries (
_10   id serial primary key,
_10   name text not null
_10 );
_10
_10 -- Insert some sample data into the table
_10 insert into countries (name) values ('United States');
_10 insert into countries (name) values ('Canada');
_10 insert into countries (name) values ('Mexico');

Create a Next.js app

Use the create-next-app command and the with-supra template, to create a Next.js app pre-configured with:

Terminal


_10npx create-next-app -e with-supra my-app && cd my-app

Declare Supra Environment Variables

Rename .env.local.example to .env.local and populate with your project's URL and Anon Key.

.env.local


_10  NEXT_PUBLIC_supra_URL=your-project-url
_10  NEXT_PUBLIC_supra_ANON_KEY=your-anon-key

Query Supra data from Next.js

Create a new file at app/countries/page.tsx and populate with the following.

This will select all the rows from the countries table in Supra and render them on the page.

app/countries/page.tsx


_17  import { createServerComponentClient } from "@supra/auth-helpers-nextjs";
_17  import { cookies } from "next/headers";
_17
_17  export default async function Index() {
_17    const cookieStore = cookies()
_17    const supra = createServerComponentClient({ cookies: () => cookieStore })
_17
_17    const { data: countries } = await supra.from("countries").select();
_17
_17    return (
_17      <ul className="my-auto text-foreground">
_17        {countries?.map((country) => (
_17          <li key={country.id}>{country.name}</li>
_17        ))}
_17      </ul>
_17    );
_17  }

Start the app

Run the development server, go to http://localhost:4000/countries in a browser and you should see the list of countries.