[
{
"No": "1",
"Category": "Routing",
"Guideline": "Use App Router for new projects",
"Description": "App Router is the recommended approach in Next.js 14+",
"Do": "app/ directory with page.tsx",
"Don't": "pages/ for new projects",
"Code Good": "app/dashboard/page.tsx",
"Code Bad": "pages/dashboard.tsx",
"Severity": "Medium",
"Docs URL": "https://nextjs.org/docs/app"
},
{
"No": "2",
"Category": "Routing",
"Guideline": "Use file-based routing",
"Description": "Create routes by adding files in app directory",
"Do": "page.tsx for routes layout.tsx for layouts",
"Don't": "Manual route configuration",
"Code Good": "app/blog/[slug]/page.tsx",
"Code Bad": "Custom router setup",
"Severity": "Medium",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/routing"
},
{
"No": "3",
"Category": "Routing",
"Guideline": "Colocate related files",
"Description": "Keep components styles tests with their routes",
"Do": "Component files alongside page.tsx",
"Don't": "Separate components folder",
"Code Good": "app/dashboard/_components/",
"Code Bad": "components/dashboard/",
"Severity": "Low",
"Docs URL": ""
},
{
"No": "4",
"Category": "Routing",
"Guideline": "Use route groups for organization",
"Description": "Group routes without affecting URL",
"Do": "Parentheses for route groups",
"Don't": "Nested folders affecting URL",
"Code Good": "(marketing)/about/page.tsx",
"Code Bad": "marketing/about/page.tsx",
"Severity": "Low",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/routing/route-groups"
},
{
"No": "5",
"Category": "Routing",
"Guideline": "Handle loading states",
"Description": "Use loading.tsx for route loading UI",
"Do": "loading.tsx alongside page.tsx",
"Don't": "Manual loading state management",
"Code Good": "app/dashboard/loading.tsx",
"Code Bad": "useState for loading in page",
"Severity": "Medium",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming"
},
{
"No": "6",
"Category": "Routing",
"Guideline": "Handle errors with error.tsx",
"Description": "Catch errors at route level",
"Do": "error.tsx with reset function",
"Don't": "try/catch in every component",
"Code Good": "app/dashboard/error.tsx",
"Code Bad": "try/catch in page component",
"Severity": "High",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/routing/error-handling"
},
{
"No": "7",
"Category": "Rendering",
"Guideline": "Use Server Components by default",
"Description": "Server Components reduce client JS bundle",
"Do": "Keep components server by default",
"Don't": "Add 'use client' unnecessarily",
"Code Good": "export default function Page()",
"Code Bad": "('use client') for static content",
"Severity": "High",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/rendering/server-components"
},
{
"No": "8",
"Category": "Rendering",
"Guideline": "Mark Client Components explicitly",
"Description": "'use client' for interactive components",
"Do": "Add 'use client' only when needed",
"Don't": "Server Component with hooks/events",
"Code Good": "('use client') for onClick useState",
"Code Bad": "No directive with useState",
"Severity": "High",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/rendering/client-components"
},
{
"No": "9",
"Category": "Rendering",
"Guideline": "Push Client Components down",
"Description": "Keep Client Components as leaf nodes",
"Do": "Client wrapper for interactive parts only",
"Don't": "Mark page as Client Component",
"Code Good": "<InteractiveButton/> in Server Page",
"Code Bad": "('use client') on page.tsx",
"Severity": "High",
"Docs URL": ""
},
{
"No": "10",
"Category": "Rendering",
"Guideline": "Use streaming for better UX",
"Description": "Stream content with Suspense boundaries",
"Do": "Suspense for slow data fetches",
"Don't": "Wait for all data before render",
"Code Good": "<Suspense><SlowComponent/></Suspense>",
"Code Bad": "await allData then render",
"Severity": "Medium",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming"
},
{
"No": "11",
"Category": "Rendering",
"Guideline": "Choose correct rendering strategy",
"Description": "SSG for static SSR for dynamic ISR for semi-static",
"Do": "generateStaticParams for known paths",
"Don't": "SSR for static content",
"Code Good": "export const revalidate = 3600",
"Code Bad": "fetch without cache config",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "12",
"Category": "DataFetching",
"Guideline": "Fetch data in Server Components",
"Description": "Fetch directly in async Server Components",
"Do": "async function Page() { const data = await fetch() }",
"Don't": "useEffect for initial data",
"Code Good": "const data = await fetch(url)",
"Code Bad": "useEffect(() => fetch(url))",
"Severity": "High",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/data-fetching"
},
{
"No": "13",
"Category": "DataFetching",
"Guideline": "Configure caching explicitly (Next.js 15+)",
"Description": "Next.js 15 changed defaults to uncached for fetch",
"Do": "Explicitly set cache: 'force-cache' for static data",
"Don't": "Assume default is cached (it's not in Next.js 15)",
"Code Good": "fetch(url { cache: 'force-cache' })",
"Code Bad": "fetch(url) // Uncached in v15",
"Severity": "High",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/upgrading/version-15"
},
{
"No": "14",
"Category": "DataFetching",
"Guideline": "Deduplicate fetch requests",
"Description": "React and Next.js dedupe same requests",
"Do": "Same fetch call in multiple components",
"Don't": "Manual request deduplication",
"Code Good": "Multiple components fetch same URL",
"Code Bad": "Custom cache layer",
"Severity": "Low",
"Docs URL": ""
},
{
"No": "15",
"Category": "DataFetching",
"Guideline": "Use Server Actions for mutations",
"Description": "Server Actions for form submissions",
"Do": "action={serverAction} in forms",
"Don't": "API route for every mutation",
"Code Good": "<form action={createPost}>",
"Code Bad": "<form onSubmit={callApiRoute}>",
"Severity": "Medium",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations"
},
{
"No": "16",
"Category": "DataFetching",
"Guideline": "Revalidate data appropriately",
"Description": "Use revalidatePath/revalidateTag after mutations",
"Do": "Revalidate after Server Action",
"Don't": "'use client' with manual refetch",
"Code Good": "revalidatePath('/posts')",
"Code Bad": "router.refresh() everywhere",
"Severity": "Medium",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/caching#revalidating"
},
{
"No": "17",
"Category": "Images",
"Guideline": "Use next/image for optimization",
"Description": "Automatic image optimization and lazy loading",
"Do": "<Image> component for all images",
"Don't": "<img> tags directly",
"Code Good": "<Image src={} alt={} width={} height={}>",
"Code Bad": "<img src={}/>",
"Severity": "High",
"Docs URL": "https://nextjs.org/docs/app/building-your-application/optimizing/images"
},
{
"No": "18",
"Category": "Images",
"Guideline": "Provide width and height",
"Description": "Prevent layout shift with dimensions",
"Do": "width and height props or fill",
"Don't": "Missing dimensions",
"Code Good": "<Image width={400} height={300}/>",
"Code Bad": "<Image src={url}/>",
"Severity": "High",
"Docs URL": ""
}
]
