Visualize Server and Client Component boundaries in your Next.js App Router directly in the browser.
With the Next.js App Router, there is no built-in visual map for server vs client boundaries on the live page. Developers often trace "use client" manually across files.
Nextray makes those boundaries visible instantly.
Nextray draws a live overlay on your page that shows exactly where your server/client boundaries are — no source diving, no guessing.
| Visual | Meaning |
|---|---|
| 🔵 Blue border + tint | Server Component |
| 🟠 Orange border + tint | Client Component |
| ⚡ Boundary indicator | First server → client transition |
| 🏷️ Hover badge | Component name + file path |
Ctrl/Cmd + Left Click |
Open file directly in VS Code |
Add it as a dev dependency:
npm i -D @saadeh/nextrayimport { withNextray } from "@saadeh/nextray/plugin";
const nextConfig = {};
export default withNextray(nextConfig);import { NextrayDevOverlay } from "@saadeh/nextray/overlay";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<NextrayDevOverlay />
{children}
</body>
</html>
);
}Start your app in development mode and the overlay will appear automatically.
<NextrayDevOverlay
options={{
enableOpenInEditor: true,
openInEditorModifier: "auto", // "auto" | "ctrl" | "meta"
editorUriScheme: "vscode://file"
}}
/>| Option | Type | Default | Description |
|---|---|---|---|
enableOpenInEditor |
boolean |
true |
Enables file-open shortcut |
openInEditorModifier |
"auto" | "ctrl" | "meta" |
"auto" |
Modifier key (auto detects OS) |
editorUriScheme |
string |
"vscode://file" |
URI scheme for editor links |
- Next.js 14+
- React 18+
- App Router project
- Designed for development/debugging workflows.
- Instrumentation is development-focused.
Feedback and contributions are welcome.
- Open an Issue for bugs or feature requests.
- Include Next.js version, package version, and clear reproduction steps.
- For Pull Requests, include a clear summary and screenshots/GIFs for UI behavior changes.
