LowFile-scopeJavaScript / TypeScript Plug & play

Internationalize user-facing text with next-intl or next-i18next

Do not hardcode user-visible strings in pages/layouts. Use an i18n library integrated with App Router and load dictionaries on the server.

Why this matters

Enables scalable languages, regional SEO, and consistent UX.

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

Avoid

export default function Page(){ return <h1>My Account</h1> }

Prefer

export default async function Page(){ const t = await getTranslator('account'); return <h1>{t('title')}</h1> }

Bad

Hardcoded text in page.tsx

Good

Load dictionary on the server and render

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