A Client Component reads a server environment variable

Symptom

The variable is not prefixed NEXT_PUBLIC_, but the secret still shows up in the HTML of a page that renders a Client Component.

Root cause

Next.js documents that Client Components are prerendered to HTML on the server, and that a module which reads a secret can be imported into the client graph by mistake. The documented guard is the server-only package: importing that module from a Client Component fails the build. Next.js issue 83089 reports a Client Component that reads process.env.SECRET and finds the value in the document. A Next.js maintainer closed it as expected behavior, because Client Components render on the server and process.env is a Node global there, and pointed at a module that starts with import "server-only".

In this Next.js app only:

1. Find files with "use client" that read process.env, and files that export secrets or API keys.
2. Move secret reads into a server module that starts with: import "server-only"
3. Pass only non-secret props into Client Components.
4. Install server-only if the build does not already resolve it.
5. Confirm the production HTML of your own pages does not contain the secret.

Do not log the secret while you do this.

Paste this into the coding tool that has your own project open.

2-minute self-check

These steps are for an app you own. Do not run them against someone else's project.

1. In your own repo, search Client Components for process.env. Anything other than NEXT_PUBLIC_ is a problem.
2. Deploy your own app, then view the HTML response for a page that uses that component. Search for a distinctive piece of the secret. It should be absent.
3. Import the server module from a Client Component on purpose in a branch and confirm the build fails, then revert that import.

Sources

• Next.js: Server and Client Components
• vercel/next.js issue 83089
• v0: keep API keys out of client components