Walkthrough · Project build
Add a database with Supabase
Go live
Give your host the same two values, then push.
.env.local only exists on your computer, so your live site does not know your Supabase address yet. Add the same two variables to your host, with exactly the same names: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY.
Your host
1. Open your project on vercel.com, then Settings, then Environment Variables. 2. Add each variable: paste the name as the Key and your value as the Value. Leave all environments selected, and click Save. 3. Push your code (below). Vercel builds it with the new variables. If you added them after your last push, open Deployments, click the three dots on the latest one and choose Redeploy.
1. Open your project on app.netlify.com, then Project configuration, then Environment variables. 2. Click Add a variable, then Add a single variable. Paste the name as the Key and your value as the Value, and create it. Repeat for the second one. 3. Push your code (below). If you added the variables after your last push, open Deploys and choose Trigger deploy, then Deploy project.
1. Open Workers & Pages on dash.cloudflare.com and click your project. 2. Open Settings. Next.js reads these values while it builds, so add both as build variables, under Build, then Variables and secrets. 3. Push your code (below), which starts a new build with them.
Now save and push your code. From your project folder:
bash
git add -A
git commit -m "add guestbook with Supabase"
git pushWhat you should see
A few lines ending with main -> main. Your host starts a new build within a minute. When it finishes, open your live link with /guestbook on the end.Pick a prompt and ask your AI tool
My Next.js guestbook works on localhost but not on my live site. My host: [Vercel, Netlify or Cloudflare] What I see on the live site: [describe it or paste the error] The build log, if it failed: [paste the red part] I added NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY on the host. Do not ask for their values. Tell me the most likely causes, most likely first, and how to check each one.
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).
- Added both variables on my host
- Pushed and saw the guestbook on my live site
- Posted a note on the live site and found it in Supabase
- Sign in to tick these off and pick up where you left them.
Nearly there
12 tasks still unticked — go back through the steps and finish them off.
Tools used in this build
Everything this walkthrough reaches for, with the directory entry for each.