Nextjs

Next.js Skill

The React Framework for the Web.

Ecosystem Graph

graph LR
  nextjs["Next.js"]
  nextjs -- "depends on" --> react
  nextjs -- "deploys to" --> vercel
  nextjs -- "authenticates with" --> clerk
  nextjs -- "alternative to" --> nuxt
  nextjs -- "works well with" --> trpc

Quick Start

Next.js 14+ emphasizes the App Router and React Server Components. Server Components execute exclusively on the server, drastically reducing client-side JavaScript bundles.

npx create-next-app@latest

Production Patterns

Cache Invalidation

The App Router aggressively caches data. Do not rely on time-based revalidation (revalidate: 60) for highly dynamic, user-specific data. Instead, use On-Demand Revalidation (revalidateTag or revalidatePath) triggered directly from your Server Actions after a database mutation.

Architecture & Scaling

Edge vs Node.js Runtimes

Next.js allows specifying export const runtime = 'edge' on a per-route basis. The Edge runtime boots in milliseconds but strictly prohibits native Node.js APIs (like fs or crypto). For heavy backend processing, stick to the default Node.js runtime.

Error Recovery

Use error.tsx at the segment level to catch unexpected runtime errors in Server Components. For expected validation errors during form submissions, return strongly-typed error objects from your Server Action rather than throwing exceptions.

Security Notes

Never expose environment variables to the browser unless they are strictly prefixed with NEXT_PUBLIC_. Treat Server Actions exactly like public API endpoints; always verify the user session (e.g., via Clerk auth()) inside the action before mutating data.

Relationships

Prerequisites: react

Alternatives: nuxt

Works Well With: trpc

Deploys To: vercel

References

• App Router Docs

Why use this skill

Use this when your agent works with nextjs — structured patterns beat pasted docs and prevent common hallucinations.

AI pitfalls

• Using outdated SDK or API versions from training data
• Inventing environment variable names
• Omitting error handling and retry logic

Production checklist

• Secrets in environment variables, not source code
• Error handling and logging in place
• Rate limits and timeouts configured

Related skills

• react — depends on
• vercel — deploys to
• clerk — authenticates with
• nuxt — alternative to
• trpc — works well with

Last Verified: 2026-07-02