🛠️ 開発・MCP コミュニティ

next-js-16-launchpad

Next.js 16 with Turbopack, Cache Components, and proxy.ts. Use for bootstrapping, migrating, and building with App Router and React 19.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o next-js-16-launchpad.zip https://jpskill.com/download/17721.zip && unzip -o next-js-16-launchpad.zip && rm next-js-16-launchpad.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17721.zip -OutFile "$d\next-js-16-launchpad.zip"; Expand-Archive "$d\next-js-16-launchpad.zip" -DestinationPath $d -Force; ri "$d\next-js-16-launchpad.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して next-js-16-launchpad.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → next-js-16-launchpad フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 15

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Next.js 16 Launchpad

Next.js 16: Turbopack がデフォルト (ビルドが 2〜5 倍高速化)、Cache Components ('use cache')、明示的な制御のための proxy.ts。

どのような時に使うか

✅ Next.js 16、Turbopack、Cache Components、proxy の移行、App Router、React 19.2

❌ Pages Router、Next.js ≤15、一般的な React に関する質問

必要条件

ツール	バージョン
Node.js	20.9.0+
TypeScript	5.1.0+
React	19.2+

クイックスタート

# 新規プロジェクト
npx create-next-app@latest my-app

# 既存のプロジェクトをアップグレード
npx @next/codemod@canary upgrade latest
npm install next@latest react@latest react-dom@latest

