skills.rest
MohammedHTahir
MohammedHTahirCOMMUNITY
Explore all skills by this author →
GitHub

nextjs

Migrate Next.js Pages Router code to App Router with async APIs.

Updated May 16, 2026
Search Tags:#metadata#server actions#nextjs#server components#app router#routing migration#vercel proxy
One-click install
npx skills add https://github.com/MohammedHTahir/vibe-coding-platform --skill nextjs-mohammedhtahir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/MohammedHTahir/vibe-coding-platform/tree/main/.kiro/vercel-plugin/skills/nextjs
Command: npx skills add https://github.com/MohammedHTahir/vibe-coding-platform --skill nextjs-mohammedhtahir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Next.js codebases fail or slow down when developers mix routing paradigms, misuse Server vs Client Components, or rely on deprecated APIs—this Skill helps you implement the correct App Router patterns with fewer regressions.

Core Features & Use Cases

  • App Router architecture guidance: Choose correct file conventions and component boundaries for Server Components, layouts, and route segments.
  • Modern data and caching patterns: Apply async params/searchParams, use cookies()/headers() correctly, and follow Next.js cache/caching idioms to avoid runtime issues.
  • Migration and deprecation validation: Detect Pages Router patterns (e.g., getServerSideProps, next/head, next/router) and guide safe migration to App Router equivalents.
  • Vercel-ready routing/runtime ergonomics: Prefer proxy.ts over middleware.ts in Next.js 16+, and surface common serverless compatibility pitfalls (API handler placement, in-process caches, heavy dependencies).
  • Optional deep dives via included references: Leverages a repository of Next.js best-practice docs (file conventions, RSC boundaries, async patterns, route handlers, metadata, suspense boundaries, etc.) for targeted fixes.

Quick Start

Ask the agent to refactor my Next.js Pages Router code to the App Router by removing getServerSideProps and updating metadata, routing, and middleware/proxy usage for Next.js 16.

Frequently Asked Questions about nextjs

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

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

Migrating to the Next.js App Router requires replacing deprecated patterns like getServerSideProps and next/router with App Router equivalents, updating file conventions, and switching middleware to proxy.ts for Next.js 16 compatibility.

Why does my Next.js App Router throw errors with async params or searchParams?▼

Next.js 15 and 16 enforce async request utilities, meaning params, searchParams, cookies, and headers must be awaited. Accessing these properties synchronously causes runtime errors and breaks Server Component rendering boundaries.

How do I fix Server and Client Component boundary mistakes in Next.js?▼

Fixing Server and Client Component boundaries requires enforcing correct App Router architecture, moving client-side hooks to Client Components, and ensuring Server Components handle data fetching and metadata generation without browser APIs.

Do I need to replace middleware.ts with proxy.ts in Next.js 16?▼

For Next.js 16 and Vercel-ready routing, you should prefer proxy.ts over middleware.ts to handle routing behavior and avoid serverless compatibility pitfalls related to API handler placement and heavy dependencies.

What is the best way to generate static pages and metadata in the App Router?▼

The best way to generate static pages and metadata in the App Router is using the generateStaticParams and generateMetadata file conventions within page and layout segments to enforce correct rendering boundaries and modern caching idioms.

Related Skills

Explore More Software Engineering Skills→
tnunamaktnunamak

nextjs

Detect deprecated Pages Router patterns and invalid Server/Client boundaries in Next.js App Router code.

Community
Advanced
NagyViktNagyVikt
2

nextjs

Migrate Next.js 16+ Pages Router apps to App Router patterns.

Community
Advanced
tankpkgtankpkg
1

@tank/nextjs

Guide Next.js App Router development with server-first rendering and caching.

Official
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate