nextjs

Guide building scalable Next.js 16+ apps using the App Router.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/HuynhSang2005/delivery-app --skill nextjs-huynhsang2005
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/HuynhSang2005/delivery-app/tree/main/.agents/skills/nextjs
Command: npx skills add https://github.com/HuynhSang2005/delivery-app --skill nextjs-huynhsang2005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Expert guidance for designing, debugging, and architecting Next.js 16+ apps using the App Router, including routing, Server Components, Server Actions, caching, layouts, middleware/proxy, data fetching, rendering strategies, and Vercel deployment.

Core Features & Use Cases

  • Routing and layouts with the App Router, including dynamic segments, metadata, and route groups
  • Server Components and Server Actions for data fetching and mutations with zero client JS by default
  • Middleware/proxy patterns and deployment guidance on Vercel for performance, security, and scalable architectures

Quick Start

Ask for a guided plan to scaffold a Next.js 16+ App Router project with server components, data fetching, and deployment on Vercel.

Frequently Asked Questions about nextjs

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

FAQPage Schema
How do I migrate my Next.js routing from the Pages Router to the App Router?

Migrating to the App Router requires restructuring your Next.js project to use the new directory-based routing system, layouts, and Server Components. This skill provides concrete guidance for transitioning routes, migrating data fetching logic, and adopting App Router best practices.

How do I fetch data and handle mutations using Next.js Server Components and Server Actions?

Next.js Server Components fetch data directly on the server with zero client JS, while Server Actions handle mutations securely. This skill guides you through implementing these patterns for efficient data fetching, mutations, and rendering strategies in scalable applications.

What's the best way to structure dynamic segments and route groups in the Next.js App Router?

Structuring dynamic segments and route groups in the App Router involves using specific folder naming conventions to build scalable layouts and generate metadata. This skill offers architectural patterns for organizing complex app routes and layouts effectively.

How do I implement middleware and proxy patterns for security in Next.js 16+?

Implementing middleware and proxy patterns in Next.js 16+ allows you to intercept requests for authentication and security before they reach your routes. This skill provides guidance on configuring middleware to optimize performance and secure scalable architectures.

Can I use this skill to guide deployment of my Next.js App Router project on Vercel?

Yes, this skill provides specific deployment guidance for launching Next.js App Router projects on Vercel. It covers the necessary configurations and best practices to ensure performance, security, and scalable architecture when deploying your application.