Next.js 14 + Tailwind で天気予報アプリを作ったらハマりどころが山ほどあった件
背景・ゴール
コーディング試験課題（天気予報アプリ）を Next.js + Tailwind で実装してみました。
SSR、APIルート、キャッシュ、オフライン対応が要件。
実際に詰まった箇所をまとめることで、同じように苦戦している人の助けになればと思います。
開発環境
- Next.js 14（App Router）
- Tailwind CSS 4
- Node.js / npm
- OpenWeather API
実装の流れ
1. プロジェクト初期化
npx create-next-app@latest weather-app
cd weather-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
-
tsconfig.jsonにパスエイリアス設定を追加。
2. API ルート作成
app/api/forecast/route.ts を作成し、サーバー側で APIキーを付与。
クライアントは /api/forecast を呼ぶだけ。APIキーは絶対に直書きしない。
3. カスタムフック useForecast
- データ取得
- localStorage キャッシュ保存／読み込み
- エラーハンドリング
をまとめて、コンポーネント側では描画に集中。
4. 表示用コンポーネント
-
ForecastList: 状態分岐（ローディング、エラー、データあり） -
ForecastCard: 予報アイコン＋説明＋気温のカード表示 -
CityLink: 都市をクリックして/weather/[city]に遷移
詰まった箇所と対処法
npm error could not determine executable to run
Tailwind を正しく入れ直し、npx tailwindcss init -p を実行。
Module not found: Can't resolve '@/components/ForecastList'
tsconfig.json の paths を ./src/* に修正、VSCode / dev サーバ再起動で解決。
Do not use element to navigate
内部遷移は必ず next/link を使用。
params should be awaited
動的ルートで params が Promise になっているので await 必須。
Invalid src prop on next/image
next.config.js に remotePatterns を追加して外部画像ホストを許可。
Cannot find name 'ForecastCardProps'
型を共通化して types/ForecastType.ts に切り出し。
サーバーで useForecast 呼び出しエラー
"use client" を付け、クライアントコンポーネントに隔離。
学びとベストプラクティス
- APIキーはサーバーでのみ管理
- カスタムフックでロジックを集約
- 型は UI コンポーネントに依存させず共通化
- App Router の動的ルートは params を await する必要がある
- next/image で外部画像を使うときは next.config.js を忘れない
まとめ
エラーの嵐だったが一つずつ解決していくことで理解が深まった。
Qiita は「失敗＋解決策」を共有する場なので、こういう記事こそ価値があると思う。