この記事の目的
- Next.jsでブログを作成したときの備忘録
- Next.jsで指定したID情報をAPI取得する
概要
Next.jsでブログの側だけ作成したので、ダミーデータをプロジェクト内に用意し、/api/posts/1や/api/posts/2のようにURLで指定されたIDのデータ取得をまとめました
- ①動的なAPIエンドポイント
- ②動的なAPIエンドポイントルーティング
- ③実際にIDに紐づくデータを取得する
Next.jsでダミーデータを単純にAPI取得する記事についてはこちらから
①動的なAPIエンドポイント
上記で少し記載していますが/api/posts/1や/api/posts/2のようにURLでIDが送られIDに紐づく情報を取得したい時があると思います。
このように/api/posts/IDのIDの部分によって指定のデータを取得する場合のことを言います。
この場合、APIルートを動的に構築していく必要があります。
簡単にはURLで指定したIDの情報を取得すること
②動的なAPIエンドポイントルーティング
基本的なルーティング
まず基本的なルーティングの例を下記に記載します
例1) pages/api/hello.tsx → http://localhost:3000/sample/hello
例2) pages/api/index.tsx → http://localhost:3000/sample
動的なルーティング
動的なルーティングにするためにはAPIファイル名に[]を含める必要があります
[]を使用すると、APIルートを動的に構築することができます。
例1) pages/api/[postId].tsx → http://localhost:3000/posts/1
例2) pages/api/[postId].tsx → http://localhost:3000/posts/2
③実際にIDに紐づくデータを取得する
APIファイル名に[]を含めて作成し、実際に指定したIDのデータを取得していきたいと思います
取得するデータと単純なAPI取得についてはNext.jsでダミーデータを単純にAPI取得する記事に記載しているので今回使用するデータを記載したファイルの内容については、こちらの記事にて確認してください。
ファイル作成
まずはapi/posts/配下に指定したIDでAPI取得する関数を記載するファイルを[]を含めて作成していきます。
pages/api/posts/[postId].tsx
API取得ロジック記載
次に作成したpages/api/posts/[postId].tsxファイルに取得ロジックを記載していきます
import { NextApiRequest, NextApiResponse } from 'next';
import data from '../data';
// APIのリクエストを受け取り、レスポンスを返す
export default function handler (req: NextApiRequest, res: NextApiResponse) {
// パラメーター"postId"が存在する場合、数値に変換する
const postId = req.query.postId && Number(req.query.postId);
// データを取得する
const { Posts } = data;
// "postId"が存在する場合、投稿データを取得して返す
if(postId) {
// "Posts"配列から、"id"が"postId"と等しい投稿を検索する
const post = Posts.find( value => value.id === postId)
// 投稿データをレスポンスとして返す
return res.status(200).json(post)
}
// "postId"が存在しない場合、エラーを返す
return res.status(404).json({ error : "Post Not Found"})
}
指定したIDのデータを取得する
http://localhost:3000/posts/1の場合
http://localhost:3000/posts/2の場合
IDに紐づくデータのみが取得できることが確認できました！！