naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

😙

開発日記 / Next.js サーバーサイドのデバッグの覚書

公開日
約11時間前
2025-10-13
更新日
19分前
2025-10-14
更新履歴
GitHubで見る

Next.js サーバーサイドのデバッグの覚書

  • Unbound breakpointになった時は tsconfig.ts の souceMap を true にしてみる
    • false でもいけそう
  • "dev:debug": "NODE_OPTIONS='--inspect=0.0.0.0:9229' next dev",
    • dockerの場合は上記のように設定する
Dockerで動いている Next.js (App router)を vscode でデバッグする
zenn.dev favicon
zenn.dev
Dockerで動いている Next.js (App router)を vscode でデバッグする
How to reliably debug a Next.js app inside Docker using VSCode (breakpoints will finally hit) · vercel/next.js · Discussion #78434
Debugging Next.js in Docker with VSCode This guide explains how to reliably debug a Next.js app running inside a Docker container using Visual Studio Code. This was written through the experience o...
github.com favicon
github.com

Docker & Dev Container の launch.json

  • address をコンテナに向けないといけない。localhostでは繋がらない
  • remoteRoot を正しく設定する
  • port は 9230。Next.jsの場合は9229ではない
launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Next.js Server",
      "address": "app", 
      "port": 9230, 
      "sourceMaps": true,
      "skipFiles": ["<node_internals>/**"],
      "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**", "!**/.next/**"],
      "autoAttachChildProcesses": false, 
      "restart": true,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/path/to/remote"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Next.js Client",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Next.jsのキャッシュについて

page.tsx
export const dynamicParams = true // これは不要かも
export const revalidate = 60
export const dynamic = 'force-static'

export default async function HomePage() {
  // ...
}

このように設定すると、キャッシュされるようになるが、next/linkのLinkコンポーネントで prefetch={false} としているとキャッシュが更新されない(更新が頻度が落ちる?)。

{
  cache: 'default',
  next: { revalidate: 60 },
};

こうしないといけなかった??

目次

最近更新された記事

🚆
VS Codeでよく使うショートカット
12分前 - 2025年10月14日
  • VS Code
🍕
Next.js + Vitest の環境構築手順
約3時間前 - 2025年10月13日
  • Vitest
  • Next.js
😊
将棋ウォーズの記録 2025年
約3時間前 - 2025年10月13日
  • 将棋