How can you keep Server-only Code out of the Client Environment

0-2 years experience

1. 1In a Next.js page you need to fetch data from an external API that requires a secret key. How would you structure the code so the secret never ends up in the client bundle?
2. 2If you accidentally import Node's 'fs' module inside a component that runs on the client, what will happen at runtime and how can you prevent that?
3. 3Explain when you would choose getServerSideProps versus getStaticProps to keep database queries server‑only.

2-5 years experience

1. 1You added a utility that reads process.env.SECRET inside a shared module imported by both API routes and a React component. The client bundle now contains the secret. Walk me through how you'd debug and fix it.
2. 2During a feature rollout we moved some logic to a server component but observed increased latency on the page. What trade‑offs would you consider and how might you restructure the code?
3. 3Our CI flagged that a third‑party library pulls in 'crypto' which ends up in the client bundle. How would you isolate that library to server‑only code in Next.js?

5-8 years experience

1. 1Design a pattern for a large Next.js monorepo where multiple teams need to share server‑only utilities (e.g., DB clients) without leaking them into client bundles. What folder structure, TypeScript tricks, and build config would you use?
2. 2We need to expose a GraphQL endpoint that uses server‑only authentication middleware, but some pages also need to call it via client‑side fetch. How do you ensure the middleware stays server‑only while keeping the client code safe?
3. 3At high traffic, server‑only code that runs in getServerSideProps is causing a bottleneck. How would you refactor to move work to edge functions or API routes while still preventing any server code from reaching the client?

8+ years experience

1. 1Our product is migrating from a mixed Next.js app to a strict separation of server and client code across dozens of services. What architectural guidelines and tooling would you establish to enforce this at scale, and how would you measure compliance?
2. 2Explain how you would evolve the codebase to adopt Next.js 13 server components while ensuring legacy client components don't accidentally import server‑only modules, considering CI, linting, and developer onboarding.
3. 3When integrating a third‑party analytics SDK that must run only on the client but also requires a server‑generated token, how would you design the handshake to keep the token secret and avoid any server code leaking into the client bundle across multiple micro‑frontends?