nextjs-16

Guide Next.js 15 to 16 migrations with app router conventions.

1|Updated Jan 2, 2026
One-click install
npx skills add https://github.com/anasahmed07/doit --skill nextjs-16-anasahmed07
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-16
Source: https://github.com/anasahmed07/doit/tree/main/.claude/skills/nextjs-16
Command: npx skills add https://github.com/anasahmed07/doit --skill nextjs-16-anasahmed07

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Upgrading to Next.js 16 and adopting its new conventions can be error-prone due to breaking changes such as async params, proxy.ts, Turbopack defaults, and cacheComponents. This skill guides teams to migrate smoothly and adopt the correct patterns to avoid common pitfalls.

Core Features & Use Cases

  • Guides adoption of app router conventions (async params, proxy.ts) and the updated image handling patterns.
  • Explains top-level configuration changes (turbopack defaults, cacheComponents) and the requirement of default.js for parallel routes.
  • Provides migration strategies for upgrading from Next.js 15 to 16 and for starting new Next.js 16 projects with best practices.

Quick Start

Start a Next.js 16 project or upgrade an existing one to use the app router, proxy.ts, and Turbopack defaults.

Frequently Asked Questions about nextjs-16

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

FAQPage Schema
How do I migrate from Next.js 15 to Next.js 16 without breaking async params?

Migrating to Next.js 16 requires adopting async params in the app router to avoid breaking changes. The skill provides migration strategies and examples to guide teams smoothly through upgrading from Next.js 15 and implementing the correct patterns.

What are the new app router conventions in Next.js 16?

Next.js 16 app router conventions include async params, proxy.ts, and default.js for parallel routes. The skill guides developers in adopting these updated conventions and outlines top-level configuration changes like cacheComponents to ensure projects follow best practices.

Does Next.js 16 require Turbopack configuration changes?

Yes, Next.js 16 introduces Turbopack defaults that require top-level configuration changes. The skill explains how to implement these Turbopack configurations alongside cacheComponents to ensure your project adheres to the new framework standards.

How do I set up parallel routes with default.js in Next.js 16?

Setting up parallel routes in Next.js 16 requires using default.js to avoid rendering errors. The skill guides developers through implementing this app router pattern correctly, providing examples for both new projects and existing migrations.

What is the best way to start a new Next.js 16 project with cacheComponents?

Starting a new Next.js 16 project involves enabling cacheComponents and using Turbopack defaults. The skill provides migration-focused guidance and examples for initializing projects with these best practices to avoid common pitfalls from the beginning.

Why does upgrading to Next.js 16 cause proxy.ts errors?

Upgrading to Next.js 16 causes proxy.ts errors if the new conventions are not adopted correctly. The skill guides developers through implementing proxy.ts and other app router patterns to avoid these common migration pitfalls.