Next.js 14 + Tailwind で天気予報アプリを作ったらハマりどころが山ほどあった件

背景・ゴール

コーディング試験課題（天気予報アプリ）を Next.js + Tailwind で実装してみました。
SSR、APIルート、キャッシュ、オフライン対応が要件。
実際に詰まった箇所をまとめることで、同じように苦戦している人の助けになればと思います。

npx create-next-app@latest weather-app
cd weather-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

app/api/forecast/route.ts を作成し、サーバー側で APIキーを付与。
クライアントは /api/forecast を呼ぶだけ。APIキーは絶対に直書きしない。

をまとめて、コンポーネント側では描画に集中。

Tailwind を正しく入れ直し、npx tailwindcss init -p を実行。

tsconfig.json の paths を ./src/* に修正、VSCode / dev サーバ再起動で解決。

内部遷移は必ず next/link を使用。

動的ルートで params が Promise になっているので await 必須。

next.config.js に remotePatterns を追加して外部画像ホストを許可。

型を共通化して types/ForecastType.ts に切り出し。

"use client" を付け、クライアントコンポーネントに隔離。

エラーの嵐だったが一つずつ解決していくことで理解が深まった。
Qiita は「失敗＋解決策」を共有する場なので、こういう記事こそ価値があると思う。