推奨: TypeScript、ESLint、Tailwind、App Router、Turbopack、@/* エイリアス。

最小限のセットアップ

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js 16!</h1>
}

設定

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
  reactCompiler: true,
}

export default nextConfig

v15 → v16 の変更点

v15	v16
`experimental.turbopack`	デフォルト
`experimental.ppr`	`cacheComponents`
`middleware.ts` (Edge)	`proxy.ts` (Node)
Sync `params`	`await params`

コアパターン

1. Server Components (デフォルト)

export default async function BlogPage() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()
  return <PostList posts={posts} />
}

2. Cache Components

import { cacheLife } from 'next/cache'

export default async function BlogPage() {
  'use cache'
  cacheLife('hours')
  const posts = await fetch('https://api.example.com/posts').then(r => r.json())
  return <PostList posts={posts} />
}

3. Client Components

'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

4. Proxy Boundary

// app/proxy.ts
export function proxy(request: NextRequest) {
  if (!request.cookies.get('auth') && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  return NextResponse.next()
}

5. Cache Tags + Server Actions

// app/blog/page.tsx
'use cache'
cacheLife('hours')
cacheTag('blog-posts')

export default async function BlogList() {
  const posts = await db.posts.findMany()
  return <PostList posts={posts} />
}

// app/actions.ts
'use server'
import { updateTag } from 'next/cache'

export async function createPost(data: PostData) {
  await db.posts.create(data)
  updateTag('blog-posts')
}

6. Streaming with Suspense

export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<Skeleton />}>
        <RevenueCard />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <UsersCard />
      </Suspense>
    </div>
  )
}

async function RevenueCard() {
  const data = await db.analytics.revenue()
  return <div>{data}</div>
}

主要な概念

Turbopack - Rust 製のバンドラー、インクリメンタルコンパイル、Fast Refresh
Server Components - app/ ではデフォルト、クライアント JS はゼロ
Client Components - 'use client'、hooks、ブラウザ API
Cache Components - 'use cache' + cacheLife() で PPR を実現
Proxy Boundary - 認証/リライト/リダイレクトのための proxy.ts
Partial Pre-Rendering - 静的なシェル + 動的なストリーミング

移行チェックリスト

Async Request APIs
```
npx @next/codemod@canary async-request-api
```
更新: const { slug } = await params
middleware.ts → proxy.ts
- ファイル名を変更し、proxy をエクスポート
- Node ランタイムのみ (Edge ではない)
設定の更新
- experimental.* フラグを削除
- cacheComponents、reactCompiler を有効化
- serverRuntimeConfig/publicRuntimeConfig を削除
Cache Components
- experimental.ppr を cacheComponents: true に置き換え
- 動的なセクションを <Suspense> でラップ
Images
- クエリ文字列のために images.localPatterns を設定

完全なガイドについては references/nextjs16-migration-playbook.md を参照してください。

よくある落とし穴

❌ 'use cache' とランタイム API (cookies()、headers()) の混在 ❌ Cache Components が有効な場合に <Suspense> が欠落 ❌ Turbopack 下でのチルダ Sass インポート ❌ Edge ランタイムでの proxy.ts の実行

✅ 最初に cookies/headers を読み込み、キャッシュされたコンポーネントに props として渡す ✅ 動的な子要素を <Suspense> でラップ ✅ 標準的な Sass インポートを使用 ✅ proxy には Node ランタイムを使用

意思決定ガイド

Cache Components を有効にするか？ → 静的/準静的なコンテンツの場合は Yes → 完全に動的なダッシュボードの場合は No

認証はどこに配置するか？ → ルートを跨いだチェックには proxy.ts → API 固有のロジックにはルートハンドラー

'use client' をいつ使うか？ → hooks、state、またはブラウザ API が必要な場合にのみ → プレゼンテーションコンポーネントはサーバーサイドに保持

本番環境パターン

Eコマース

// ストリーミングによる製品ページ
export default async function Product({ params }) {
  const { id } = await params
  const product = await db.products.findById(id)

  return (
    <>
      <ProductInfo product={product} />
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={id} />
      </Suspense>
    </>
  )
}

認証されたダッシュボード

// proxy.ts
export function proxy(request: NextRequest) {
  const session = request.cookies.get('session')
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

より多くの設計図については references/nextjs16-advanced-patterns.md を参照してください。

パフォーマンス

Turbopack を有効にしたままにする (必要な場合にのみ --webpack でオプトアウト)
並列化

(原文はここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Next.js 16 Launchpad

Next.js 16: Turbopack default (2-5× faster builds), Cache Components ('use cache'), and proxy.ts for explicit control.

When to Use

✅ Next.js 16, Turbopack, Cache Components, proxy migration, App Router, React 19.2

❌ Pages Router, Next.js ≤15, generic React questions

Requirements

Tool	Version
Node.js	20.9.0+
TypeScript	5.1.0+
React	19.2+

Quick Start

# New project
npx create-next-app@latest my-app

# Upgrade existing
npx @next/codemod@canary upgrade latest
npm install next@latest react@latest react-dom@latest

Recommended: TypeScript, ESLint, Tailwind, App Router, Turbopack, @/* alias.

Minimal Setup

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js 16!</h1>
}

Configuration

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
  reactCompiler: true,
}

export default nextConfig

v15 → v16 Changes

v15	v16
`experimental.turbopack`	Default
`experimental.ppr`	`cacheComponents`
`middleware.ts` (Edge)	`proxy.ts` (Node)
Sync `params`	`await params`

Core Patterns

1. Server Components (Default)

export default async function BlogPage() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()
  return <PostList posts={posts} />
}

2. Cache Components

import { cacheLife } from 'next/cache'

export default async function BlogPage() {
  'use cache'
  cacheLife('hours')
  const posts = await fetch('https://api.example.com/posts').then(r => r.json())
  return <PostList posts={posts} />
}

3. Client Components

'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

4. Proxy Boundary

// app/proxy.ts
export function proxy(request: NextRequest) {
  if (!request.cookies.get('auth') && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  return NextResponse.next()
}

5. Cache Tags + Server Actions

// app/blog/page.tsx
'use cache'
cacheLife('hours')
cacheTag('blog-posts')

export default async function BlogList() {
  const posts = await db.posts.findMany()
  return <PostList posts={posts} />
}

// app/actions.ts
'use server'
import { updateTag } from 'next/cache'

export async function createPost(data: PostData) {
  await db.posts.create(data)
  updateTag('blog-posts')
}

6. Streaming with Suspense

export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<Skeleton />}>
        <RevenueCard />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <UsersCard />
      </Suspense>
    </div>
  )
}

async function RevenueCard() {
  const data = await db.analytics.revenue()
  return <div>{data}</div>
}

Key Concepts

Turbopack - Rust bundler, incremental compilation, Fast Refresh
Server Components - Default in app/, zero client JS
Client Components - 'use client', hooks, browser APIs
Cache Components - 'use cache' + cacheLife() for PPR
Proxy Boundary - proxy.ts for auth/rewrites/redirects
Partial Pre-Rendering - Static shell + dynamic streaming

Migration Checklist

Async Request APIs
```
npx @next/codemod@canary async-request-api
```
Update: const { slug } = await params
middleware.ts → proxy.ts
- Rename file, export proxy
- Node runtime only (not Edge)
Config updates
- Remove experimental.* flags
- Enable cacheComponents, reactCompiler
- Remove serverRuntimeConfig/publicRuntimeConfig
Cache Components
- Replace experimental.ppr with cacheComponents: true
- Wrap dynamic sections with <Suspense>
Images
- Configure images.localPatterns for query strings

See references/nextjs16-migration-playbook.md for complete guide.

Common Pitfalls

❌ Mixing 'use cache' with runtime APIs (cookies(), headers()) ❌ Missing <Suspense> when Cache Components enabled ❌ Tilde Sass imports under Turbopack ❌ Running proxy.ts on Edge runtime

✅ Read cookies/headers first, pass as props to cached components ✅ Wrap dynamic children in <Suspense> ✅ Use standard Sass imports ✅ Use Node runtime for proxy

Decision Guide

Enable Cache Components? → Yes for static/semi-static content → No for fully dynamic dashboards

Where does auth live? → proxy.ts for cross-route checks → Route handlers for API-specific logic

When to use 'use client'? → Only when you need hooks, state, or browser APIs → Keep presentational components server-side

Production Patterns

E-commerce

// Product page with streaming
export default async function Product({ params }) {
  const { id } = await params
  const product = await db.products.findById(id)

  return (
    <>
      <ProductInfo product={product} />
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={id} />
      </Suspense>
    </>
  )
}

Authenticated Dashboard

// proxy.ts
export function proxy(request: NextRequest) {
  const session = request.cookies.get('session')
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

See references/nextjs16-advanced-patterns.md for more blueprints.

Performance

Keep Turbopack enabled (opt-out with --webpack only if needed)
Parallelize fetches with Promise.all
Use <Suspense> for streaming boundaries
Enable file system cache for large repos

Security

Use server-only package + React Taint API
Keep auth in proxy.ts
Validate inputs in Server Actions
Gate env vars with NEXT_PUBLIC_ prefix
Extract cookies/headers before cached scopes

Deployment

Vercel: Zero-config
Docker/Node: output: 'standalone'
Monitor build times (2-5× speedup expected)
Configure cache lifecycles to match CDN

Reference Files

references/nextjs16-reference.md - Install/config/checklists
references/nextjs16-migration-playbook.md - Migration guide with codemods
references/nextjs16-advanced-patterns.md - Streaming, caching, auth patterns
references/NEXTJS_16_COMPLETE_GUIDE.md - Complete documentation
scripts/bootstrap-nextjs16.ps1 - Automated setup script
assets/app-router-starter/ - Reference implementation

Resources

Docs: https://nextjs.org/docs
GitHub: https://github.com/vercel/next.js

Version: 1.1.0 | Updated: 2025-12-27

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。

📄 SKILL.md (7,413 bytes)
📎 assets/app-router-starter/app/dashboard/error.tsx (422 bytes)
📎 assets/app-router-starter/app/dashboard/loading.tsx (306 bytes)
📎 assets/app-router-starter/app/dashboard/page.tsx (977 bytes)
📎 assets/app-router-starter/app/layout.tsx (810 bytes)
📎 assets/app-router-starter/app/page.tsx (1,396 bytes)
📎 assets/app-router-starter/app/proxy.ts (426 bytes)
📎 assets/app-router-starter/next.config.ts (268 bytes)
📎 assets/app-router-starter/README.md (530 bytes)
📎 references/core-workflows.md (12,337 bytes)
📎 references/NEXTJS_16_COMPLETE_GUIDE.md (42,949 bytes)
📎 references/nextjs16-advanced-patterns.md (5,202 bytes)
📎 references/nextjs16-migration-playbook.md (4,228 bytes)
📎 references/nextjs16-reference.md (8,861 bytes)
📎 scripts/bootstrap-nextjs16.ps1 (1,766 bytes)