Handism's Tech Blog

2026/04/14

ブログに Scrap（技術メモ）機能を追加しました。

Zenn のスクラップのように、日々の気づきやエラー解決ログを短く残すための場所です。

使い方

scraps/ ディレクトリに Markdown ファイルを置くだけです。

---
title: メモのタイトル
date: YYYY-MM-DD
tags: [tag1, tag2]
---

本文は Markdown で自由に書けます。コードブロックにも対応しています。

#Next.js #ブログ

2026/04/12

App Router の fetch はデフォルトで積極的にキャッシュされる。開発中に API レスポンスが古いまま返ってきて原因究明に時間がかかった。

解決策

キャッシュを無効にしたい場合は cache: 'no-store' を渡す。

const res = await fetch('/api/data', { cache: 'no-store' });

再検証間隔を指定したい場合は next.revalidate を使う。

const res = await fetch('/api/data', { next: { revalidate: 60 } }); // 60秒ごと

落とし穴

generateStaticParams 内の fetch は SSG 時に 1 度だけ実行される。動的データを使いたい場合は Route Handler 経由にする必要がある。

React の cache() と Next.js の fetch キャッシュは別物なので混同しないように注意。

#Next.js #デバッグ

2026/04/10

satisfies 演算子を使うと、型チェックをしつつ型を広げずに推論させられる。

const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
} satisfies Record<string, string | number[]>;

// NG: as や明示的な型注釈だと string | number[] になる
palette.green.toUpperCase(); // OK — string として推論される
palette.red.at(0);           // OK — number[] として推論される

as const との組み合わせも強力。オブジェクトのキーが特定の型に合致することを保証しながら、値の型は可能な限り絞り込める。

ライブラリの設定オブジェクト定義や、定数マップを書くときに重宝している。

#TypeScript