API keys: what they are and how to keep them safe
A key is a password for a service. Eight steps to use one without leaking it.
An API key is a password that lets your site use another service, such as payments, maps or AI. Anyone who has your key can use that service on your bill. So a key stays secret.
Eight steps
- Make the account on the service's own site and open its API keys or Developers page.
- Make a test key first. Use the live key only when you launch.
- Put keys in a file called .env.local in your project: SERVICE_API_KEY=paste-here
- Make sure the file .gitignore contains .env*, so the keys never go to GitHub.
- On Vercel: Project, Settings, Environment Variables. Paste the same names and values, then deploy again.
- Use a key on the server side only. In Next.js any name that starts with NEXT_PUBLIC_ is visible to everyone. Never put a secret key behind that name.
- Set a spending limit on any service that bills by use (AI models especially).
- If a key ever appears in a chat, a screenshot, a public repository or a message to a client: delete it and make a new one at once.
Ask your AI tool
Where does the key go? Show me how to read it from an environment variable and never expose it in the browser.Now try it
Make a website in the Studio: pick a business, change the words and colours, and get your site.