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

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

import 'server-only' export async function getData() { const res = await fetch('https://external-service.com/data', { headers: { authorization: process.env.API_KEY, }, }) return res.json() } Now, any Client Component that imports getData() will receive a build-time error explaining that this module can only be used on the server. The corresponding package client-only can be used to mark modules that contain client-only code – for example, code that accesses the window object.

Difficulty: 7/10

server components, API routes, environment variables

To prevent this sort of unintended client usage of server code, we can use the server-only package to give other developers a build-time error if they ever accidentally import one of these modules into a Client Component.

javascript

1
Now, any Client Component that imports getData() will receive a build-time error explaining that this module can only be used on the server.
2
The corresponding package client-only can be used to mark modules that contain client-only code – for example, code that accesses the window object.

Scenario Questions

0-2 years experience

Follow-up Questions