😰

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

公開日約1年前2025-10-11
MarkdownRaw Content

GitHub Issues

issue: bad setState() call inside `Controller` error when early returning and accessing `formState.isValid` · react-hook-form · Discussion #11760 Extension cannot find git repo when VS Code didn't open the git root directory · Issue #7964 · microsoft/vscode-pull-request-github

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

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

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

DevContainer環境のClaudeCodeでSerenaMCPを使えるようにする

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

devcontainer.json
{
  // ...
  "postCreateCommand": "zsh .devcontainer/post-create-command.sh"
  // ...
}
curl -LsSf https://astral.sh/uv/install.sh | sh && echo 'export PATH=\"$HOME/.cargo/bin:$PATH\"' >> ~/.bashrc

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

Vitest + MSW による TypeScript での API 呼び出しのユニットテスト - Qiita
  • これも試す

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

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

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

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

How to set up instrumentation with OpenTelemetry Next.js で OpenTelemetry を使用した計装を行う OpenTelemetryに触れてみた Next.js で OpenTelemetry を使用した計装を行う GitHub - vercel/opentelemetry-collector-dev-setup