LowFile-scopeJavaScript / TypeScript Plug & play

Use next/font for fonts (no <link> to external CDNs)

Load fonts via next/font (google or local) and apply on html/body; avoid runtime <link> to fonts that cause FOUT/CLS.

Why this matters

Improves performance and eliminates layout shifts.

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

Prefer

import { Inter } from 'next/font/google'
const inter = Inter({ subsets:['latin'] })
export default function RootLayout({ children }){ return (<html className={inter.className}><body>{children}</body></html>) }

More snippets

Bad

<link rel="stylesheet" href="...google fonts...">

Good

Inter({ subsets:['latin'] }) + className

Related rules

From the same buckets as this rule.

High
Keep 'use client' at the leaf: default to Server Components
Prefer Server Components for pages/layouts and move interactivity to small leaf Client Components. Only add 'use client' where browser APIs or event handlers are strictly necessary.
stack-nextjsstack-react+2
High
Make fetch caching explicit in Server Components
For dynamic data use { cache: 'no-store' } or file-level dynamic = 'force-dynamic'. For ISR use { next: { revalidate: N, tags: [...] } }.
stack-nextjsstack-react+2
High
Middleware only for light auth/rewrites
Keep middleware fast and side-effect free (no DB writes). Narrow the matcher and skip static assets. Use Route Handlers for heavy logic.
stack-nextjsstack-react+2

Why this matters

Bad vs. good

More snippets

Related rules

Keep 'use client' at the leaf: default to Server Components

Make fetch caching explicit in Server Components

Middleware only for light auth/rewrites

Why this matters

Bad vs. good

More snippets

Related rules

Keep 'use client' at the leaf: default to Server Components

Make fetch caching explicit in Server Components

Middleware only for light auth/rewrites