Use Supabase with NextJS
Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.
Set up a Supabase project with sample data
Create a new project in the Supabase Dashboard.
After your project is ready, create a table in your Supabase database using the SQL Editor in the Dashboard. Use the following SQL statement to create a countries
table with some sample data.
Create a NextJS app
Create a Next.js app using the create-next-app
command.
Install the Supabase client library
The fastest way to get started is to use the supabase-js
client library which provides a convenient interface for working with Supabase from a NextJS app.
Navigate to the NextJS app and install supabase-js
.
Create the Supabase client
In the /lib
directory of your Next.js app, create a file called supabaseClient.js
and add the following code to initialize the Supabase client with your project URL and public API (anon) key.
Query data from the app
Use the getServerSideProps
method to fetch the data server-side and display the query result as a simple list.
Replace the existing function in your index file in the pages
directory with the following code.
Start the app
Start the app and go to http://localhost:3000 in a browser and you should see the list of countries.