skills.rest
dsgalkar
dsgalkarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs

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

Updated Sep 5, 2026
Search Tags:#react#migration#vercel#nextjs#code validation#server components#app router
One-click install
npx skills add https://github.com/dsgalkar/dnyaneshwar_portfolio --skill nextjs-dsgalkar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/dsgalkar/dnyaneshwar_portfolio/tree/main/.agents/plugins/vercel/skills/nextjs
Command: npx skills add https://github.com/dsgalkar/dnyaneshwar_portfolio --skill nextjs-dsgalkar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Next.js evolves rapidly, and patterns like getServerSideProps, next/router, and synchronous cookies() are deprecated or removed in newer versions. This Skill detects outdated Pages Router and pre-16 patterns in your code and provides expert guidance for building, debugging, and migrating App Router applications. ## Core Features & Use Cases - Pattern Validation: Scans code for deprecated APIs (getServerSideProps, next/head, next export, sync cookies/headers) and reports severity-graded migration messages. - App Router Expertise: Covers routing, Server Components, Server Actions, layouts, proxy.ts (middleware rename), data fetching, caching, metadata, image/font optimization, and error handling via detailed reference docs. - Skill Chaining: Automatically routes related concerns to specialized skills (auth, vercel-functions, runtime-cache, shadcn, ai-gateway) when relevant patterns are detected. - Use Case: While migrating a Next.js 14 project to Next.js 16, the Skill flags export function middleware and guides renaming it to proxy.ts, then flags un-awaited cookies() calls and shows the async fix. ## Quick Start Ask the assistant to review your Next.js app directory for deprecated Pages Router patterns and migrate them to App Router conventions.

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 endpoints. The Skill flags this pattern as an error and explains the migration.

How to fix async cookies and headers errors in Next.js 16?▼

In Next.js 15+, cookies() and headers() are asynchronous and must be awaited: const cookieStore = await cookies(). The same applies to params and searchParams, which are now Promises. A codemod (npx @next/codemod@latest next-async-request-api) automates the migration.

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

middleware.ts is renamed to proxy.ts in Next.js 16, with the exported function renamed from middleware() to proxy() and config renamed to proxyConfig. Capabilities remain the same; the official upgrade codemod can auto-rename the files.

Should I use Server Components or Server Actions for data fetching?▼

Use Server Components for reads since they fetch data directly without an API layer, and Server Actions for mutations like form submissions. Route Handlers are reserved for external APIs, webhooks, and cacheable GET endpoints.

Why does my Next.js page fail with 'window is not defined'?▼

The package uses browser APIs inside a Server Component. Fix it by adding 'use client', using dynamic import with ssr: false, or adding the package to serverExternalPackages in next.config.js if it must run on the server.

When should I not use next/image or next/font?▼

You should almost always use them over native img tags and external font links. The exception is static exports (output: 'export'), where you must set unoptimized images or configure a custom loader like Cloudinary.

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
ricablericable

vercel-deploy

Deploy Next.js applications to Vercel with build and runtime configuration.

Community
Intermediate
vercel-labsvercel-labs
246

auth

Integrate Clerk, Descope, or Auth0 authentication into Next.js apps on Vercel.

Official
Intermediate
jcsoftdevjcsoftdev

react-render-optimization

Analyze React component trees to eliminate unnecessary re-renders across Next.js, Remix, Vite, and vanilla apps.

Community
Advanced