skills.rest
Asmayaseen
AsmayaseenCOMMUNITY
Explore all skills by this author →
GitHub

building-nextjs-apps

Implement Next.js 16 patterns with async params and proxy.ts.

2|Updated Dec 24, 2025
Search Tags:#migration#next.js#turbopack#dynamic-routes#proxy.ts#nextjs-16#route-handlers
One-click install
npx skills add https://github.com/Asmayaseen/hackathon-2 --skill building-nextjs-apps-asmayaseen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-nextjs-apps
Source: https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/building-nextjs-apps
Command: npx skills add https://github.com/Asmayaseen/hackathon-2 --skill building-nextjs-apps-asmayaseen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires , and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers implement Next.js 16 patterns correctly, avoiding common migration mistakes and ensuring compatibility with the App Router, dynamic routes, proxy.ts, and new image APIs.

Core Features & Use Cases

  • Migration guidance: Upgrading from Next.js 15 to 16 with async params, async searchParams, and updated route handlers and metadata generation.
  • Pattern adoption: Correct usage of app directory components, dynamic and parallel routes, and replacing middleware with proxy.ts.
  • Best-practice scaffolding: Templates and examples for Turbopack defaults, cacheComponents, and modern Image usage.
  • Use Case: Start a Next.js 16 project or upgrade an existing one following the recommended patterns to avoid common pitfalls.

Quick Start

Use this skill to guide the setup and migration process for Next.js 16 projects. This section provides actionable steps and references to examples in the repository.

  • Step 1: Create a new Next.js 16 project with npx create-next-app@latest
  • Step 2: Upgrade an existing project by upgrading next to 16, React to latest
  • Step 3: Review and apply patterns from references/nextjs-16-patterns.md and references/frontend-design.md
  • Step 4: Verify the skill readiness by running python3 scripts/verify.py

Frequently Asked Questions about building-nextjs-apps

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

FAQPage Schema
How do I migrate to Next.js 16 with async params and route handlers?▼

Migrating to Next.js 16 requires upgrading your next and React versions, enforcing async params and searchParams, updating route handlers, and applying guidance from references/nextjs-16-patterns.md.

What is the replacement for middleware in Next.js 16?▼

proxy.ts replaces middleware in Next.js 16, allowing you to manage request handling and routing patterns correctly within the updated App Router structure.

How do I use dynamic and parallel routes in Next.js 16?▼

Dynamic and parallel routes in Next.js 16 require using app directory components correctly and ensuring route handlers and params are processed asynchronously to maintain framework compatibility.

Does Next.js 16 use Turbopack and cacheComponents by default?▼

Next.js 16 sets Turbopack defaults and utilizes cacheComponents, requiring developers to follow best-practice scaffolding and updated Image usage APIs to ensure proper rendering and build performance.

What are the limitations or common mistakes when upgrading to Next.js 16?▼

Common mistakes when upgrading to Next.js 16 include failing to enforce async params and async route handlers, or incorrectly replacing middleware with proxy.ts, which leads to App Router compatibility issues.

Related Skills

Explore More Software Engineering Skills→
JaylaelikeJaylaelike

nextjs-boilerplate

Bootstraps a Next.js project with Tailwind, shadcn/ui, and optional assistant-ai chat integration.

Community
Intermediate
hussain9491hussain9491

building-nextjs-apps

Guide Next.js 16 app builds with dynamic routes and migration steps.

Community
Advanced
MehakanisMehakanis

nextjs

Provide Next.js 16 patterns for App Router, Server Components, and authentication.

Community
Advanced
ai-enhanced-engineerai-enhanced-engineer
3

nextjs-16-app-router

Guide Next.js 16 App Router projects with React 19 and Turbopack.

Official
Advanced