Skip to content
Sarj Code Standards

no-server-env-in-client-component

server-only environment settings imported or re-exported by a client module

noServerEnvInClientComponent Rule source Tests Catalog JSON

Why

Next.js client modules run in the browser, where server-only environment values are unavailable; importing or re-exporting 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/re-export 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>;
Before — flagged A client barrel cannot forward server settings
client-barrel.tsx
"use client";
export { SERVER_SETTINGS } from "./server-settings.js";
server-settings.ts
import { z } from "zod";
const SettingsSchema = z.object({ apiOrigin: z.url() });
export const SERVER_SETTINGS = SettingsSchema.parse({
  apiOrigin: process.env.API_ORIGIN,
});
After — preferred Forward public settings from the client boundary
client-barrel.tsx
"use client";
export { CLIENT_SETTINGS } from "./client-settings.js";
client-settings.ts
import { z } from "zod";
const SettingsSchema = z.object({ apiOrigin: z.url() });
export const CLIENT_SETTINGS = SettingsSchema.parse({
  apiOrigin: process.env.NEXT_PUBLIC_API_ORIGIN,
});