> Canonical URL: https://codingcat.dev/post/supabase-nextjs-and-builderio

# Supabase, Next.js and Builder.io

✏️ Blog PostJune 12, 2022

# Supabase, Next.js and Builder.io

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d4babb7ffb9548d3bd4406f7d65f901678ff876b-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=yPohaXjNqxU&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)

## What are similar tools to Supabase that you may have used?

- [Firebase](https://firebase.google.com/) - Most are trying to match features of Firebase. Offers a realtime JSON database and a document based database called Firestore. Closed source available on Google Cloud Platform.
- [Apprite](https://appwrite.io/) - Allows for a Docker image to be hosted anywhere that you want, with a MariaDB database.
- [Nhost](https://nhost.io/) - Postgres Database hosted on Hasura.

## Getting Started with Supabase

Once you [sign in](https://app.supabase.com/) to Supabase’s dashboard you will be presented with the option to create a new Project ( you may also need to create an organization).

## Live Coding

[GitHub Repo](https://github.com/codercatdev/supabase-nextjs.git) - Final project that you can run locally, just make sure to add your own `.env` files.

Jon and I talk about how to setup Supabase for Authentication first. We talk about the Magic Link system where you can open a url in your email to login. We then dive into the code.

## Connection

You must get your API keys from `/project/[yourproject]/settings/api` and add them to `.env`.

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a3dd511a2e4d59d1c431717f4a4046b12e905ecf-3322x1626.png?w=1600&q=82&fit=max&auto=format)

You will need to make sure you have a supabase instance created from your configuration to connect the client side of your application.

`/utils/supabaseClient.js`

Copied! 🐾

```
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);
```

## Authentication

How to easily check for authenticated user and show a react component.

`/pages/sports.js`

Copied! 🐾

```
import Sports from '../components/Sports';
import { useState, useEffect } from 'react';
import { supabase } from '../utils/supabaseClient';

export default function Home() {
	const [session, setSession] = useState(null);
	const [me, setMe] = useState(null);
	useEffect(() => {
		setSession(supabase.auth.session());

		supabase.auth.onAuthStateChange((_event, session) => {
			setSession(session);
		});
	}, []);
	return (
		<>

				{session ?  : Please Login}

	);
}
```

## Data

In Supabase you can see data in your Postgres database.

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/07b7a02255dd81c23236fb8ec4ad1a2cc08f87c8-2544x1234.png?w=1600&q=82&fit=max&auto=format)

Supabase uses [PostgREST](https://postgrest.org/en/stable/) to then allow you to access this table.

### Access Data in the Client

This is our full sports page that brings in all of our sports table. There are a couple things to call out here.

- You can add sports by just calling `supabase.from('sports').insert`
- When you setup a listener you get the full payload `supabase.from('sports').on('*', (payload)`

Copied! 🐾

						{sports?.map((sport) => (

- {sport.image && ( image.src} src={sport.image} width="100px" height="100px" alt={sport.name} /> )} {sport.name}
						))}

			)}

	);
}
" aria-label="Copy code" title="Copy code to clipboard">

```
import { supabase } from '../utils/supabaseClient';
import { faker } from '@faker-js/faker';
import { useEffect, useState } from 'react';
import Image from 'next/image';

export default function Sports({ session }) {
	const [sports, setSports] = useState([]);
	useEffect(() => {
		const sub = supabase
			.from('sports')
			.on('*', (payload) => {
				setSports((current) => [payload.new, ...current]);
				// supabase
				//   .from('sports')
				//   .select('*')
				//   .order('created_at', { ascending: false })
				//   .then((d) => console.log(d));
			})
			.subscribe();
		supabase
			.from('sports')
			.select('*')
			.order('created_at', { ascending: false })
			.then((d) => setSports(d.data));
		return () => {
			if (sub) sub.unsubscribe();
		};
	}, []);

	const addSports = async () => {
		const name = faker.name.findName();
		const image = faker.image.sports(null, null, true);
		await supabase.from('sports').insert([{ name, image }]);
	};
	return (

			{session && (

					 addSports()}>Add Sports

						{sports?.map((sport) => (

- {sport.image && ( image.src} src={sport.image} width="100px" height="100px" alt={sport.name} /> )} {sport.name}
						))}

			)}

	);
}
```

### Policies

In order to protect your data you need to setup Policies. These are pretty awesome because they can be written at any level within your table.

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/be134ebcbbdec20ce7baafa6038f3b7b62fedd49-1558x1418.png?w=1558&q=82&fit=max&auto=format)

## Builder.io

