skills.rest
rauell1
rauell1COMMUNITY
Explore all skills by this author →
Website𝕏@rauell_GitHub

nextjs

Fix Next.js App Router implementation and migration issues in production applications.

3|Updated Mar 17, 2026
Search Tags:#deployment#caching#routing#vercel#nextjs#server components#app router
One-click install
npx skills add https://github.com/rauell1/safaricharge --skill nextjs-rauell1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/rauell1/safaricharge/tree/main/.agents/skills/nextjs
Command: npx skills add https://github.com/rauell1/safaricharge --skill nextjs-rauell1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design, debug, and modernize Next.js App Router applications by clarifying routing, rendering, data fetching, caching, and deployment decisions.

Core Features & Use Cases

  • App Router Architecture: Plan layouts, nested routes, server components, client components, and metadata patterns for maintainable React 19 applications.
  • Production Debugging: Identify common issues like legacy Pages Router APIs, invalid component boundaries, async request APIs, and route handler mismatches.
  • Vercel-Ready Guidance: Apply deployment-safe patterns for caching, middleware proxy migration, API routes, and self-hosting considerations.
  • Use Case: A team migrating a large dashboard can use this Skill to replace legacy routing patterns, structure page segments correctly, and avoid hydration or rendering regressions.

Quick Start

Ask for a review of your Next.js App Router project so the Skill can recommend the correct routing, rendering, caching, and deployment fixes.

Frequently Asked Questions about nextjs

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

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

Migrating legacy Pages Router APIs to the Next.js App Router involves replacing legacy routing patterns, structuring page segments correctly, and updating React 19 boundaries to prevent hydration or rendering regressions.

How do I correctly structure server and client component boundaries in Next.js?▼

Structuring server and client component boundaries correctly in Next.js requires handling App Router conventions and React 19 boundaries to maintain performance-safe patterns for maintainable builds.

Why does my Next.js async request API fail in production?▼

Your Next.js async request API fails because it requires correct handling of Next.js 16 async APIs, specifically avoiding invalid component boundaries and legacy patterns during production debugging.

What is the best way to configure caching and middleware proxy migration for Vercel deployment?▼

The best way to configure caching and middleware proxy migration for Vercel deployment is applying deployment-safe patterns for caching, middleware proxy migration, API routes, and self-hosting considerations.

Does this Next.js guidance support self-hosting scenarios outside of Vercel?▼

Yes, this Next.js guidance supports self-hosting scenarios outside of Vercel by providing Vercel-ready guidance and deployment-safe patterns for API routes, caching, and middleware proxy migration.

Related Skills

Explore More Software Engineering Skills→
Gentleman-ProgrammingGentleman-Programming
618

react-19

Enforce server-components-first React 19 patterns with React Compiler and named imports.

Official
Advanced
vercel-labsvercel-labs
246

runtime-cache

Cache key-value data per region with tag-based invalidation via the Vercel Runtime Cache API.

Official
Intermediate
p-o-ke-naep-o-ke-nae

nextjs-app-router-patterns

Design Next.js App Router architecture with server components and data fetching patterns.

Community
Advanced
almiavicasalmiavicas

nextjs

Guide Next.js App Router development covering routing, server components, and Vercel deployment.

Community
Advanced