cubic
Try cubic for free

Enforce React and Next.js Production Guardrails

Flags needless "use client" pages, auth enforced only in middleware, direct DOM access, and hydration-prone renders in React and Next.js code.

Catch this in your code

What it flags

Flaggedapp/dashboard/page.tsx
'use client';

import { useEffect, useState } from 'react';

import { ProjectList } from './project-list';

export default function DashboardPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  // Browser-only state read during server render
  const theme = localStorage.getItem('theme') ?? 'light';

  useEffect(() => {
    document.title = 'Dashboard';
    fetch('/api/projects')
      .then((res) => res.json())
      .then(setProjects);
  }, []);

  return (
    <main className={theme}>
      <ProjectList projects={projects} />
    </main>
  );
}
Passesapp/dashboard/page.tsx
import type { Metadata } from 'next';
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';

import { auth } from '@/lib/auth';
import { getProjects } from '@/lib/projects';

import { ProjectList } from './project-list';

export const metadata: Metadata = { title: 'Dashboard' };

export default async function DashboardPage() {
  const session = await auth();
  if (!session) redirect('/login');

  const theme = (await cookies()).get('theme')?.value ?? 'light';
  const projects = await getProjects(session.user.id);

  return (
    <main className={theme}>
      <ProjectList projects={projects} />
    </main>
  );
}

Why it matters

Marking a page or layout "use client" ships it and everything it imports to the browser bundle, and stops it from fetching data or reading secrets on the server directly. Authorization that lives only in middleware (renamed proxy in Next.js 16) can be lost when a matcher changes or a route moves, and CVE-2025-29927 showed that middleware itself can be bypassed. Reading window or localStorage during render throws on the server, and guarding the read or using the current time renders different output on the server and the client, which surfaces as hydration errors and content that flickers on load.

Agent instructions

cubic checks every pull request against these instructions. Paste them into AGENTS.md or Cursor rules and your AI coding tool follows them while it writes code.

AGENTS.md

Add this section to AGENTS.md at the repository root. Codex, Cursor, and other AI coding tools read it.

## Enforce React and Next.js Production Guardrails

Review React and Next.js changes for production-safe component boundaries, routing, and rendering behavior.

Flag changes that:
- Move pages or layouts to "use client" without a clear need for browser APIs, hooks, or event handlers.
- Put protected route checks only in middleware when the page or layout also needs server-side authorization.
- Use direct DOM APIs in React components instead of refs or framework APIs.
- Introduce hydration-prone code, such as reading browser-only state during server render.
- Add raw inline styles or hard-coded visual values when project design tokens or shared components exist.

Checks every changed file.

Related agents

Included in the React and Next.js code review standards.

Run this agent on every pull request

cubic reviews every pull request against the agents you turn on and comments on the lines that break them.

Catch this in your code