Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Next.js Best Practices · leoyeai | DecimalAI

leoyeai/next-best-practices

SkillScore100Maintained

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

Frontendby leoyeai

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/leoyeai-next-best-practices/SKILL.md

decimalai skills pull leoyeai-next-best-practices --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/leoyeai-next-best-practices/SKILL.md https://app.decimal.ai/s/leoyeai-next-best-practices/SKILL.md

Raw file: /s/leoyeai-next-best-practices/SKILL.md ↗ · machine-readable summary at /s/leoyeai-next-best-practices.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 51d ago

Yes — +9% lift · at higher cost+56% tokens0% turns100% of whole cases pass with skill (23/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	106%	0%
case-19	✗→✓	▲ Improved	-31%	0%
case-02	✓→✓	＝ Same ✓	84%	0%
case-03	✓→✓	＝ Same ✓	60%	0%
case-04	✓→✓	＝ Same ✓	112%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/2/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

LeoYeAI / openclaw-master-skills

skills/next-best-practices/SKILL.md

View on GitHub ↗

License MITImported 8/2/2026Version v1

Skill contents

SKILL.md

Next.js Best Practices

Apply these rules when writing or reviewing Next.js code.

File Conventions

See file-conventions.md for:

Project structure and special files
Route segments (dynamic, catch-all, groups)
Parallel and intercepting routes
Middleware rename in v16 (middleware → proxy)

RSC Boundaries

Detect invalid React Server Component patterns.

See rsc-boundaries.md for:

Async client component detection (invalid)
Non-serializable props detection
Server Action exceptions

Async Patterns

Next.js 15+ async API changes.

See async-patterns.md for:

Async params and searchParams
Async cookies() and headers()
Migration codemod

Runtime Selection

See runtime-selection.md for:

Default to Node.js runtime
When Edge runtime is appropriate

Directives

See directives.md for:

'use client', 'use server' (React)
'use cache' (Next.js)

Functions

See functions.md for:

Navigation hooks: useRouter, usePathname, useSearchParams, useParams
Server functions: cookies, headers, draftMode, after
Generate functions: generateStaticParams, generateMetadata

Error Handling

See error-handling.md for:

error.tsx, global-error.tsx, not-found.tsx
redirect, permanentRedirect, notFound
forbidden, unauthorized (auth errors)
unstable_rethrow for catch blocks

Data Patterns

See data-patterns.md for:

Server Components vs Server Actions vs Route Handlers
Avoiding data waterfalls (Promise.all, Suspense, preload)
Client component data fetching

Route Handlers

See route-handlers.md for:

route.ts basics
GET handler conflicts with page.tsx
Environment behavior (no React DOM)
When to use vs Server Actions

Metadata & OG Images

See metadata.md for:

Static and dynamic metadata
generateMetadata function
OG image generation with next/og
File-based metadata conventions

Image Optimization

See image.md for:

Always use next/image over <img>
Remote images configuration
Responsive sizes attribute
Blur placeholders
Priority loading for LCP

Font Optimization

See font.md for:

next/font setup
Google Fonts, local fonts
Tailwind CSS integration
Preloading subsets

Bundling

See bundling.md for:

Server-incompatible packages
CSS imports (not link tags)
Polyfills (already included)
ESM/CommonJS issues
Bundle analysis

Scripts

See scripts.md for:

next/script vs native script tags
Inline scripts need id
Loading strategies
Google Analytics with @next/third-parties

Hydration Errors

See hydration-error.md for:

Common causes (browser APIs, dates, invalid HTML)
Debugging with error overlay
Fixes for each cause

Suspense Boundaries

See suspense-boundaries.md for:

CSR bailout with useSearchParams and usePathname
Which hooks require Suspense boundaries

Parallel & Intercepting Routes

See parallel-routes.md for:

Modal patterns with @slot and (.) interceptors
default.tsx for fallbacks
Closing modals correctly with router.back()

Self-Hosting

See self-hosting.md for:

output: 'standalone' for Docker
Cache handlers for multi-instance ISR
What works vs needs extra setup

Debug Tricks

See debug-tricks.md for:

MCP endpoint for AI-assisted debugging
Rebuild specific routes with --debug-build-paths

Illustrative Want to see what leoyeai/next-best-practices would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/8/2026, 19:04 UTC · 23 cases

Lift

+9%

100% vs 91%

Agent turns

1.0 vs 1.0

Tokens

+56%

1,913.13 vs 1,228.91

fail → pass · 2pass → pass · 21

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 In a Next.js 16 application where custom request proxying and header modification must run before request handling, what is the required root file name for this interceptor logic?	fail→pass	4,590	2,646	-42%	1	1	0%	744	1,530	+106%	0	0	—
case-02 In Next.js App Router, a developer writes `components/UserCard.tsx` with `'use client'` at the top of the file, and exports `export default async function UserCard() { const res = await fetch('/api/user'); return <div>{res.status}</div>; }`. What runtime or compilation error occurs in this file?	pass→pass	7,519	6,867	-9%	1	1	0%	1,287	2,374	+84%	0	0	—
case-03 In Next.js 15, you are authoring a dynamic page at `app/posts/[id]/page.tsx`. How should the `params` property be handled in the component signature and body?	pass→pass	7,265	6,867	-5%	1	1	0%	1,546	2,469	+60%	0	0	—
case-04 When reading session cookies inside a Next.js 15 Server Component, how must the `cookies()` helper function be called?	pass→pass	4,183	2,869	-31%	1	1	0%	696	1,477	+112%	0	0	—
case-05 What Next.js directive can be placed at the function or component boundary to enable fine-grained caching of asynchronous calls or JSX output?	pass→pass	4,145	4,412	+6%	1	1	0%	692	1,686	+144%	0	0	—
case-06 In a Next.js Server Action, you need to execute an asynchronous audit logging function after the response has been streamed to the user. What server utility function should wrap this task?	pass→pass	3,596	3,474	-3%	1	1	0%	550	1,601	+191%	0	0	—
case-07 Inside a try/catch block in a Next.js Server Component that wraps a navigation action, framework internal errors (such as redirects) are caught and suppressed. What utility function must be called inside the catch block to rethrow framework control errors?	pass→pass	8,146	3,732	-54%	1	1	0%	1,358	1,687	+24%	0	0	—
case-08 In Next.js App Router, what built-in helper functions should be invoked in a Server Component to signal a 403 Forbidden state or a 401 Unauthorized state?	pass→pass	7,635	4,294	-44%	1	1	0%	1,433	1,854	+29%	0	0	—
case-09 A developer places `app/profile/page.tsx` and `app/profile/route.ts` in the same directory, with `route.ts` exporting an `async function GET()`. What happens when a request hits `GET /profile`?	pass→pass	6,480	5,869	-9%	1	1	0%	1,122	2,058	+83%	0	0	—
case-10 In a Next.js Server Component, you need to fetch two independent endpoints: `getUser()` and `getSettings()`. Show how to fetch both concurrently without causing a sequential data waterfall.	pass→pass	8,802	4,897	-44%	1	1	0%	1,572	1,941	+23%	0	0	—
case-11 When rendering remote avatar images from an external CDN inside a Next.js App Router component, what component choice avoids unoptimized image transfers?	pass→pass	9,131	5,753	-37%	1	1	0%	1,588	2,135	+34%	0	0	—
case-12 What approach should be used in Next.js to load external Google Fonts without render-blocking network requests, integrating directly into Tailwind CSS classes?	pass→pass	12,555	9,760	-22%	1	1	0%	2,386	2,817	+18%	0	0	—
case-13 What official framework package provides optimal script injection and lazy loading for Google Analytics 4 in a Next.js application?	pass→pass	7,317	3,935	-46%	1	1	0%	1,140	1,678	+47%	0	0	—
case-14 When placing custom inline JavaScript code inside a Next.js `Script` component, what prop must be explicitly supplied to identify the inline script block?	pass→pass	3,255	2,547	-22%	1	1	0%	553	1,419	+157%	0	0	—
case-15 In Next.js App Router, calling `useSearchParams()` inside a Client Component can cause static rendering bailout during build time. How must this component be structured in the JSX tree to prevent full page CSR bailout?	pass→pass	8,461	6,418	-24%	1	1	0%	1,547	2,287	+48%	0	0	—
case-16 In a Next.js parallel route directory structure with a `@modal` slot, what file name is required to serve as the unmatched route fallback when navigating to pages where the modal should not be rendered?	pass→pass	3,818	3,446	-10%	1	1	0%	554	1,605	+190%	0	0	—
case-17 When a user clicks a dismiss button inside an intercepted modal route constructed with `@modal` and `(.)`, what router function call closes the modal while restoring the underlying route state?	pass→pass	5,147	3,536	-31%	1	1	0%	925	1,597	+73%	0	0	—
case-18 When preparing a Next.js application for containerization with Docker, what option in `next.config.js` restricts the build bundle to only necessary production files?	pass→pass	3,385	2,643	-22%	1	1	0%	510	1,446	+184%	0	0	—
case-19 When running a Next.js build command to diagnose compilation issues on specific route segments, what CLI flag targets rebuilding specific route paths?	fail→pass	12,010	2,149	-82%	1	1	0%	1,954	1,339	-31%	0	0	—
case-20 In Next.js App Router, how should third-party or application stylesheet files be included in layout components rather than referencing external stylesheet URLs in HTML document tags?	pass→pass	10,798	8,909	-17%	1	1	0%	2,047	2,614	+28%	0	0	—
case-21 In a React client component using Zustand for state management, how should a selector be written to select `user.name` and `user.email` without causing component re-renders when `user.age` changes?	pass→pass	9,879	8,734	-12%	1	1	0%	1,897	2,753	+45%	0	0	—
case-22 In Tailwind CSS, what utility classes create a responsive layout that displays as a single column on mobile devices and 3 columns on medium screens with a 1rem grid gap?	pass→pass	3,532	3,281	-7%	1	1	0%	593	1,617	+173%	0	0	—
case-23 In a React single-page application built with Vite, how do you configure path aliases in `vite.config.ts` so `@` maps to the local `./src` directory?	pass→pass	8,365	5,545	-34%	1	1	0%	1,571	2,018	+28%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 23 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 91.3%
Pass rate with the skill: 100%
Cases attempted: 23
Cases counted toward lift: 23
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/8/2026, 19:04 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

In a Next.js 16 application where custom request proxying and header modification must run before request handling, what is the required root file name for this interceptor logic?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run100

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+61% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 50 days ago

Other measured skills in the registry, with their headline benchmark lift.