skills.rest
Domush
DomushCOMMUNITY
Explore all skills by this author →
GitHub

next-js

Guides building, debugging, and migrating Next.js App Router applications with server and client boundaries.

1|Updated Apr 8, 2026
Search Tags:#caching#react#migration#next.js#server actions#server components#app router
One-click install
npx skills add https://github.com/Domush/ai-agent-web-development-skills --skill next-js-domush
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-js
Source: https://github.com/Domush/ai-agent-web-development-skills/tree/main/skills/next-js
Command: npx skills add https://github.com/Domush/ai-agent-web-development-skills --skill next-js-domush

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Modern Next.js development requires constant decisions about server versus client components, data fetching strategies, caching, and routing conventions, and using legacy Pages Router patterns in App Router code causes build errors and runtime bugs. ## Core Features & Use Cases - Architecture Decisions: Provides decision matrices for choosing Server Components, Server Actions, Route Handlers, and runtime targets (Node vs Edge). - Migration Guidance: Maps legacy patterns like getServerSideProps, next/router, next/head, and middleware.ts to their Next.js 16 equivalents such as generateStaticParams, next/navigation, the Metadata API, and proxy.ts. - Validation Rules: Ships pattern-based checks that flag deprecated APIs, un-awaited async request APIs (cookies, headers, params), and boundary violations. - Use Case: When migrating a Pages Router app to App Router, use this Skill to convert data fetching to async Server Components, replace next/head with generateMetadata, and add loading/error/not-found boundaries per route segment. ## Quick Start Ask the agent to review your Next.js app directory and migrate any legacy Pages Router patterns to App Router conventions.

Frequently Asked Questions about next-js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate getServerSideProps to the Next.js App Router?▼

Replace getServerSideProps with an async Server Component that fetches data directly during render. For static generation, use generateStaticParams combined with a revalidation strategy instead of getStaticProps.

When should I use Server Actions versus Route Handlers in Next.js?▼

Use Server Actions for form mutations triggered from your UI, paired with revalidateTag or revalidatePath for cache invalidation. Use Route Handlers when external consumers, webhooks, or third-party clients need a standard HTTP API endpoint.

Why are cookies() and headers() failing in Next.js 16?▼

In Next.js 16, cookies(), headers(), params, and searchParams are asynchronous and must be awaited in server contexts. Calling them synchronously or destructuring params without awaiting causes runtime errors.

Can I use next/router in the App Router?▼

No, next/router only works in the Pages Router. In App Router code, import navigation hooks like useRouter, redirect, and notFound from next/navigation instead.

What replaces middleware.ts in Next.js 16?▼

Next.js 16 prefers proxy.ts with an exported proxy() function for global request interception such as auth redirects and rewrites. Keep proxy checks fast and perform deeper authorization inside route or page server code.

How do I fix hydration mismatch errors in Next.js?▼

Check for browser-only APIs used during server render, time-variant or random values rendered on the server, invalid HTML nesting, and third-party script side effects. Also verify that client components are not declared async and that props passed across the boundary are serializable.

Related Skills

Explore More Software Engineering Skills→
kazdenckazdenc
42

nextjs-init

Scaffold a Next.js project with App Router, TypeScript, and Tailwind CSS.

Community
Intermediate
giosuetedeschi-specgiosuetedeschi-spec

vercel-deployment

Configure environment variables and runtimes for Next.js deployments on Vercel.

Community
Intermediate
DomushDomush
1

react-development

Implements React 19+ components and Tailwind CSS v4+ styles using current APIs and migration patterns.

Community
Intermediate
NevaberryNevaberry
22

react-router-knowledge-patch

Provide React Router v7+ guidance for routes, middleware, and Vite integration.

Official
Intermediate