skills.rest
ridhijain709
ridhijain709COMMUNITY
Explore all skills by this author →
GitHub

nextjs

Guides building, debugging, and migrating Next.js App Router applications with validated best practices.

Updated Sep 17, 2026
Search Tags:#react#middleware#migration#next.js#vercel#server components#app router
One-click install
npx skills add https://github.com/ridhijain709/AIPORSCHE --skill nextjs-ridhijain709
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/ridhijain709/AIPORSCHE/tree/main/.agents/skills/nextjs
Command: npx skills add https://github.com/ridhijain709/AIPORSCHE --skill nextjs-ridhijain709

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Next.js evolves quickly, and developers frequently hit breaking changes such as async request APIs, the middleware-to-proxy rename, and removed Pages Router patterns. This Skill provides expert guidance and automated pattern detection to keep Next.js code correct, modern, and deployable on Vercel. ## Core Features & Use Cases - App Router Expertise: Covers routing, layouts, Server Components, Server Actions, Cache Components, data fetching, metadata, and rendering strategies. - Automated Validation Rules: Detects deprecated patterns like getServerSideProps, next/head, next/router, and un-awaited cookies()/headers() with severity levels and migration guidance. - Skill Chaining: Routes related concerns to companion skills such as routing-middleware, vercel-functions, auth, runtime-cache, and shadcn when relevant patterns are detected. - Use Case: When migrating a Pages Router app to the App Router, the Skill flags legacy APIs, explains the replacement pattern, and points to reference docs for async params, error handling, and image optimization. ## Quick Start Ask the assistant to review your Next.js app directory for App Router best practices and migrate any legacy Pages Router patterns it finds.

Frequently Asked Questions about nextjs

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?▼

getServerSideProps is removed in the App Router. Replace it with an async Server Component that fetches data directly, or use a route handler for API-style access. The Skill flags this pattern as an error and explains the migration.

Why do cookies() and headers() throw errors in Next.js 16?▼

In Next.js 15 and later, cookies() and headers() are asynchronous and must be awaited, for example const cookieStore = await cookies(). Calling them synchronously triggers an error, which this Skill detects and corrects.

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

middleware.ts is renamed to proxy.ts in Next.js 16, with the exported function renamed to proxy() and config renamed to proxyConfig. The functionality is the same; the Skill recommends the rename and links to migration guidance.

When should I use Server Actions versus Route Handlers?▼

Use Server Actions for mutations and form submissions from your own UI, since they are POST-only and internal. Use Route Handlers for external APIs, webhooks, and cacheable GET endpoints accessed by third parties or mobile apps.

Does the App Router still support next/head for SEO metadata?▼

No, next/head is Pages Router only. In the App Router, export a metadata object or a generateMetadata function from a Server Component, or use file conventions like opengraph-image.tsx for OG images.

Why does my Next.js page fail with a hydration mismatch error?▼

Hydration errors come from browser-only APIs, dates rendered in different timezones, random IDs, or invalid HTML nesting. The Skill's hydration reference explains each cause and fixes such as useId, mounted checks, and next/script strategies.

Related Skills

Explore More Software Engineering Skills→
kirillshilinkirillshilin

shai-scaffold-nextjs-app

Automate Next.js App Router project scaffolding with TypeScript and Tailwind.

Community
Advanced
mgd34msumgd34msu
4

vercel

Deploy applications to Vercel with serverless functions and environment variables.

Community
Intermediate
fusenginefusengine
22

nextjs-stack

Set up a Next.js 16 stack with App Router, Prisma 7, and Better Auth.

Community
Advanced
zacharyr0thzacharyr0th

next-pages-router

Implement Next.js Pages Router data fetching, API routes, and App Router migrations.

Community
Advanced