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

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

- Unbound breakpointになった時は `tsconfig.ts` の `souceMap` を `true` にしてみる
  - `false` でもいけそう
- `"dev:debug": "NODE_OPTIONS='--inspect=0.0.0.0:9229' next dev",`
  - dockerの場合は上記のように設定する

::link-card[https://zenn.dev/miroscular/articles/3d2ac64cb878b8]

::link-card[https://github.com/vercel/next.js/discussions/78434]

### Docker & Dev Container の launch.json

- `address` をコンテナに向けないといけない。localhostでは繋がらない
- `remoteRoot` を正しく設定する
- `port` は 9230。Next.jsの場合は9229ではない

```json:launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Next.js Server",
      "address": "app", // [!code highlight]
      "port": 9230, // [!code highlight]
      "sourceMaps": true,
      "skipFiles": ["<node_internals>/**"],
      "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**", "!**/.next/**"],
      "autoAttachChildProcesses": false, // [!code highlight]
      "restart": true,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/path/to/remote" // [!code highlight]
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Next.js Client",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
```

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

```ts: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}` としているとキャッシュが更新されない（更新が頻度が落ちる？）。

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

こうすればいいわけでもない。。Next.jsのキャッシュむずい。