next-best-practices

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

1.09x

Quality

45%

Does it follow best practices?

Impact

90%

1.09x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/next-best-practices/SKILL.md

Evaluation results

93%

-2%

Blog Platform: Post Detail Page

Next.js 15 async APIs and data patterns

Criteria

Without context

With context

Async params awaited

100%

Async searchParams awaited

100%

70%

Async cookies awaited

100%

No async client component

100%

Date serialized to string

100%

Parallel data fetching

58%

66%

redirect outside try-catch

100%

Server Component for data reads

100%

Suspense for useSearchParams

100%

generateMetadata async params

100%

26%

Product Landing Page: Performance and Social Sharing

Image, font, script, and metadata optimization

Criteria

Without context

With context

next/image for hero

100%

priority on hero image

100%

sizes on customer logos

100%

remotePatterns configured

100%

next/font with subset

100%

Font imported once in layout

100%

@next/third-parties for GA

100%

Inline script has id

100%

next/og not @vercel/og

100%

No edge runtime for OG image

100%

OG image uses route params

100%

Metadata in server component

100%

78%

Photo Gallery App: Production Deployment and Feature Build

Self-hosting, parallel routes, and third-party bundling

Criteria

Without context

With context

output: standalone

100%

HOSTNAME env var

100%

Static assets copied separately

100%

ISR cache handler configured

100%

cacheMaxMemorySize: 0

100%

recharts with ssr: false

default.tsx for modal slot

100%

router.back() closes modal

100%

Suspense for useSearchParams

Health check endpoint

100%

Repository: vercel-labs/next-skills
Commit: dc1de9c

Evaluated: 3 months ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Blog Platform: Post Detail Page Product Landing Page: Performance and Social Sharing Photo Gallery App: Production Deployment and Feature Build

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.