Next.js App Router Rules

nextjsreactapp-routerserver-components

Best practices for Next.js 13+ App Router, Server Components, and routing

Целевые файлы

Файл	Формат
.cursorrules	plaintext
CLAUDE.md	markdown

Содержимое

Default to Server Components; add "use client" only when browser APIs or hooks are needed. Keep data fetching in Server Components or Route Handlers, never in Client Components. Use generateMetadata() for dynamic SEO metadata; never set <head> tags manually. Co-locate loading.tsx and error.tsx next to every route segment that fetches data. Use the file-system conventions: page.tsx, layout.tsx, route.ts, not custom wrappers. Prefer fetch() with revalidate options over getStaticProps/getServerSideProps patterns. Use React cache() to deduplicate identical fetches within a single render tree. Place shared UI in /components, server utilities in /lib, API handlers in /app/api. Use next/image for all images; always provide width, height, and alt attributes. Use next/link for all internal navigation; never use <a> tags for in-app links. Group related routes with (groupName) folders to share layouts without URL segments. Use parallel routes (@slot) for modals and side-panels that need independent loading. Stream heavy pages with Suspense boundaries around slow data-fetching components. Store secrets in environment variables accessed only on the server (no NEXT_PUBLIC_ prefix).

CLI

npx mindaxis apply nextjs-app-router-rules --target cursor --scope project

Используется в паках

Frontend Build Tooling

Vite, Webpack, Turbo, and modern frontend build pipeline setup

Открыть пак →

← Правила