はじめに
next.jsのアプリケーションから自分が作成したapiサーバー(Golang)からデータを取得する処理を記載するために調べたことをまとめていきます。
個人用のメモとして残します。
使用技術
next.js
axios
React react-query
調べたこと
1.axios
axiosとは、apiの通信で使用するもの。fetch関数のようなもの。
vue.jsを使ってaxiosを学ぶ
･axiosの基本を確認できるサイト
Getting Started with Next.js
axiosの使い方まとめ (GET/POST/例外処理)
【Typescript】いろいろな型の指定方法：Axios編
･参考にしたコード
【React / TypeScript】axios と QiitaAPI を使ったサンプルアプリ
･その他
【JavaScript】初心者にもわかるPromiseの使い方
2. React react-query
サーバーから取得したデータをキャッシュできる。データの管理が便利。
- postとdelete
useMutation
React Queryを使いこなすために試したこと
axiosの戻り値について
【TypeScript】Axiosのリクエストとレスポンスに型をつける
【Typescript】axiosのREADME読んでみた Part4【React】
Typescript】いろいろな型の指定方法：Axios編
･React react-queryの基本を確認できるサイト
初めてReact Queryを使う人のため設定方法と動作の理解
【React】React Queryの基礎知識をまとめました(Stale, Cache, Prefetchingなど)
･ nextでreact-queryを使用するためには
Next.js とReact Query でデータを表示したり更新する
Next.jsでuseQueryを使う方法を教えてください
3. ディレクトリ構成で参考にしたコード
以下サイトは少々むずかしかったので、
簡略化して実装しました。