63 lines
18 KiB
CSV
63 lines
18 KiB
CSV
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
1,Routing,Use App Router for new projects,App Router is the recommended approach in Next.js 14+,app/ directory with page.tsx,pages/ for new projects,app/dashboard/page.tsx,pages/dashboard.tsx,Medium,https://nextjs.org/docs/app,nextjs 16.2,active,2026-08-13
|
|
2,Routing,Use file-based routing,Create routes by adding files in app directory,page.tsx for routes layout.tsx for layouts,Manual route configuration,app/blog/[slug]/page.tsx,Custom router setup,Medium,https://nextjs.org/docs/app/building-your-application/routing,nextjs 16.2,active,2026-08-13
|
|
3,Routing,Colocate related files,Keep components styles tests with their routes,Component files alongside page.tsx,Separate components folder,app/dashboard/_components/,components/dashboard/,Low,,nextjs 16.2,active,2026-08-13
|
|
4,Routing,Use route groups for organization,Group routes without affecting URL,Parentheses for route groups,Nested folders affecting URL,(marketing)/about/page.tsx,marketing/about/page.tsx,Low,https://nextjs.org/docs/app/building-your-application/routing/route-groups,nextjs 16.2,active,2026-08-13
|
|
5,Routing,Handle loading states,Use loading.tsx for route loading UI,loading.tsx alongside page.tsx,Manual loading state management,app/dashboard/loading.tsx,useState for loading in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming,nextjs 16.2,active,2026-08-13
|
|
6,Routing,Handle errors with error.tsx,Catch errors at route level,error.tsx with reset function,try/catch in every component,app/dashboard/error.tsx,try/catch in page component,High,https://nextjs.org/docs/app/building-your-application/routing/error-handling,nextjs 16.2,active,2026-08-13
|
|
7,Rendering,Use Server Components by default,Server Components reduce client JS bundle,Keep components server by default,Add 'use client' unnecessarily,export default function Page(),('use client') for static content,High,https://nextjs.org/docs/app/building-your-application/rendering/server-components,nextjs 16.2,active,2026-08-13
|
|
8,Rendering,Mark Client Components explicitly,'use client' for interactive components,Add 'use client' only when needed,Server Component with hooks/events,('use client') for onClick useState,No directive with useState,High,https://nextjs.org/docs/app/building-your-application/rendering/client-components,nextjs 16.2,active,2026-08-13
|
|
9,Rendering,Push Client Components down,Keep Client Components as leaf nodes,Client wrapper for interactive parts only,Mark page as Client Component,<InteractiveButton/> in Server Page,('use client') on page.tsx,High,https://nextjs.org/docs/app/building-your-application/rendering/client-components,nextjs 16.2,active,2026-08-13
|
|
10,Rendering,Use streaming for better UX,Stream content with Suspense boundaries,Suspense for slow data fetches,Wait for all data before render,<Suspense><SlowComponent/></Suspense>,await allData then render,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming,nextjs 16.2,active,2026-08-13
|
|
11,Rendering,Choose correct rendering strategy,SSG for static SSR for dynamic ISR for semi-static,generateStaticParams for known paths,SSR for static content,export const revalidate = 3600,fetch without cache config,Medium,,nextjs 16.2,active,2026-08-13
|
|
12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for initial data,const data = await fetch(url),useEffect(() => fetch(url)),High,https://nextjs.org/docs/app/building-your-application/data-fetching,nextjs 16.2,active,2026-08-13
|
|
13,DataFetching,Configure caching explicitly (Next.js 16.2+),Next.js 16 uses Cache Components and explicit cache directives instead of assuming fetch is the cache model.,Set cache semantics explicitly for static and dynamic data,Assume fetch defaults alone define the cache model,"fetch(url, { cache: 'force-cache' })",fetch(url) // Uncached in v15,High,https://nextjs.org/docs/app/guides/upgrading/version-16,nextjs 16.2,active,2026-08-13
|
|
14,DataFetching,Deduplicate fetch requests,React and Next.js dedupe same requests,Same fetch call in multiple components,Manual request deduplication,Multiple components fetch same URL,Custom cache layer,Low,,nextjs 16.2,active,2026-08-13
|
|
15,DataFetching,Use Server Actions for mutations,Server Actions for form submissions,action={serverAction} in forms,API route for every mutation,<form action={createPost}>,<form onSubmit={callApiRoute}>,Medium,https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations,nextjs 16.2,active,2026-08-13
|
|
16,DataFetching,Revalidate or update data appropriately,"Use updateTag for immediate read-your-own-writes and revalidateTag(..., ""max"") for SWR invalidation.",Use updateTag after mutations that should be visible immediately,Rely on router.refresh() as the default mutation strategy,revalidatePath('/posts'),router.refresh() everywhere,Medium,https://nextjs.org/docs/app/api-reference/functions/updateTag,nextjs 16.2,active,2026-08-13
|
|
17,Images,Use next/image for optimization,Automatic image optimization and lazy loading,<Image> component for all images,<img> tags directly,<Image src={} alt={} width={} height={}>,<img src={}/>,High,https://nextjs.org/docs/app/building-your-application/optimizing/images,nextjs 16.2,active,2026-08-13
|
|
18,Images,Provide width and height,Prevent layout shift with dimensions,width and height props or fill,Missing dimensions,<Image width={400} height={300}/>,<Image src={url}/>,High,https://nextjs.org/docs/app/api-reference/components/image,nextjs 16.2,active,2026-08-13
|
|
19,Images,Use fill for responsive images,Fill container with object-fit,fill prop with relative parent,Fixed dimensions for responsive,"<Image fill className=""object-cover""/>",<Image width={window.width}/>,Medium,,nextjs 16.2,active,2026-08-13
|
|
20,Images,Configure remote image domains,Whitelist external image sources,remotePatterns in next.config.js,Allow all domains,remotePatterns: [{ hostname: 'cdn.example.com' }],domains: ['*'],High,https://nextjs.org/docs/app/api-reference/components/image#remotepatterns,nextjs 16.2,active,2026-08-13
|
|
21,Images,Use priority for LCP images,Mark above-fold images as priority,priority prop on hero images,All images with priority,<Image priority src={hero}/>,<Image priority/> on every image,Medium,,nextjs 16.2,active,2026-08-13
|
|
22,Fonts,Use next/font for fonts,Self-hosted fonts with zero layout shift,next/font/google or next/font/local,External font links,import { Inter } from 'next/font/google',"<link href=""fonts.googleapis.com""/>",Medium,https://nextjs.org/docs/app/building-your-application/optimizing/fonts,nextjs 16.2,active,2026-08-13
|
|
23,Fonts,Apply font to layout,Set font in root layout for consistency,className on body in layout.tsx,Font in individual pages,<body className={inter.className}>,Each page imports font,Low,,nextjs 16.2,active,2026-08-13
|
|
24,Fonts,Use variable fonts,Variable fonts reduce bundle size,Single variable font file,Multiple font weights as files,Inter({ subsets: ['latin'] }),Inter_400 Inter_500 Inter_700,Low,,nextjs 16.2,active,2026-08-13
|
|
25,Metadata,Use generateMetadata for dynamic,Generate metadata based on params,export async function generateMetadata(),Hardcoded metadata everywhere,generateMetadata({ params }),export const metadata = {},Medium,https://nextjs.org/docs/app/building-your-application/optimizing/metadata,nextjs 16.2,active,2026-08-13
|
|
26,Metadata,Include OpenGraph images,Add OG images for social sharing,opengraph-image.tsx or og property,Missing social preview images,opengraph: { images: ['/og.png'] },No OG configuration,Medium,,nextjs 16.2,active,2026-08-13
|
|
27,Metadata,Use metadata API,Export metadata object for static metadata,export const metadata = {},Manual head tags,export const metadata = { title: 'Page' },<head><title>Page</title></head>,Medium,,nextjs 16.2,active,2026-08-13
|
|
28,API,Use Route Handlers for APIs,app/api routes for API endpoints,app/api/users/route.ts,pages/api for new projects,export async function GET(request),export default function handler,Medium,https://nextjs.org/docs/app/building-your-application/routing/route-handlers,nextjs 16.2,active,2026-08-13
|
|
29,API,Return proper Response objects,Use NextResponse for API responses,NextResponse.json() for JSON,Plain objects or res.json(),return NextResponse.json({ data }),return { data },Medium,,nextjs 16.2,active,2026-08-13
|
|
30,API,Handle HTTP methods explicitly,Export named functions for methods,Export GET POST PUT DELETE,Single handler for all methods,export async function POST(),switch(req.method),Low,,nextjs 16.2,active,2026-08-13
|
|
31,API,Validate request body,Validate input before processing,Zod or similar for validation,Trust client input,const body = schema.parse(await req.json()),const body = await req.json(),High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
|
|
32,Middleware,Use proxy.ts for auth and request guards,Next.js 16 renamed middleware to proxy to reflect its network-boundary role.,"Use proxy.ts for redirects, rewrites, and lightweight request guards",Keep new auth logic in middleware.ts,export function proxy(request),if (!session) redirect in page,Medium,https://nextjs.org/docs/app/guides/upgrading/version-16,nextjs 16.2,active,2026-08-13
|
|
33,Middleware,Match specific proxy paths,Configure the proxy matcher,config.matcher for specific routes,Run proxy on all routes,matcher: ['/dashboard/:path*'],No matcher config,Medium,https://nextjs.org/docs/app/getting-started/proxy,nextjs 16.2,active,2026-08-13
|
|
34,Middleware,Keep proxy runtime-safe,Proxy runs in nodejs runtime and fetch cache options do not apply there.,Keep proxy logic lightweight and nodejs-compatible,Use Node-incompatible code or rely on fetch cache options in proxy,Edge-compatible auth check,fs.readFile in middleware,High,https://nextjs.org/docs/app/getting-started/proxy,nextjs 16.2,active,2026-08-13
|
|
35,Environment,Use NEXT_PUBLIC prefix,Client-accessible env vars need prefix,NEXT_PUBLIC_ for client vars,Server vars exposed to client,NEXT_PUBLIC_API_URL,API_SECRET in client code,High,https://nextjs.org/docs/app/building-your-application/configuring/environment-variables,nextjs 16.2,active,2026-08-13
|
|
36,Environment,Validate env vars,Check required env vars exist,Validate on startup,Undefined env at runtime,if (!process.env.DATABASE_URL) throw,process.env.DATABASE_URL (might be undefined),High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
|
|
37,Environment,Use .env.local for secrets,Local env file for development secrets,.env.local gitignored,Secrets in .env committed,.env.local with secrets,.env with DATABASE_PASSWORD,High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
|
|
38,Performance,Analyze bundle size,Use @next/bundle-analyzer,Bundle analyzer in dev,Ship large bundles blindly,ANALYZE=true npm run build,No bundle analysis,Medium,https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer,nextjs 16.2,active,2026-08-13
|
|
39,Performance,Use dynamic imports,Code split with next/dynamic,dynamic() for heavy components,Import everything statically,const Chart = dynamic(() => import('./Chart')),import Chart from './Chart',Medium,https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading,nextjs 16.2,active,2026-08-13
|
|
40,Performance,Avoid layout shifts,Reserve space for dynamic content,Skeleton loaders aspect ratios,Content popping in,"<Skeleton className=""h-48""/>",No placeholder for async content,High,https://nextjs.org/docs/app/api-reference/components/image,nextjs 16.2,active,2026-08-13
|
|
41,Performance,Use Partial Prerendering,Combine static and dynamic in one route,Static shell with Suspense holes,Full dynamic or static pages,Static header + dynamic content,Entire page SSR,Low,https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering,nextjs 16.2,active,2026-08-13
|
|
42,Link,Use next/link for navigation,Client-side navigation with prefetching,"<Link href=""""> for internal links",<a> for internal navigation,"<Link href=""/about"">About</Link>","<a href=""/about"">About</a>",High,https://nextjs.org/docs/app/api-reference/components/link,nextjs 16.2,active,2026-08-13
|
|
43,Link,Prefetch strategically,Control prefetching behavior,prefetch={false} for low-priority,Prefetch all links,<Link prefetch={false}>,Default prefetch on every link,Low,,nextjs 16.2,active,2026-08-13
|
|
44,Link,Use scroll option appropriately,Control scroll behavior on navigation,scroll={false} for tabs pagination,Always scroll to top,<Link scroll={false}>,Manual scroll management,Low,,nextjs 16.2,active,2026-08-13
|
|
45,Config,Use next.config.ts correctly,Use current Next.js 16 config names such as cacheComponents and skipProxyUrlNormalize.,Proper config options,Deprecated or wrong options,images: { remotePatterns: [] },images: { domains: [] },Medium,https://nextjs.org/docs/app/api-reference/next-config-js,nextjs 16.2,active,2026-08-13
|
|
46,Config,Enable strict mode,Catch potential issues early,reactStrictMode: true,Strict mode disabled,reactStrictMode: true,reactStrictMode: false,Medium,,nextjs 16.2,active,2026-08-13
|
|
47,Config,Configure redirects and rewrites,Use config for URL management,redirects() rewrites() in config,Manual redirect handling,redirects: async () => [...],res.redirect in pages,Medium,https://nextjs.org/docs/app/api-reference/next-config-js/redirects,nextjs 16.2,active,2026-08-13
|
|
48,Deployment,Use Vercel for easiest deploy,Vercel optimized for Next.js,Deploy to Vercel,Self-host without knowledge,vercel deploy,Complex Docker setup for simple app,Low,https://nextjs.org/docs/app/building-your-application/deploying,nextjs 16.2,active,2026-08-13
|
|
49,Deployment,Configure output for self-hosting,Set output option for deployment target,output: 'standalone' for Docker,Default output for containers,output: 'standalone',No output config for Docker,Medium,https://nextjs.org/docs/app/building-your-application/deploying#self-hosting,nextjs 16.2,active,2026-08-13
|
|
50,Security,Sanitize user input,Sanitize and validate any user-controlled data before rendering or mutating.,Escape sanitize validate all input,Direct interpolation of user data,DOMPurify.sanitize(userInput),dangerouslySetInnerHTML={{ __html: userInput }},High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
|
|
51,Security,Use CSP headers,Content Security Policy for XSS protection,Configure CSP in next.config.js,No security headers,headers() with CSP,No CSP configuration,High,https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy,nextjs 16.2,active,2026-08-13
|
|
52,Security,Validate Server Action input,"Server Actions are public endpoints, so they need validation and authorization.",Validate and authorize in Server Action,Trust Server Action input,Auth check + validation in action,Direct database call without check,High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
|
|
53,Caching,Use Cache Components as the current cache model,"Cache Components is the current Next.js 16 cache model and the foundation for use cache, cacheLife, cacheTag, and updateTag.",Enable cacheComponents for routes that should use the new cache model,Treat the old fetch-only mental model as the primary cache contract,const nextConfig = { cacheComponents: true },const nextConfig = { experimental: { ppr: true } },High,https://nextjs.org/blog/next-16,nextjs 16.2,active,2026-08-13
|
|
54,Caching,Use use cache for cacheable functions and components,"The use cache directive marks a route, component, or function as cacheable under Cache Components.","Place use cache at file, component, or function scope where the result is cacheable",Cache runtime-sensitive data without passing it in as arguments,"'use cache'
|
|
export default async function Page() { }",export default async function Page() { /* uncached by accident */ },High,https://nextjs.org/docs/app/api-reference/directives/use-cache,nextjs 16.2,active,2026-08-13
|
|
55,Caching,Set cache lifetime with cacheLife,Use cacheLife with use cache to make cache freshness explicit and readable.,Choose a cacheLife profile that matches update frequency,Leave cache behavior implicit when the data has a known freshness window,cacheLife('days'),/* implicit default */,Medium,https://nextjs.org/docs/app/api-reference/functions/cacheLife,nextjs 16.2,active,2026-08-13
|
|
56,Caching,Tag cache entries with cacheTag,Use cacheTag inside cached scopes to support targeted invalidation.,Assign stable tags to cacheable data,Use broad invalidation when a specific tag is enough,cacheTag('posts'),"/* no tag, broad invalidation later */",Medium,https://nextjs.org/docs/app/api-reference/functions/cacheTag,nextjs 16.2,active,2026-08-13
|
|
57,Caching,Use updateTag for read-your-own-writes,Use updateTag from Server Actions when the UI must reflect a mutation immediately.,Call updateTag after a successful mutation in a Server Action,Use updateTag outside Server Actions,updateTag('cart'),revalidateTag('cart') // when immediate refresh is required,High,https://nextjs.org/docs/app/api-reference/functions/updateTag,nextjs 16.2,active,2026-08-13
|
|
58,Caching,"Use revalidateTag(..., ""max"") for SWR invalidation","The one-argument revalidateTag form is deprecated; profile=""max"" is the current stale-while-revalidate contract.","Use revalidateTag(tag, ""max"") for background refresh semantics",Rely on the deprecated single-argument revalidateTag(tag),"revalidateTag('posts', 'max')",revalidateTag('posts'),High,https://nextjs.org/docs/app/api-reference/functions/revalidateTag,nextjs 16.2,active,2026-08-13
|
|
59,Middleware,Use proxy.ts for request interception,Next.js 16 renamed middleware to proxy; the proxy runtime is nodejs and fetch cache options have no effect there.,"Use proxy.ts for redirects, rewrites, and lightweight guards",Assume proxy is edge runtime or use fetch cache semantics there,export function proxy(request) { return NextResponse.next() },export function middleware(request) { return NextResponse.next() },High,https://nextjs.org/docs/app/getting-started/proxy,nextjs 16.2,active,2026-08-13
|
|
60,Middleware,Treat middleware.ts and export function middleware as legacy,The middleware filename and named export are deprecated in Next.js 16; use proxy.ts and export function proxy instead.,Rename middleware.ts to proxy.ts during migration,Introduce new middleware.ts code,proxy.ts,middleware.ts,High,https://nextjs.org/docs/app/guides/upgrading/version-16,nextjs legacy,deprecated,2026-08-13
|