skills.rest
Adithiya-S
Adithiya-SCOMMUNITY
Explore all skills by this author →
GitHub

nextjs

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

Updated Aug 21, 2025
Search Tags:#react#routing#migration#vercel#nextjs#server components#app router
One-click install
npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill nextjs-adithiya-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/Adithiya-S/AI-Study-Companion/tree/main/.agents/skills/nextjs
Command: npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill nextjs-adithiya-s

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 misuse Server Components, leading to build errors, hydration mismatches, and broken deployments. ## Core Features & Use Cases - Pattern Validation: Detects deprecated APIs like getServerSideProps, next/router, next/head, and synchronous cookies()/headers() calls, with severity-ranked migration guidance. - App Router Expertise: Covers routing, layouts, Server Components, Server Actions, route handlers, metadata, image/font optimization, parallel routes, and error handling through dedicated reference docs. - Skill Chaining: Automatically routes related concerns to specialized skills for middleware/proxy, auth, caching, storage, and AI gateway patterns. - Use Case: When migrating a Next.js 14 project to Next.js 16, the skill flags middleware.ts for renaming to proxy.ts, unawaited params/searchParams, and legacy Pages Router files, then provides corrected code patterns. ## Quick Start Ask the assistant to review your Next.js app directory for App Router best practices and Next.js 16 migration issues.

Frequently Asked Questions about nextjs

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

FAQPage Schema
How do I migrate from Pages Router to App Router in Next.js?▼

Replace getServerSideProps and getStaticProps with async Server Components and generateStaticParams, swap next/router for next/navigation hooks, and move pages/api handlers to route.ts files with named HTTP exports like GET and POST.

Why do I get an error calling cookies() or headers() in Next.js 16?▼

cookies(), headers(), params, and searchParams are asynchronous in Next.js 15 and later. You must await them, for example const cookieStore = await cookies(), or use React's use() hook in synchronous components.

What changed with middleware 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. Run the official codemod npx @next/codemod@latest upgrade to auto-rename.

When should I use Server Actions versus Route Handlers?▼

Use Server Actions for mutations and form submissions from your own UI since they offer type safety and progressive enhancement. Use Route Handlers for external APIs, webhooks, mobile clients, or GET endpoints needing HTTP caching.

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

Hydration mismatches come from browser-only APIs, dates, random values, or invalid HTML nesting. Gate client-only rendering behind a mounted check, use useId() for IDs, and load third-party scripts with next/script using afterInteractive.

Does next/font work with Tailwind CSS?▼

Yes. Load the font with the variable option in next/font, apply the variable class to the html element, then reference var(--font-name) in your tailwind.config.js fontFamily theme extension.

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
openaiopenai
5.3k

nextjs

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

Official
Advanced
MohammedHTahirMohammedHTahir

ai-gateway

Route AI model calls through Vercel AI Gateway with failover and rate limiting.

Community
Advanced
farming-labsfarming-labs
35

meta-frameworks-overview

Compare meta-frameworks like Next.js, Nuxt, SvelteKit, Remix, and Astro.

Official
Basic