runtime-debug

โดย vercel

ใช้ทักษะนี้เมื่อต้องการจำลองปัญหาการรวม runtime-bundle, module-resolution หรือ user-bundle ที่เกิดขึ้นซ้ำ

npx skills add https://github.com/vercel/next.js --skill runtime-debug

Runtime Debug

Use this skill when reproducing runtime-bundle, module-resolution, or user-bundle inclusion regressions.

Local Repro Discipline

  • Mirror CI env vars when reproducing CI failures.
  • Key variables: IS_WEBPACK_TEST=1 forces webpack (turbopack is default), NEXT_SKIP_ISOLATE=1 skips packing next.js.
  • For module-resolution validation, always rerun without NEXT_SKIP_ISOLATE=1.

Stack Trace Visibility

Set __NEXT_SHOW_IGNORE_LISTED=true to disable the ignore-list filtering in dev server error output. By default, Next.js collapses internal frames to at ignore-listed frames, which hides useful context when debugging framework internals. Defined in packages/next/src/server/patch-error-inspect.ts.

User-Bundle Regression Guardrail

When user next build starts bundling internal Node-only helpers unexpectedly:

  1. Inspect route trace artifacts (.next/server/.../page.js.nft.json).
  2. Inspect traced server chunks for forbidden internals (e.g. next/dist/server/stream-utils/node-stream-helpers.js, node:stream/promises).
  3. Add a test-start-webpack assertion that reads the route trace and traced server chunks, and fails on forbidden internals. This validates user-project bundling (not publish-time runtime bundling).

Bundle Tracing / Inclusion Proof

To prove what user bundling includes, emit webpack stats from the app's next.config.js:

// next.config.js
module.exports = {
  webpack(config) {
    config.profile = true
    return config
  },
}

Then use stats.toJson({ modules: true, chunks: true, reasons: true }) and diff webpack-stats-server.json between modes. This gives concrete inclusion reasons (e.g. which module required node:stream/promises) and is more reliable than analyzer HTML alone.

Related Skills

  • $flags - flag wiring (config/schema/define-env/runtime env)
  • $dce-edge - DCE-safe require patterns and edge constraints
  • $react-vendoring - entry-base boundaries and vendored React

Skills เพิ่มเติมจาก vercel

vercel
vercel
Emulated Vercel REST API สำหรับการพัฒนาและทดสอบในเครื่อง ใช้เมื่อผู้ใช้ต้องการโต้ตอบกับปลายทาง API ของ Vercel ในเครื่อง ทดสอบการผสานรวมของ Vercel…
cron-jobs
vercel
การกำหนดค่าและแนวทางปฏิบัติที่ดีที่สุดสำหรับ Vercel Cron Jobs ใช้เมื่อเพิ่ม แก้ไข หรือดีบักงานที่กำหนดเวลาไว้ใน vercel.json
codegen
vercel
ยูทิลิตี้สำหรับการสร้างโค้ดสำหรับ json-render ใช้เมื่อสร้างโค้ดจากสเปก UI สร้างตัวส่งออกโค้ดแบบกำหนดเอง ตรวจสอบสเปก หรือจัดลำดับพร็อพสำหรับ...
next-best-practice
vercel
แนวทางปฏิบัติที่ดีที่สุดของ Next.js - ข้อตกลงไฟล์, ขอบเขต RSC, รูปแบบข้อมูล, API แบบอะซิงก์, เมทาดาตา, การจัดการข้อผิดพลาด, ตัวจัดการเส้นทาง, การปรับแต่งภาพ/ฟอนต์,…
benchmark-sandbox
vercel
เรียกใช้สถานการณ์ประเมินผลของ vercel-plugin ใน Vercel Sandboxes แทนแผง WezTerm ในเครื่อง จัดเตรียม microVM ชั่วคราวที่ติดตั้ง Claude Code และปลั๊กอินไว้ล่วงหน้า…
write-guide
vercel
ผลิตคู่มือทางเทคนิคที่สอนกรณีการใช้งานในโลกจริงผ่านตัวอย่างแบบค่อยเป็นค่อยไป แนวคิดจะถูกนำเสนอเมื่อผู้อ่านต้องการเท่านั้น
benchmark-testing
vercel
สร้างและเปิดตัวโครงการทดสอบเกณฑ์มาตรฐานเพื่อทดสอบการแทรกทักษะของ vercel-plugin ในสถานการณ์จริง ตั้งค่าไดเรกทอรีที่แยกออกจากกัน ติดตั้ง...
ai-gateway
vercel
คำแนะนำผู้เชี่ยวชาญ Vercel AI Gateway ใช้เมื่อกำหนดค่าเส้นทางโมเดล การสำรองผู้ให้บริการ การติดตามต้นทุน หรือการจัดการผู้ให้บริการ AI หลายรายผ่านระบบรวมศูนย์…