next-best-practices

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

Install with Tessl CLI

npx tessl i github:vercel-labs/next-skills --skill next-best-practices

What are skills?

Overall
score

65%

Review — 58%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Evaluation — 90%

↑ 1.10x

Agent success when using this skill

Validation — 10 / 16 Passed

Validation for skill structure

SKILL.md

Review

Evals

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%

67%

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%

Evaluated: 7 days ago
Agent: Claude Code

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.