Supabase 型定義ファイルの文字化け問題

現象

npx supabase gen types typescript コマンドで生成された supabase.ts ファイルが文字化けし、TypeScriptの型として正しく認識されなくなる。

原因

Supabase CLIが、Windows環境のPowerShellで実行された際に、デフォルトでUTF-16LEエンコーディングのファイルを生成してしまうことが原因です。VSCodeやTypeScriptコンパイラはUTF-8を標準としているため、エンコーディングの違いにより文字化けが発生します。

解決策

ファイルをUTF-8エンコーディングで出力するように、明示的に指定します。PowerShellを使用している場合は、Out-File コマンドレットと -Encoding utf8 オプションを組み合わせます。

npx supabase gen types typescript --linked | Out-File -FilePath "next-app\src\lib\types\supabase.ts" -Encoding utf8

コマンド解説

• npx supabase gen types typescript --linked: Supabaseの型定義を標準出力に書き出します。
• |: パイプライン。左のコマンドの出力を右のコマンドの入力に渡します。
• Out-File -FilePath "next-app\src\lib\types\supabase.ts" -Encoding utf8: 受け取った内容を指定したファイルパスに、UTF-8エンコーディングで書き込みます。

このコマンドを package.json のスクリプトとして登録しておくと、将来的に同様の問題を防ぐことができます。