nextjs

Guide Next.js 16 development with App Router and React 19.2.

Updated Nov 14, 2024

Search Tags:#typescript #caching #react #nextjs #server components #app router

Ready to run

npx skills add https://github.com/mjannino/travel-photos --skill nextjs-mjannino

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/mjannino/travel-photos/tree/main/.agents/skills/nextjs
Command: npx skills add https://github.com/mjannino/travel-photos --skill nextjs-mjannino

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps developers navigate the complexities and breaking changes introduced in Next.js 16, ensuring smooth development and preventing common errors.

Core Features & Use Cases

Next.js 16 Migration: Guides users through breaking changes like async route parameters and middleware migration.
Caching Strategies: Explains and demonstrates new caching patterns with "use cache" and updated APIs.
React 19.2 Integration: Covers new features and best practices with the latest React version.
Use Case: You're migrating a Next.js 15 app to 16 and encountering errors with async route parameters. This Skill provides the exact code patterns and explanations to fix it.

Quick Start

Use the nextjs skill to understand how to handle async route parameters in 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 handle async route parameters in Next.js 16 App Router?▼

Next.js 16 requires awaiting route parameters in Server Components by unwrapping the Promise params object before accessing its properties. This breaking change ensures asynchronous data fetching patterns are properly handled without blocking the main thread during server-side rendering.

What is the new caching mechanism using 'use cache' in Next.js?▼

The 'use cache' directive in Next.js 16 introduces a new caching mechanism that explicitly defines cache boundaries. It replaces previous automatic fetch caching behaviors, giving developers granular control over what data gets cached and how long it persists across Server Components and Server Actions.

How do I migrate from middleware.ts to proxy.ts in Next.js 16?▼

Next.js 16 migrates middleware functionality to proxy.ts, moving request interception and response modification logic to a new proxy architecture. This provides improved type safety and better integration with the App Router's server component lifecycle.

Does Next.js 16 support React 19.2 Server Components and Server Actions?▼

Next.js 16 fully integrates React 19.2, supporting Server Components and Server Actions with new features and best practices. This includes enhanced async rendering capabilities, improved caching strategies, and updated data mutation patterns for modern application architectures.

What are the breaking changes when upgrading to Next.js 16?▼

Next.js 16 introduces breaking changes including asynchronous route parameters, middleware to proxy.ts migration, new 'use cache' caching mechanisms, and Turbopack stability updates. These changes require code modifications but provide improved performance and developer experience.