ui-ux-pro-max-skill/cli/assets/data/stacks/nextjs.csv

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 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
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 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
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 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
34	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
35	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
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.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
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	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, 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