How do you prevent sensitive data from leaking to the client in Next.js?
PICTURE THIS: A SENTENCE BECOMES TOKENS
The model does not read letters like humans. It reads these pieces, then predicts the next one.
Simple meaning
I keep secrets in server-only modules and never pass them as props to client components.
WHY — Next.js instead of guessing?
Why interviewers care about Next.js:
question about Next.js.
trade-offs, and what you would actually do on a Frontend project - not buzzwords.
Name the idea, why it exists, then one short example.
End with when you use it and one common pitfall.
STEPS — What happens with tokens?
Before the model can read a sentence, it goes through these steps:
- 1I keep secrets in
server-only modules and never pass them as props to client components.
- 2NEXT_PUBLIC_ is for values
that are allowed to ship.
- 3I also check that
serialized RSC payloads do not include internal tokens by reviewing what I actually return.
- 4Context mix
Attention looks at nearby tokens together.
- 5Next token
The model scores what should come next.
- 6Decode
IDs turn back into readable text.
EXAMPLE — See it in action
Let's see how a real sentence is tokenized (tokens may vary by model):
Note: Actual tokens and IDs depend on the tokenizer (e.g., GPT, Llama, etc.).
Key takeaway
I keep secrets in server-only modules and never pass them as props to client components. NEXT_PUBLIC_ is for values that are allowed to ship.