![](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f3f90c8dd210a7d0314d8fe0844808b82918cbb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9TmV4dC5qcyUyMDE0JUUzJTgxJUE3JUU1JUE0JTk2JUU5JTgzJUE4QVBJJUUzJTgxJThCJUUzJTgyJTg5JUUzJTgzJTg3JUUzJTgzJUJDJUUzJTgyJUJGJUUzJTgyJTkyJUU1JThGJTk2JUU1JUJFJTk3JUUzJTgxJTk5JUUzJTgyJThCJTIwJTI4Um91dGUlMjBIYW5kbGVycyVFNCVCRCVCRiVFNyU5NCVBOCUyOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MDI1MDcyMDUwOWMyMDAzYjFhZWQ5MTZiNzFlZjViY2Y%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhc2Fnb2hhbjIzMDEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU5ZTdkZmE5MmU0ZjgzOGU3MDRkNjMzOWI1OTZhMDNm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd7bd92f2b2dfc7ace1e79a3b9fa1a097)
エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Next.js 14で外部APIからデータを取得する (Route Handlers使用) - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Next.js 14で外部APIからデータを取得する (Route Handlers使用) - Qiita
目次 1. はじめに 2. Route Handlers とは 3. まずは Client Components だけで作ってみる 4. Route Han... 目次 1. はじめに 2. Route Handlers とは 3. まずは Client Components だけで作ってみる 4. Route Handlers を使って修正していく 5. 参考 1. はじめに Next.js の学習のため、外部 API からデータを取得して表示する機能を作りました。コンポーネントの役割分けや Route Handlers など、色々と調べながら実装したのでまとめておきたいと思います。 作りたいもの 作りたいものは、シンプルなお天気アプリです。ユーザーが都市名を入力すると、その都市の天気情報を外部 API から取得して表示します。以下のようなイメージです。 使用する外部 API Weather API から、現在の天気を取得する Current weather data を使います。 使用するには OpenWeather のアカウントと API Ke