csh/playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📦 deps(thirdparty): update snapshots

Browse Source
This commit is contained in:
ci[bot]
2026-08-14 17:16:04 +08:00
parent ad5eeaaf5b
commit 14e7209e78
283 changed files with 201717 additions and 13469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui-ux-pro-max/cli/assets/data/stacks/nextjs.csv
+62 -53
View File
@@ -1,53 +1,62 @@
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
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
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
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,
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
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
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
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
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
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,
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
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,
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
13,DataFetching,Configure caching explicitly (Next.js 15+),Next.js 15 changed defaults to uncached for fetch,Explicitly set cache: 'force-cache' for static data,Assume default is cached (it's not in Next.js 15),fetch(url { cache: 'force-cache' }),fetch(url) // Uncached in v15,High,https://nextjs.org/docs/app/building-your-application/upgrading/version-15
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,
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
16,DataFetching,Revalidate data appropriately,Use revalidatePath/revalidateTag after mutations,Revalidate after Server Action,'use client' with manual refetch,revalidatePath('/posts'),router.refresh() everywhere,Medium,https://nextjs.org/docs/app/building-your-application/caching#revalidating
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
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,
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,
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
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,
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
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,
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,
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
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,
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,
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
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,
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,
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,
32,Middleware,Use middleware for auth,Protect routes with middleware.ts,middleware.ts at root,Auth check in every page,export function middleware(request),if (!session) redirect in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/middleware
33,Middleware,Match specific paths,Configure middleware matcher,config.matcher for specific routes,Run middleware on all routes,matcher: ['/dashboard/:path*'],No matcher config,Medium,
34,Middleware,Keep middleware edge-compatible,Middleware runs on Edge runtime,Edge-compatible code only,Node.js APIs in middleware,Edge-compatible auth check,fs.readFile in middleware,High,
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
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,
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,
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
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
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,
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
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
43,Link,Prefetch strategically,Control prefetching behavior,prefetch={false} for low-priority,Prefetch all links,<Link prefetch={false}>,Default prefetch on every link,Low,
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,
45,Config,Use next.config.js correctly,Configure Next.js behavior,Proper config options,Deprecated or wrong options,images: { remotePatterns: [] },images: { domains: [] },Medium,https://nextjs.org/docs/app/api-reference/next-config-js
46,Config,Enable strict mode,Catch potential issues early,reactStrictMode: true,Strict mode disabled,reactStrictMode: true,reactStrictMode: false,Medium,
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
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
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
50,Security,Sanitize user input,Never trust user input,Escape sanitize validate all input,Direct interpolation of user data,DOMPurify.sanitize(userInput),dangerouslySetInnerHTML={{ __html: userInput }},High,
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
52,Security,Validate Server Action input,Server Actions are public endpoints,Validate and authorize in Server Action,Trust Server Action input,Auth check + validation in action,Direct database call without check,High,
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
1 No Category Guideline Description Do Don't Code Good Code Bad Severity Docs URL Applies To Status Verified At
2 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
3 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
4 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
5 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
6 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
7 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
8 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
9 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
10 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
11 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
12 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
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
14 13 DataFetching Configure caching explicitly (Next.js 15+) Configure caching explicitly (Next.js 16.2+) Next.js 15 changed defaults to uncached for fetch Next.js 16 uses Cache Components and explicit cache directives instead of assuming fetch is the cache model. Explicitly set cache: 'force-cache' for static data Set cache semantics explicitly for static and dynamic data Assume default is cached (it's not in Next.js 15) Assume fetch defaults alone define the cache model fetch(url { cache: 'force-cache' }) fetch(url, { cache: 'force-cache' }) fetch(url) // Uncached in v15 High https://nextjs.org/docs/app/building-your-application/upgrading/version-15 https://nextjs.org/docs/app/guides/upgrading/version-16 nextjs 16.2 active 2026-08-13
15 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
16 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
17 16 DataFetching Revalidate data appropriately Revalidate or update data appropriately Use revalidatePath/revalidateTag after mutations Use updateTag for immediate read-your-own-writes and revalidateTag(..., "max") for SWR invalidation. Revalidate after Server Action Use updateTag after mutations that should be visible immediately 'use client' with manual refetch Rely on router.refresh() as the default mutation strategy revalidatePath('/posts') router.refresh() everywhere Medium https://nextjs.org/docs/app/building-your-application/caching#revalidating https://nextjs.org/docs/app/api-reference/functions/updateTag nextjs 16.2 active 2026-08-13
18 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
19 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
20 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
21 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
22 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
23 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
24 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
25 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
26 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
27 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
28 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
29 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
30 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
31 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
32 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
33 32 Middleware Use middleware for auth Use proxy.ts for auth and request guards Protect routes with middleware.ts Next.js 16 renamed middleware to proxy to reflect its network-boundary role. middleware.ts at root Use proxy.ts for redirects, rewrites, and lightweight request guards Auth check in every page Keep new auth logic in middleware.ts export function middleware(request) export function proxy(request) if (!session) redirect in page Medium https://nextjs.org/docs/app/building-your-application/routing/middleware https://nextjs.org/docs/app/guides/upgrading/version-16 nextjs 16.2 active 2026-08-13
34 33 Middleware Match specific paths Match specific proxy paths Configure middleware matcher Configure the proxy matcher config.matcher for specific routes Run middleware on all 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
35 34 Middleware Keep middleware edge-compatible Keep proxy runtime-safe Middleware runs on Edge runtime Proxy runs in nodejs runtime and fetch cache options do not apply there. Edge-compatible code only Keep proxy logic lightweight and nodejs-compatible Node.js APIs in middleware 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
36 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
37 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
38 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
39 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
40 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
41 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
42 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
43 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
44 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
45 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
46 45 Config Use next.config.js correctly Use next.config.ts correctly Configure Next.js behavior 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
47 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
48 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
49 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
50 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
51 50 Security Sanitize user input Never trust 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
52 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
53 52 Security Validate Server Action input Server Actions are public endpoints 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
54 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
55 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
56 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
57 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
58 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
59 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
60 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
61 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
62