🎉

【Web Library】Nextjs13で覚える便利なライブラリ【#４Data Fetching】

2023/02/26に公開

Next.js

tech

【#４Data Fetching】

YouTube: https://youtu.be/gQqpzlYNQuE

https://youtu.be/gQqpzlYNQuE

今回はデータフェッチについて解説します。

「NextJs13」の「app」ディレクトリでは、
「getServerSideProps」, 「getStaticProps」, 「getInitialProps」
がサポートされていません。

そこでこちらのドキュメントの内容に従って「page.tsx」にフェッチ用の
メソッドを設定します。

「app」フォルダ内に新しく「fetch」フォルダを作成して、
その中に「page.tsx」を作成します。

app/fetch/page.tsx

async function getUsers() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

const Fetchpage = async () => {
  const data = await getUsers();
  console.log(data);

  return <div>Fetchpage</div>;
};

export default Fetchpage;

ここまでできましたら、
ローカルサーバーを起動して

http://localhost:3000/fetch

こちらにアクセスします。
ブラウザ上ではコンソールにデータが表示されていないのですが、
VSコードのターミナルでユーザーのデータが取得できていることが確認できます。

【#４Data Fetching】

Discussion