🙌

Next.js / React – URL を Fetchする例 (初心者) ( TypeError: ... is not a func

2022/12/31に公開約1,000字

成功するコード例

pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import React from "react";

export const doFetch = async () => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  console.log(json);
}

export default function App({ Component, pageProps }: AppProps) {
  doFetch();
  return <Component {...pageProps} />
}

async な function 内で fetch を実行しないとダメっぽい

ダメな例

  • 同期 function の中では実行できない
  • resから派生する関数 ( res.json() ) とかが使えない
  • fetch の返り値としては Promise が返って来るがそのままは使っても意味がない
  • function が async ではないので await もできない
export default function App({ Component, pageProps }: AppProps) {
  const res = fetch('https://api.github.com/repos/zeit/next.js')
  console.log(res.json())
  return <Component {...pageProps} />
}

エラー

Server Error
TypeError: res.json is not a function

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

Discussion

ログインするとコメントできます