Next.js+Axiosでとりあえず何かJSONデータ持って来いって言われたのでサンプルコード書いてみた

はじめに

マジで急だったので何をどうすりゃいいかも全くわからん状態から初めました。
仕方ないので慌ててChatGPT大明神に聞いたけどイマイチの返答しか返ってこないし、Googleせんせーもいい加減の記事しか勧めてくれないから、
手当たり次第に他の人のコードを真似て自分のローカル開発環境で作っては消す作っては消すの繰り返しで３日間経過。
でも落ち着いて一回状況を整理すると段々解決方法が見えたので、以下はその過程です。

そもそも今回のゴールは？

npm run devでブラウザのデベロッパー・ツールから何かJSONデータが返って来てるぞ！って確認できればそれでOK、方法は不問。

大まかの流れ

じゃ、いざ作ろうってなったら、以下のステップは必要ではないでしょうか。

1. "npx create-next-app my-next-app"コマンドを叩いて、適当にnext.jsアプリを作る。
2. axiosをアプリにインストールする
3. axiosから来たリクエストを捕獲し処理するパーツ"api.ts"を用意する
4. ブラウザでアクセスする為の見た目と処理のエントランス部分を担当する"index.tsx"を用意する
5. "npm run dev"コマンドを叩いて、ローカル開発環境上でアプリを立ち上げ、試運転する
6. "http://localhost:3000"にアクセスして、F12とかでブラウザのデベロッパー・ツールを開いて、コンソールタブから、返ってきたメッセージを確認する

実際作ってみる

まずは筆者の環境を紹介します。

OS: Windows Server 2019 standard
Node.js: 18.15.0 LTS
ターミナルソフト： PowerShell
エディタ： VScode

1. まず、ターミナル(コマンドプロンプトやPowerShellなど)を開いて、作業ディレクトリまでに移動して、そこで"npx create-next-app my-next-app"コマンドを叩きます。

実際コマンドを叩くと、初期設定で多分こんなのが聞かれます。作成例では作業ディレクトリを自分のユーザー配下でやって、こんな感じで設定してます。

PS C:\Users\shinya> npx create-next-app my-next-app
√ Would you like to use TypeScript with this project? ... No / Yes #Yesです
√ Would you like to use ESLint with this project? ... No / Yes #Yesです
√ Would you like to use Tailwind CSS with this project? ... No / Yes #Yesです
√ Would you like to use `src/` directory with this project? ... No / Yes #Yesです
√ Would you like to use experimental `app/` directory with this project? ... No / Yes #Noです
√ What import alias would you like configured? ... @/* #何も入力せずそのままEnter押下
Creating a new Next.js app in C:\Users\{username}\my-next-app.
#以下略

ルートディレクトリのツリーはこんな感じです。

my-next-app/
├─ node_modules/
├─ public/
├─ src/
│  ├─ pages/
│  └─ styles/
├─ .eslintrc.js
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ README.md
├─ tailwind.config.js
└─ tsconfig.json

1. axiosをインストールします。

PS C:\Users\shinya> cd my-next-app
PS C:\Users\shinya\my-next-app> npm install axios

1. ルートディレクトリ\src\services\api.tsを作らないといけないが、見ての通り、src\配下にservices\というディレクトリがないので、作ります。

PS C:\Users\shinya\my-next-app> cd src
PS C:\Users\shinya\my-next-app\src> mkdir services

1. 作ったら、"services"配下にapi.tsというファイルをこんな感じに作ります。

import axios from "axios";

// GETリクエスト
export const getJSON = async (): Promise<any> => {
  const url = "https://jsonplaceholder.typicode.com/todos/1"; // サンプルコード用、実際リクエストはしない
  const response = await axios.get(url);
  console.log(response.data);
};

// POSTリクエスト
export const postJSON = async (): Promise<any> => {
  const url = "https://jsonplaceholder.typicode.com/posts"; // サンプルコード用、実際リクエストはしない
  const data = {
    title: "foo",
    body: "bar",
    userId: 1,
  };
  const response = await axios.post(url, data);
  console.log(response.data);
};

1. ルートディレクトリ\src\pages\に移動して、"pages"配下にindex.tsxというファイルを以下の感じで作ります。多分既存のindex.tsxがあるが、適宜に名前を変えて退避させておいてください。

import React from "react";
import { getJSON, postJSON } from "../services/api";

const HomePage: React.FC = () => {
  React.useEffect(() => {
    getJSON();
    postJSON();
  }, []);

  return <div>Hello World</div>;
};

export default HomePage;

ReactのファンクションパーツとReact Hooksで、ステップ4で作ったAPIを呼び出し、ホームページが表示された際に実行される。
これで一通りのコーディングは完了です。

1. ルートディレクトリまで移動し、"npm run dev"コマンドを叩く。"event - compiled client and server successfully in xxx ms "というメッセージが出たら、ブラウザからアクセスして動作確認してください。

PS C:\Users\shinya\my-next-app> npm run dev
> my-next-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 415 ms (170 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 172 ms (221 modules)

1. ブラウザから見ると、こんな感じになるはず。
   
   そこで、F12とかでデベロッパー・ツールを開いて、コンソールタブを開くと、何かのJSONデータが送られていることがわかる。
   

以上です。

おわりに

自分もド素人なのでとりあえず動いた万歳ってとりあえず記事にしたんですが、多分間違っているところや、バージョン違いで動かないこともあるので、気になる点や質問ございましたらコメント欄にどうぞ。それでは、良いハッカーライフを！