Walkthrough · Project build
Add a database with Supabase
Connect
Show your notes on a page, and let visitors add their own.
1. Install the Supabase library. In your terminal, from your project folder (cd ~/projects/my-project):
bash
npm install @supabase/supabase-jsWhat you should see
A line like added 10 packages. Warnings about funding can be ignored.2. Get your project address and key. In Supabase, click the Connect button at the top of your project, choose App Frameworks and Next.js, and find the two values under .env.local: the project URL and the publishable key (it starts with sb_publishable_).
3. Save them in your project. In your code editor, create a new file called .env.local in the top folder of your project, next to package.json. Paste this in and replace the two placeholders with your values:
env
NEXT_PUBLIC_SUPABASE_URL=paste-your-project-url-here
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=paste-your-publishable-key-hereWhat you should see
Nothing to run. Save the file.4. Create the connection. Make a new folder called lib in the top folder of your project, and inside it a file called supabase.ts:
ts
import { createClient } from "@supabase/supabase-js";
// One connection to your database, shared by every page.
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
);5. Create the page. Inside the app folder, make a folder called guestbook, and inside it a file called page.tsx:
tsx
import { revalidatePath } from "next/cache";
import { supabase } from "@/lib/supabase";
// Read fresh notes on every visit, instead of once at build time.
export const dynamic = "force-dynamic";
async function addNote(formData: FormData) {
"use server";
const message = String(formData.get("message") ?? "").trim();
if (!message) return;
await supabase.from("notes").insert({ message });
revalidatePath("/guestbook");
}
export default async function GuestbookPage() {
const { data: notes, error } = await supabase
.from("notes")
.select("id, message")
.order("created_at", { ascending: false });
return (
<main className="mx-auto max-w-xl p-8">
<h1 className="text-2xl font-bold">Guestbook</h1>
<form action={addNote} className="mt-6 flex gap-2">
<input
name="message"
required
maxLength={280}
placeholder="Say hello"
className="flex-1 rounded border px-3 py-2"
/>
<button className="rounded bg-black px-4 py-2 text-white">Post</button>
</form>
{error ? <p className="mt-6 text-red-600">{error.message}</p> : null}
<ul className="mt-6 space-y-2">
{notes?.map((note) => (
<li key={note.id} className="rounded border p-3">
{note.message}
</li>
))}
</ul>
</main>
);
}6. Try it. If npm run dev is already running, stop it with Ctrl+C and start it again, so it reads your new .env.local file. Then open http://localhost:3000/guestbook.
bash
npm run devWhat you should see
Your guestbook page, showing the test note you added in the dashboard. Post a message and it appears at the top of the list. Refresh the notes table in Supabase and it is there too.Stuck? Pick a prompt and ask your AI tool
I am connecting my Next.js app to Supabase for the first time and something is wrong. What I expected: [for example my notes showing on /guestbook] What happened: [paste the error from the page or the terminal] My lib/supabase.ts: [paste it] My app/guestbook/page.tsx: [paste it] Do not ask me to paste my keys. Explain what went wrong in plain words and tell me exactly what to change.
Open it in your AI tool. Clicking copies the prompt, and ChatGPT and Grok open with it already filled in.
- Claude(opens in a new tab)
- ChatGPT(opens in a new tab)
- Qwen(opens in a new tab)
- DeepSeek(opens in a new tab)
- Kimi(opens in a new tab)
- Grok(opens in a new tab)
More tools
App builders, in your browser:
Code editors on your computer. Open app only works once it is installed, so use Get it first if you do not have it.
- CursorOpen appGet it(opens in a new tab)
- VS CodeOpen appGet it(opens in a new tab)
- Antigravity IDEOpen appGet it(opens in a new tab)
- Antigravity 2.0Open appGet it(opens in a new tab)
Want the full list? Browse all app builders and coding editors (IDEs).
- Saved my URL and publishable key in .env.local
- Saw my notes on localhost:3000/guestbook
- Posted a note from the page and found it in Supabase
- Sign in to tick these off and pick up where you left them.
Tools used in this build
Everything this walkthrough reaches for, with the directory entry for each.