next.jsからapiを呼び出す一番簡単な方法
2024-06-29
Posted by
今回はNext.jsから外部Apiを呼び出す一番簡単な方法を解説します
とりあえず急いでる人向けにTL;DR
TL;DR
info
エラーが出た場合、下にある解説を読むことをお勧めします
"use server"
export default async function Page() {
const value = await fetch("https://api-booru.i32.jp/post").then(res=> res.json())
return <pre>
{JSON.stringify(value, undefined, 4)}
</pre>
}"use client"
import { useEffect, useState } from "react";
export default function Page() {
const [value, setValue] = useState<any>()
useEffect(()=> {
fetch("https://api-booru.i32.jp/post")
.then(async (res)=> {
setValue(await res.json())
})
}, [])
return <pre>
{JSON.stringify(value, undefined, 4)}
</pre>
}info
next.jsのversionは13以降を想定してます
2024年にバージョンの指定なしでプロジェクト作成した場合は問題ありません
App routerの場合
const value = await fetch("https://api-booru.i32.jp/post").then(res=> res.json())App routerの場合はシンプルに一行で書けます、この場合は普通にNodejsから呼び出すのと変わりません
Apiを呼び出す時にいちばんのネックになるCORSを気にする必要もありません
ただし、この方法だと条件があります
それはそのコンポーネントでuseStateやuseEffectと言ったものを使用しないことです
使用する場合はpage routerで呼び出す方法とほぼ同じになります
Page routerの場合
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"use client"import { useEffect, useState } from "react";
export default function Page() { const [value, setValue] = useState<any>() useEffect(()=> { fetch("https://api-booru.i32.jp/post") .then(async (res)=> { setValue(await res.json()) }) }, []) return <pre> {JSON.stringify(value, undefined, 4)} </pre>}page routerの場合はapp routerと比べてやや複雑ですが、それでも仕組みさえわかれば簡単なものです
上のコードはuseStateとuseEffectに対して、ある程度理解している前提にはなります、もしまだ理解していないようなら、そう言うもんなんだなーと思っていても大丈夫です、先にuseStateとuseEffectを理解してからまた読んでみてください
info
上のコードで何故か二回fetch関数が呼び出されることを修正したい人もいると思います
そんな時はnext.config.jsを編集しましょう
reactStrictModeをfalseにすれば二回呼び出されることはなくなります
ただし、デメリットもあります、reactStrictModeは開発環境のみ影響するもので、バグを見つけやすくしてくれたり、非推奨のコードに警告を出してくれます
その一環でuseEffectが複数回実行されているわけです。
本番環境などに影響はないので、複数回実行されても問題ない場合はtrueのままにしておくといいでしょう
1
2
3
4
5
/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: false,};export default nextConfig;終わりに
いかがだったでしょうか、今回はnext.jsからapiを呼び出す方法について書きました
パフォーマンスの話についてはまた改めて記事にしたいと思います、ではまた!
このドキュメントどう?
