affaan-m/ECC

nextjs-turbopack

Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.

83Collecting
See how to use itView GitHub source
npx skills add https://github.com/affaan-m/ECC --skill "skills/nextjs-turbopack"
Automated source guide

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Reorganized from the pinned upstream SKILL.md

Turn nextjs-turbopack's source instructions into a guide you can follow

According to the pinned SKILL.md from affaan-m/ECC: Next.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.

npx skills add https://github.com/affaan-m/ECC --skill "skills/nextjs-turbopack"
Check the pinned source

Best fit

  • Turbopack (default dev): Use for day-to-day development. Faster cold start and HMR, especially in large apps.
  • Webpack (legacy dev): Use only if you hit a Turbopack bug or rely on a webpack-only plugin in dev. Disable with --webpack (or --no-turbopack depending on your Next.js version; check the docs for your release).
  • Production: Production build behavior (next build) may use Turbopack or webpack depending on Next.js version; check the official Next.js docs for your version.

Bring this context

  • A concrete task that matches the documented purpose of nextjs-turbopack.
  • The files, examples, or context the task depends on.
  • Your constraints, target environment, and definition of done.

Expected outputs

  • Run next dev for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.

Key source sections

Read nextjs-turbopack through these 5 source sections

Sections are extracted automatically from the pinned SKILL.md and link back to the source.

01

Usage

Run next dev for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.

SKILL.md · Usage
Run next dev for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.
02

When to Use

Use when: developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or optimizing production bundles.

SKILL.md · When to Use
Turbopack (default dev): Use for day-to-day development. Faster cold start and HMR, especially in large apps.Webpack (legacy dev): Use only if you hit a Turbopack bug or rely on a webpack-only plugin in dev. Disable with --webpack (or --no-turbopack depending on your Next.js version; check the docs for your release).Production: Production build behavior (next build) may use Turbopack or webpack depending on Next.js version; check the official Next.js docs for your version.
03

How It Works

Turbopack: Incremental bundler for Next.js dev. Uses file-system caching so restarts are much faster (e.g. 5–14x on large projects).

SKILL.md · How It Works
Turbopack: Incremental bundler for Next.js dev. Uses file-system caching so restarts are much faster (e.g. 5–14x on large projects).Default in dev: From Next.js 16, next dev runs with Turbopack unless disabled.File-system caching: Restarts reuse previous work; cache is typically under .next; no extra config needed for basic use.
04

Examples

Run next dev for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.

SKILL.md · Examples
Run next dev for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.
05

Commands

Review the “Commands” section in the pinned source before continuing.

SKILL.md · Commands
Review and apply the “Commands” source section.

SkillSignal prompt templates

Provide the task, context, and acceptance criteria

These prompts were written by SkillSignal from the source structure; they are not upstream text.

Task-start prompt

Confirm source fit, inputs, and outputs before acting.

Use nextjs-turbopack to help me with: [specific task]. Context: [files, data, or background]. Constraints: [environment, scope, and prohibited actions]. Before acting, check the pinned SKILL.md and explain which sections apply, what inputs are still missing, and what you will deliver.

Source-guided execution

Make the Agent explicitly follow the key extracted sections.

Apply the pinned nextjs-turbopack source to [task]. Pay particular attention to these source sections: “Usage”, “When to Use”, “How It Works”, “Examples”, “Commands”. Preserve the important decision at each step. Mark facts not covered by the source as “needs confirmation” instead of inventing them. Then verify the result against my acceptance criteria: [criteria].

Result-review prompt

Check omissions, permissions, and source drift before delivery.

Review the current nextjs-turbopack result: (1) does it satisfy the original task; (2) were any applicable steps or limits in the pinned SKILL.md missed; (3) did it perform any unauthorized file, command, network, or data action; and (4) which conclusions remain unverified? List issues first, then fix only what the source or user authorization supports.

Output checklist

Verify each item before delivery

The task matches the purpose documented in the SKILL.md.

The source section “Usage” has been checked.

The source section “When to Use” has been checked.

The source section “How It Works” has been checked.

The source section “Examples” has been checked.

Inputs, constraints, and acceptance criteria are explicit.

Unverified facts, compatibility, and outcome claims are clearly marked.

Any file, command, network, or data action has been reviewed.

Choose a different workflow

When another Skill is the better fit

FAQ

What does nextjs-turbopack do?

Next.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.

How do I start using nextjs-turbopack?

The catalog detected this source-specific install command: npx skills add https://github.com/affaan-m/ECC --skill "skills/nextjs-turbopack". Inspect the command and pinned source before running it.

Which Agent platforms does it declare?

No dedicated Agent platform is declared in the pinned source record.

Repository stars
234,327
Repository forks
35,711
Quality
83/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

83/100
Documentation23/30
Specificity15/25
Maintenance20/20
Trust signals25/25
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min

Next.js and Turbopack

Next.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.

When to Use

  • Turbopack (default dev): Use for day-to-day development. Faster cold start and HMR, especially in large apps.
  • Webpack (legacy dev): Use only if you hit a Turbopack bug or rely on a webpack-only plugin in dev. Disable with --webpack (or --no-turbopack depending on your Next.js version; check the docs for your release).
  • Production: Production build behavior (next build) may use Turbopack or webpack depending on Next.js version; check the official Next.js docs for your version.

Use when: developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or optimizing production bundles.

How It Works

  • Turbopack: Incremental bundler for Next.js dev. Uses file-system caching so restarts are much faster (e.g. 5–14x on large projects).
  • Default in dev: From Next.js 16, next dev runs with Turbopack unless disabled.
  • File-system caching: Restarts reuse previous work; cache is typically under .next; no extra config needed for basic use.
  • Bundle Analyzer (Next.js 16.1+): Experimental Bundle Analyzer to inspect output and find heavy dependencies; enable via config or experimental flag (see Next.js docs for your version).

Examples

Commands

next dev
next build
next start

Usage

Run next dev for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.

Middleware File Naming

Next.js 16 introduced proxy.ts as the middleware filename, replacing the older middleware.ts convention:

  • Next.js 16+: use proxy.ts at the project root
  • Pre-Next.js 16: use middleware.ts at the project root

The filename change is tied to the Next.js version, not to which bundler (Turbopack or webpack) is in use. Always check the official docs for the version you are reviewing.

Do not flag proxy.ts as a misnamed or missing middleware file in Next.js 16 projects. The file is correct and intentional. Suggesting a rename to middleware.ts will break middleware execution.

Reference: Next.js proxy docs

Best Practices

  • Stay on a recent Next.js 16.x for stable Turbopack and caching behavior.
  • If dev is slow, ensure you're on Turbopack (default) and that the cache isn't being cleared unnecessarily.
  • For production bundle size issues, use the official Next.js bundle analysis tooling for your version.
Source repo
affaan-m/ECC
Skill path
skills/nextjs-turbopack/SKILL.md
Commit SHA
4e973d3eaf92
Repository license
MIT
Data collected