Communitygithub.com

Next.js と Turbopack

Next.js 16+ と Turbopack — インクリメンタルバンドリング、ファイルシステムキャッシュ、開発速度、Turbopack と webpack の使い分け。

Next.js と Turbopack とは?

このスキルは、Next.js 16 以降でデフォルトとなった Turbopack(Rust 製のインクリメンタルバンドラ)に焦点を当て、その利点や webpack との使い分けを解説します。開発時のコールドスタートや HMR の高速化、ファイルシステムキャッシュによる再起動の高速化(大規模プロジェクトで 5~14 倍)を実現する仕組みを理解できます。また、Next.js 16.1 以降で利用可能な実験的な Bundle Analyzer についても触れ、本番バンドルの最適化に役立てます。主に Claude Code、Cursor、Codex などの AI エージェント上で Next.js アプリケーションの開発・デバッグを行う際に、Turbopack を有効活用するための知識を提供します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/JantonioFC/skillsbank/tree/HEAD/skills/ck

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Next.js と Turbopack は何をしますか?

Next.js 16+ では、ローカル開発にデフォルトで Turbopack が使用されます。これは Rust で書かれたインクリメンタルバンドラで、開発の起動とホットアップデートを大幅に高速化します。

いつ使うか

  • Turbopack(デフォルト開発):日常的な開発に使用します。特に大規模アプリでは、コールドスタートと HMR が高速です。
  • Webpack(従来の開発):Turbopack のバグに遭遇した場合や、開発中に webpack のみのプラグインに依存する場合にのみ使用します。--webpack(または --no-turbopack。Next.js のバージョンによって異なります。リリースのドキュメントを確認してください)で無効にします。
  • プロダクション:プロダクションビルドの動作(next build)は、Next.js のバージョンによって Turbopack または webpack が使用されます。ご利用のバージョンの公式 Next.js ドキュメントを確認してください。

使用する状況:Next.js 16+ アプリの開発やデバッグ、開発起動や HMR の遅さの診断、プロダクションバンドルの最適化。

仕組み

  • Turbopack:Next.js 開発用のインクリメンタルバンドラです。ファイルシステムキャッシュを利用するため、再起動が大幅に高速化されます(大規模プロジェクトでは 5~14 倍など)。
  • デフォルト開発:Next.js 16 以降、next dev は無効にしない限り Turbopack で実行されます。
  • ファイルシステムキャッシュ:再起動時に以前の作業を再利用します。キャッシュは通常 .next 以下に保存され、基本的な使用には追加設定は不要です。
  • Bundle Analyzer(Next.js 16.1+):実験的な Bundle Analyzer を使用して出力を検査し、重い依存関係を見つけます。設定または実験的フラグで有効にします(詳細はご利用のバージョンの Next.js ドキュメントを参照)。

例

コマンド

next dev
next build
next start

使用方法

ローカル開発では next dev を実行して Turbopack を使用します。Bundle Analyzer(Next.js ドキュメント参照)を使用してコード分割を最適化し、大きな依存関係を削減します。可能な限り App Router とサーバーコンポーネントを優先してください。

ベストプラクティス

  • 安定した Turbopack とキャッシュ動作のために、最新の Next.js 16.x を使用してください。
  • 開発が遅い場合は、Turbopack(デフォルト)を使用していること、キャッシュが不必要にクリアされていないことを確認してください。
  • プロダクションバンドルサイズの問題には、ご利用のバージョンに応じた公式の Next.js バンドル分析ツールを使用してください。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

JantonioFC/skillsbank

AI-powered image editing with style transfer and object removal

JantonioFC/skillsbank

Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.

JantonioFC/skillsbank

Analise e auditoria de editais de leilao judicial e extrajudicial. Riscos ocultos, clausulas perigosas, debitos, ocupante e classificacao da oportunidade.

JantonioFC/skillsbank

Embed Photopea in web apps using photopea.js. Covers embedding, file I/O, scripting, exporting, layers, text, filters, and the full Photoshop-compatible API.

JantonioFC/skillsbank

Best practices for Remotion - Video creation in React

JantonioFC/skillsbank

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

JantonioFC/skillsbank

Seek and analyze video content using Memories.ai Large Visual Memory Model for persistent video intelligence

JantonioFC/skillsbank

Writes complete, structured landing pages optimized for SEO ranking, AEO citation, and visitor conversion. Activate when the user wants to write or generate a landing page for a product, service, or offer.

JantonioFC/skillsbank

Video and audio perception, indexing, and editing. Ingest files/URLs/live streams, build visual/spoken indexes, search with timestamps, edit timelines, add overlays/subtitles, generate media, and create real-time alerts.

JantonioFC/skillsbank

Upload, stream, search, edit, transcribe, and generate AI video and audio using the VideoDB SDK.

JantonioFC/skillsbank

Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory.

JantonioFC/skillsbank

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities.

JantonioFC/skillsbank

Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending

JantonioFC/skillsbank

Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.

JantonioFC/skillsbank

When the user wants help with paid advertising campaigns on Google Ads, Meta (Facebook/Instagram), LinkedIn, Twitter/X, or other ad platforms. Also use when the user mentions 'PPC,' 'paid media,' 'ROAS,' 'CPA,' 'ad campaign,' 'retargeting,' 'audience targeting,' 'Google Ads,' 'Facebook ads,'...

JantonioFC/skillsbank

Create AI avatar and talking head videos with OmniHuman, Fabric, PixVerse via inference.sh CLI. Models: OmniHuman 1.5, OmniHuman 1.0, Fabric 1.0, PixVerse Lipsync. Capabilities: audio-driven avatars, lipsync videos, talking head generation, virtual presenters. Use for: AI presenters, expla...

JantonioFC/skillsbank

Create AI marketing videos for ads, promos, product launches, and brand content. Models: Veo, Seedance, Wan, FLUX for visuals, Kokoro for voiceover. Types: product demos, testimonials, explainers, social ads, brand videos. Use for: Facebook ads, YouTube ads, product launches, brand awarene...

JantonioFC/skillsbank

Generate AI videos with Google Veo, Seedance, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 1.5 Pro, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, lipsync, avatar animation, video upscaling, fole...

JantonioFC/skillsbank

Production-ready CI/CD configurations for Playwright — GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, parallel sharding, reporting, code coverage, and global setup/teardown.

JantonioFC/skillsbank

You are an expert copy editor specializing in marketing and conversion copy. Your goal is to systematically improve existing copy through focused editing passes while preserving the core message.

関連スキル