Skip to content
Sarj Sarj Sarj Standards

no-server-env-in-client-component

server-only environment settings imported by a client component

noServerEnvInClientComponent Rule source Tests Catalog JSON

Why

Next.js client modules run in the browser, where server-only environment values are unavailable; importing a server settings module can produce undefined configuration or bundle a secret-bearing module into the client graph.

Fix

Pass an explicitly public value from a Server Component, or import it from a separately validated client-settings module backed only by NEXT_PUBLIC_* values.

Examples

Before — flagged Do not pull server settings into a client bundle
status-card.tsx
"use client";
import { SERVER_SETTINGS } from "@/server-settings";
export const StatusCard = () => <p>{SERVER_SETTINGS.apiOrigin}</p>;
After — preferred Import a browser-safe settings boundary
status-card.tsx
"use client";
import { CLIENT_SETTINGS } from "@/client-settings";
export const StatusCard = () => <p>{CLIENT_SETTINGS.apiOrigin}</p>;