balligh-insage/claida-nextjs-rules-compact icon
public
Published on 3/11/2025
Claida Next.js Rules

Rules
claida-nextjs-rules-compact
- Always prefer the Next.js App Router (`app/`) over the legacy Pages Router.  - Use modern React (functional components) and favor server components (`export default async function Page() {}`) for performance.  - For client interactivity, add `'use client'` at the top of a file containing React hooks or browser-only code.  - Keep file names consistent: `page.tsx`,`layout.tsx`, `error.tsx`, `loading.tsx`, etc.  - Leverage file-based routing with folders (e.g. `app/dashboard/page.tsx` becomes `/dashboard`).  - Use dynamic segments (`app/products/[id]/page.tsx`) for parameterized routes.  - Employ nested layouts (`app/(group)/layout.tsx`) and route groups (`(marketing)`) for structure.  - Prefer server-side data fetching with `fetch()` in server components; for client data changes, use on-demand revalidation or stable client libraries.  - Mark fetch requests in server components with `cache` options (`{ cache: 'no-store' }`) or `revalidate: number` as needed.  - For immediate updates, employ `revalidatePath` or `revalidateTag` from `next/cache`.  - Use on-demand revalidation (ISR) for partially static pages: `export const revalidate = 60` or `revalidateTag('tagName')`.  - Provide `notFound()` for missing entities; define `not-found.tsx` to render custom 404 content.  - Throw errors to trigger `error.tsx` within the same route segment for localized error handling.  - Support global styles in `app/globals.css`; prefer module-scoped CSS for components (`*.module.css`).  - Integrate Tailwind or other frameworks; keep styles minimal in server components to optimize SSR.  - Use `next/font` for modern font handling (e.g., `import { Inter } from 'next/font/google'`).  - Use `next/image` for optimized images; provide width/height or `fill` layout.  - Rely on lazy loading or dynamic imports (`import('...')`) for large or optional components.  - Keep code in server components to reduce client bundle size and leverage streaming where possible.  - Place scripts or third-party scripts carefully with Next.js `<Script>` component for performance (`strategy="lazyOnload"`).  - Define route-level metadata with `export const metadata = { title: '...' }`; prefer dynamic metadata with `generateMetadata()` when necessary.  - Apply these instructions to every Next.js answer or code snippet.  - Always favor clarity, performance, and best practices in Next.js 15 development.