skills.rest
sharad07072007
sharad07072007COMMUNITY
Explore all skills by this author →
GitHub

nextjs

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Next.js evolves rapidly, and developers frequently write outdated Pages Router patterns, miss async API changes in Next.js 15/16, or misconfigure Server Components, caching, and metadata. This Skill provides expert App Router guidance plus automated validation rules that detect deprecated patterns and point to the correct modern replacement. ## Core Features & Use Cases - App Router Expertise: Covers routing, layouts, Server Components, Server Actions, route handlers, parallel/intercepting routes, metadata, image/font optimization, and error handling through detailed reference docs. - Automated Pattern Validation: Detects legacy code such as getServerSideProps, next/router, next/head, synchronous cookies()/headers(), and middleware.ts, with severity levels and migration guidance for each. - Skill Chaining: Automatically routes related concerns to specialized skills like routing-middleware, vercel-functions, auth, runtime-cache, and shadcn when relevant patterns are detected. - Use Case: When migrating a Next.js 14 Pages Router app to Next.js 16 App Router, the Skill flags every deprecated API in your code and explains the exact modern replacement, from async params to proxy.ts. ## Quick Start Ask the assistant to review your Next.js app directory for deprecated Pages Router patterns and generate an App Router migration plan.

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

Replace getServerSideProps with an async Server Component that fetches data directly in the page component. The Skill flags getServerSideProps as an error and guides you to use server components or route handlers with async data fetching instead.

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

In Next.js 15 and 16, cookies() and headers() are asynchronous and must be awaited. Use const cookieStore = await cookies() instead of calling them synchronously, or run the official codemod npx @next/codemod@latest next-async-request-api.

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

Next.js 16 renames middleware.ts to proxy.ts, with the exported function renamed from middleware() to proxy() and config renamed to proxyConfig. Run npx @next/codemod@latest upgrade to auto-rename, and keep the file at the project root.

Should I use Server Actions or Route Handlers for data fetching?▼

Use Server Components for internal reads, Server Actions for mutations and form submissions, and Route Handlers for external APIs, webhooks, or cacheable GET endpoints. Server Actions only support POST and have no HTTP caching semantics.

Does next/font work with Tailwind CSS?▼

Yes, next/font integrates with Tailwind by defining a CSS variable like --font-inter on the font instance, then referencing var(--font-inter) in the fontFamily section of tailwind.config.js. This gives zero-CLS self-hosted font loading.

Why does my Next.js modal route 404 on page refresh?▼

Parallel route slots like @modal require a default.tsx file that returns null, otherwise hard navigation or refresh produces a 404. Also ensure modals close with router.back() rather than router.push() to correctly clear the intercepted route.

Related Skills

Explore More Software Engineering Skills→
Coverage-CreativesCoverage-Creatives

Next.js Project Setup

Initialize and configure Next.js projects with App Router, TypeScript, and Tailwind CSS.

Official
Intermediate
ricablericable

vercel-deploy

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

Community
Intermediate
RyoyaYahagiRyoyaYahagi

webapp-fullstack

Deploy and configure a fullstack Next.js/Remix app with Clerk authentication and Neon database integration.

Community
Intermediate
dallaydallay

astro

Configures Astro island architecture, hydration directives, content schemas, and routing for content-driven sites.

Official
Advanced