Where your code runs
Your AI wrote two files for checkout. One starts with 'use client'. You need to know which one may hold your .
This answers: Client vs server code: what is the difference? No coding needed. 3 quick decisions.
- Reading code
- Keys and secrets
- How a request travels
Step 1 of 3
This is the first file. Where does its code run?
"use client"; export function BuyButton() { return <button onClick={() => fetch("/api/checkout", { method: "POST" })}>Buy</button>;}Client vs server code: what is the difference?
Client code runs in each visitor's browser, so anyone can read it. Server code runs only on your server. In Next.js, files marked 'use client' are sent to the browser, while and server components stay on the server. belong only in server code; never make them public to fix 'undefined'.
Breaks at Browser: Secret key moved into browser code
Why AI tools write this bug
When a secret is undefined in a browser file, AI tools often 'fix' it by adding to the name, which publishes the key to every visitor.
How to fix it
- Look for 'use client' at the top of a file: that code is public.
- Keep in API routes or server code only.
- Never add to a secret to fix 'undefined'.
- Have browser code call your server, and let the server use the key.
Check your own app
Paste this into Lovable, Cursor or Claude Code:
Without changing anything, list the files in this project that run in the browser and the ones that run only on the server. Then list every environment variable, say where each is read, and flag any secret that a browser file reads or that starts with NEXT_PUBLIC_ or VITE_.
Common questions
- Are Server Components safe for secrets?
- Yes. Server Components run on the server, and only their rendered result is sent to the browser. Just don't pass the secret itself down to a client component as a prop.