You can access [Builder.io’s Dashboard](https://builder.io/content?utm_source=codingcatdev). If you hit (CMD or CTRL) + P, and type in API this will give you your API key.

In Next.js `getStaticProps` you can get all the data for your page. This is where we willl look for pages that are created in builder. Pass that data to the client.

Copied! 🐾

```
const page =
	(await builder
		.get('page', {
			apiKey: 'e89fbe16533145d4ae320467ed536a91',
			userAttributes: isPersonalizedRequest
				? {
						// if it's a personalized page let's fetch it:
						...getTargetingValues(params.path[0].split(';').slice(1))
				  }
				: {
						urlPath: '/' + (params?.path?.join('/') || '')
				  },
			cachebust: true
		})
		.toPromise()) || null;
```

Get our sports data from [Supabase](https://supabase.com/) and pass to client.

Copied! 🐾

```
const { data: sports } = await supabase
	.from('sports')
	.select('*')
	.order('created_at', { ascending: false });
```

Then display both our page and data using a single component.

Copied! 🐾

```

```

That is all it takes to hook up [Builder.io](http://builder.io/?utm_source=codingcatdev) and start interacting with the data from Supabase using the state.

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Supabase, Next.js and Builder.io Full Video](https://www.youtube.com/watch?v=yPohaXjNqxU) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- [**Supabase Documentation:**](https://supabase.com/docs) Postgres database, Row Level Security, Edge Functions, and Vector search
- [**Builder.io Developer Documentation:**](https://www.builder.io/c/docs/developers?utm_source=codingcatdev) Visual headless CMS, SDKs, and design-to-code workflows
- [**Next.js Official Documentation:**](https://nextjs.org/docs) App Router, Server Actions, and rendering architecture guides

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Supabase, Next.js and Builder.io**](/podcast/supabase-next-js-and-builder-io): Jon Meyers sits down with Alex to talk about Supabase, Next.js and Builder.io.
- [**Supabase an Open Source Alternative**](/podcast/2-3-supabase-an-open-source-alternative): We sit down with Jon Meyers, developer advocate at Supabase. We talk all about supabase and the architecture features along with a live demo.
- [**Using No-Code with Builder - Part 1**](/podcast/2-1-using-no-code-with-builder-io-part-1): In this first part Alex sits down with Steve Sewell to understand how http://builder.io/ is different from other no-code solutions.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Supabase, Next.js and Builder.io?

We will walk through how to get up and running on Next.js with Supabase. Then we will build UI using http://builder.io/. Supabase, Next.js and Builder.io: We will walk through how to get up and running on Next.js with Supabase. Then we will build UI using Builder.io. https://codingcat.dev/tutorial/supabase-nextjs-and-builderio, hey perfect peeps uh this is the perfect dev background look at that john i didn't i didn't even check on that yet i wonder if our branding switches if i switch over let's see uh uh background oh that's the old one you could use that i was expecting like your physical background behind you was gonna start swapping and then i should have put the green screen up i mean it's it is like we have enough... Throughout this post, Alex Patterson breaks down real-world implementation details for Supabase, Builder.io, Next.js so developers can apply these patterns directly in production.

### How do you implement Supabase best practices in production?

When adopting Supabase and Builder.io in a production stack, start by validating your configuration against the [**Supabase Documentation**](https://supabase.com/docs) (Postgres database, Row Level Security, Edge Functions, and Vector search). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Supabase, Next.js and Builder.io walkthrough and find related code resources?

You can watch the complete video session for [**Supabase, Next.js and Builder.io**](https://www.youtube.com/watch?v=yPohaXjNqxU) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Supabase, check out our related guide: [**Supabase, Next.js and Builder.io**](/podcast/supabase-next-js-and-builder-io).

## ✏️ Video Summary

Supabase, Next.js and Builder.io: We will walk through how to get up and running on Next.js with Supabase. Then we will build UI using Builder.io.

https://codingcat.dev/tutorial/supabase-nextjs-and-builderio — hey perfect peeps uh this is the perfect dev background look at that john i didn't i didn't even check on that yet i wonder if our branding switches if i switch over let's see uh uh background oh that's the old one you could use that i was expecting like your physical background behind you was gonna start swapping and then i should have put the green screen up i mean it's it is like we have enough...

✏️ Visual Architecture Diagram

## how this post connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Supabase, Next.js and Builder.io✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Supabase, Next.js and Builder.io: start with Supabase, Next.js and , implement Hands-On Implementation, and ship to production.AAA Contrast Verified

## related deep dives.

[All Blog Posts&rarr;](/blog)[![The Firebase plugin is now available in Codex: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/4e2c8e99f437cb576972d406ec32394a82a19480-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2026-09-firebase-plugin-for-codex)September 29, 2026[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[AI & MCP Agents](/topic/ai)

### [The Firebase plugin is now available in Codex: Web Architecture & Implementation Guide](/post/firebase-2026-09-firebase-plugin-for-codex)

Alex Patterson's hands-on web engineering breakdown of "The Firebase plugin is now available in Codex" (2026-09-28). Learn how to wire up Firebase, Google Cloud, Web Dev, AI in production web apps.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Zero-Cold-Start Edge Stack: Astro 7, Cloudflare Workers, D1 & Better-Auth](https://cdn.sanity.io/images/hfh83o0w/production/f808b9efcde75df0f0e889806b674881f0ac32c6-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/zero-cold-start-edge-stack)November 1, 2026[Astro](/topic/astro)[Cloudflare](/topic/cloudflare)

### [The Zero-Cold-Start Edge Stack: Astro 7, Cloudflare Workers, D1 & Better-Auth](/course/zero-cold-start-edge-stack)

Ship sub-10ms full-stack TypeScript web applications at the edge using Astro 7 Server Islands, Cloudflare Workers V8 Isolates, Cloudflare D1 SQLite, and self-hosted Better-Auth.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)