Next.js AI Coding Rules
Next.js rules for AI coding assistants define the conventions that separate good Next.js applications from great ones. The App Router, React Server Components, Server Actions, and edge middleware introduce paradigm shifts that AI assistants get wrong without explicit guidance. Next.js AI rules cover when to use Server vs Client Components, how to handle data fetching with proper caching strategies, the correct way to implement layouts and loading states, metadata generation for SEO, and image optimisation patterns. With the right rules on AI Rules Hub, Cursor and Copilot will produce App Router code that is performant by default — and never accidentally mark a `"use client"` boundary in the wrong place.
Why Use AI Rules for Next.js?
- Enforce correct `"use client"` / `"use server"` boundary placement
- Standardise data fetching with `fetch` cache control and `revalidate` options
- Require `<Image>` component with `width`/`height` props — never raw `<img>` tags
- Define metadata generation patterns for every route type
- Prevent mixing Server and Client Component anti-patterns
Best Practices for Next.js AI Coding
Default to Server Components
Rule AI to keep components as Server Components by default and only add `"use client"` when browser APIs or interactivity are strictly required.
Data Fetch at the Leaf Component
Encourage per-component data fetching with deduplication (React's fetch caching) instead of prop-drilling from page to deeply nested children.
Typed Route Parameters
Use the `generateStaticParams` + `PageProps` generic types to keep route parameters fully typed and validated at build time.
Dynamic Metadata Functions
Always use `generateMetadata()` for dynamic routes instead of static `metadata` exports, ensuring title and description are populated from real data.
Common Patterns & Standards
Parallel Routes for Dashboard Layouts
Use Next.js parallel routes (`@slot` directories) for independent dashboard panels that can load and refresh independently.
Intercepting Routes for Modals
Implement modal overlays using intercepting routes so content is shareable via URL without a full page reload.
Server Actions for Form Mutations
Replace client-side API calls with Server Actions for form submissions — enabling progressive enhancement and simpler error handling.
Streaming With Suspense
Wrap slow data-fetching components in `<Suspense>` with a skeleton fallback to stream progressive UI rendering to the client.
Top Next.js Rules on AI Rules Hub
Explore Related AI Rules
Share Your Next.js AI Rules
Have rules that improved your Next.js workflow? Submit them to AI Rules Hub and help the community get better results from AI coding assistants.