# 開発日記-2025-10-11 / DevContainerでuvxを使えるようにする

## GitHub Issues

::link-card[https://github.com/orgs/react-hook-form/discussions/11760]

::link-card[https://github.com/microsoft/vscode-pull-request-github/issues/7964]

## Next.jsでパンくずリストを作る

::link-card[https://www.openstatus.dev/blog/dynamic-breadcrumb-nextjs]

- `@breadcrumb` ディレクトリを作成する。`{breadcrumb}` を書く `layout.tsx` と同じ階層に作成する必要がある。
- HeroUIのBreadcrumbsはクライアントコンポーネントなので、サーバーコンポーネントでは動かない。

## DevContainerでuvxを使えるようにする

::link-card[https://zenn.dev/retore/articles/d2569163757d74]

postCreateCommandでuvxを使えるようにしたらSerenaMCPを使える。

```json:devcontainer.json
{
  // ...
  "postCreateCommand": "zsh .devcontainer/post-create-command.sh"
  // ...
}
```

```bash
curl -LsSf https://astral.sh/uv/install.sh | sh && echo 'export PATH=\"$HOME/.cargo/bin:$PATH\"' >> ~/.bashrc
```

## Vitest + MSW による TypeScript での API 呼び出しのユニットテスト

::link-card[https://qiita.com/seratch/items/4b649b7bd7d588f4e96e]

- これも試す

## サーバーコンポーネントの fetch() のデバッグをしたい

簡単な `fetch()` のログを見たいなら以下:

```ts:next.config.ts
const nextConfig: NextConfig = {
  // ...
  logging: {
    fetches: {
      fullUrl: true,
      hmrRefreshes: true,
    },
  },
  // ...
}
```

OpenTelemetryというもので色々計測できるらしい。

::link-card[https://nextjs.org/docs/app/guides/open-telemetry]

::link-card[https://azukiazusa.dev/blog/instrumentation-with-opentelemetry-in-nextjs/]

::link-card[https://zenn.dev/yuta28/articles/what-is-opentelemetry]

::link-card[https://azukiazusa.dev/blog/instrumentation-with-opentelemetry-in-nextjs/]

::link-card[https://github.com/vercel/opentelemetry-collector-dev-setup]

- Jaeger at http://localhost:16686
- Zipkin at http://localhost:9411
- Prometheus at http://localhost:9090