next.jsからapiを呼び出す方法

2022-03-06

next.js

back

Posted by

applemango

next.jsからapiを呼び出す方法は色々ありますが今回はよく使う

- fetch

- axios

- swr

の三つについて書きます

最初に

exampleとして出てくるcodeにurlという変数を多用しますが

変数に以下の値を入れることを想定しています

const url = "https://dummyjson.com/users?limit=1"

fetchを使う方法

fetchはデフォルトの関数なので一番馴染みやすいのではないでしょうか

const req = () => {
  fetch(url)
    .then(res => res.json())
    .then(data => {
      console.log(data)
    })
}

log

{users: Array(1), total: 100, skip: 0, limit: 1}

同期処理にする

今のままでもいいですがやはり変数に入れたり、値を受け取った後に処理をする場合に不便です

例えば、このcodeを実行した時に返ってくるのがPromiseですし

const req = () => {
    const res = fetch(url)
    console.log("end", res)
}

log

end Promise {<pending>}

下のcodeでも返ってくるのがendが出力された後です

const req = () => {
  console.log("start")
  fetch(url)
  .then(res => res.json())
  .then(data => {
    console.log(data)
  })
  console.log("end")
}

log

start
end
{users: Array(1), total: 100, skip: 0, limit: 1}

そこでasync,awaitの出番です

const req = async () => {
  console.log("start")
  const res = await fetch(url)
  console.log("end", res, res.json())
}

log

start
end
  Response {type: "cors", ...}
  Promise {<pending>}

async function req() {
  console.log("start")
  await fetch(url)
    .then(res => res.json())
    .then(data => {
        console.log(data)
    })
    console.log("end")
}

log

start
{users: Array(1), total: 100, skip: 0, limit: 1}
end

ちゃんと同期処理になっていることがわかります

axiosを使う方法

今回はapiを呼び出すだけなのであまり深く掘らずに紹介だけでとどめます

fetchでも十分かもしれませんがaxiosを使えば複雑な処理をより簡単にできます、がfetchで不満が無いのであれば特に使う必要は無いでしょう

ですが一応書きます

axiosは外部ライブラリなのでインストールしてimportする必要があります

$ npm i axios

import axios from 'axios'

axios.get(url)
    .then(res => console.log(res))

const req = async () => {
  console.log("start")
  const res = await axios.get(url)
  console.log("end", res)
}

swrを使う方法

swrは単にapiを呼び出すだけではなく少し特殊です

swr自体はapiを呼び出しません,swrはより簡単に呼び出すために使用されます

また必要に応じて呼び出すというより、最初に読み込まないといけないデータを呼び出すなどの使い方が主流に思えます

const fetcher = (url: string) => fetch(url).then(res => res.json())

const fetcher = (url: string) => axios.get(url).then(res => res.data)

export default function Main() {
  const {data, error, isLoading} = useSWR(url, fetcher)
  return <div>
    <p>
    { data
      ? JSON.stringify(data)
      : isLoading
          ? "loading..."
          : error}
    </p>
  </div>
}

SSRする

また、swrを使えば比較的簡単にSSR(Server Side Rendering)することができます

import useSWR, { SWRConfig } from "swr"

const url = "https://dummyjson.com/users?limit=1"
const fetcher = (url: string) => fetch(url).then(res => res.json())

export const getServerSideProps = async () => {
    const data = await fetcher(url)
    return {
        props: {
            fallback: {
                [url] : data
            }
        }
    }
}

const Main = () => {
    const {data, error} = useSWR(url)
    return <div style={{
        height: '100vh',
        width: '100vw',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    }}>
        <p>{
        error
        ? "error..."
        : data
            ? JSON.stringify(data)
            : "loading..."}</p>
    </div>
}

export default function Ssr ({ fallback }:{
    fallback: any
}) {
    return <SWRConfig value={{ fallback }}>
        <Main />
    </SWRConfig>
}

終わりに

今回はnext.jsでapiを呼び出す方法を書きました(自明)

ではまた

このドキュメントどう?