nextjs-16

Original：🇺🇸 English

Translated

Expert Next.js 16 with Turbopack, App Router, Cache Components, proxy.ts, React 19. Use when building Next.js apps, routing, caching, server components, or migrating from v15.

1installs

Sourcefusengine/agents

Added on2026-02-21

NPX Install

npx skill4agent add fusengine/agents nextjs-16

SKILL.md Content

View Translation Comparison →

Next.js 16 Expert

Production-ready React framework with Server Components, streaming, and Turbopack.

Agent Workflow (MANDATORY)

Before ANY implementation, use

TeamCreate

to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Analyze existing routes, components, and patterns
fuse-ai-pilot:research-expert - Verify latest Next.js 16 docs via Context7/Exa
mcp__context7__query-docs - Check breaking changes v15→v16

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

Building new React applications with server-first architecture
Need Server Components for optimal performance and SEO
Implementing streaming and progressive rendering
Migrating from Next.js 14/15 to version 16
Using proxy.ts for route protection (replaces middleware)
Leveraging Turbopack for faster development builds

Why Next.js 16

Feature	Benefit
Turbopack default	2-5x faster builds, 10x faster HMR, Webpack deprecated
Cache Components	Explicit caching with `use cache` directive
proxy.ts	Full Node.js runtime, replaces Edge middleware
React Compiler	Automatic memoization, no manual useMemo/useCallback
React 19	View Transitions, useEffectEvent, Activity component
App Router	Nested layouts, parallel routes, intercepting routes

Breaking Changes from v15

Critical Migration Points

proxy.ts replaces middleware.ts - Full Node.js runtime, not Edge
Turbopack ONLY - Webpack completely deprecated and removed
use cache
directive - Replaces Partial Prerendering (PPR)
React 19 required - New hooks and View Transitions API
Async params/searchParams - Must await dynamic route params

SOLID Architecture

Module-Based Structure

Pages are thin entry points importing from feature modules:

```
app/page.tsx
```
→ imports from
```
modules/public/home/
```

app/dashboard/page.tsx

→ imports from

modules/auth/dashboard/

```
modules/cores/
```
→ Shared services, utilities, configurations

File Conventions

page.tsx - Route UI component
layout.tsx - Shared UI wrapper
loading.tsx - Suspense loading state
error.tsx - Error boundary
not-found.tsx - 404 handling

Core Concepts

Server Components (Default)

All components are Server Components by default. Use

'use client'

directive only when needed for interactivity, hooks, or browser APIs.

Caching Strategy

use cache
- Mark async functions for caching
cacheTag()
- Tag cached data for targeted revalidation
cacheLife()
- Control cache duration (stale, revalidate, expire)
revalidateTag()
- Invalidate cached data on-demand

Data Fetching

Server Components fetch data directly. Use

fetch()

with native caching or database queries. No need for

getServerSideProps

or

getStaticProps

.

Reference Guide

Need	Reference
Initial setup	installation.md, project-structure.md
Migration v15→v16	upgrade.md, middleware-migration.md
Routing	app-router.md, routing-advanced.md
Caching	caching.md, cache-components.md
Server Components	server-components.md, directives.md
React 19 features	react-19.md, react-compiler.md
Route protection	proxy.md, security.md
SEO/Metadata	metadata.md, metadata-files.md
Forms/Actions	forms.md, data-fetching.md
Deployment	deployment.md, environment.md

Best Practices

Server Components first - Only add
```
'use client'
```
when necessary
Colocate data fetching - Fetch data where it's used
Streaming with Suspense - Wrap slow components in Suspense
proxy.ts over middleware - Full Node.js runtime for auth
Cache explicitly - Use
```
use cache
```
for expensive operations
Parallel routes - Load independent UI sections simultaneously