Continue Logo
balligh-insage/claida-nextjs-rules-compact icon
public
Published on 3/11/2025
balligh-insage/claida-nextjs-rules-compact

Rules
  • 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.