【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 FetchからRouterでページ遷移

前回はとりあえず fetch してレスポンスを確認しただけだったので、フォーム入力されたデータを使って、ページ遷移します

下記エントリで Native React で Fetch を作り込んだ「/api/connect」、「/api/latestdataset」からデータひっぱってきたいと思います
konchangakita.hatenablog.com

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓
・ログインページをデザイン
・フォーム制御
・とりあえずFetch
・FetchからRouterでページ遷移　←イマココ
・SSR で Fetch する
・Layoutつくる

準備

今回の最終形態はコチラ(Github)で公開しています

この docker-compose.yml からコンテナたちを起動します

コンテナ frontend、backend のコンテナ内で
・フロントエンドの起動
"/usr/src/next-app/uuid"

# npm run dev

・バックエンドの起動
"/usr/src/flaskr"

# python app.py

ブラウザから「http://localhost:7778/」にアクセス

POST で fetch

前回とりあえず fetch の練習だけおこなっていましたが、
onConnect関数 にフォームにインプットされたデータを使って POST します

POSTで渡す値は、json形式にします

const requestOptions = {
  method: "POST",
  headers: {'Content-Type' : 'application/json'},
  body: JSON.stringify(data)
}

関数に組み込んでみると
フロントエンド：＜pages/index.tsx＞

  const onConnect: SubmitHandler<FormValues> = async data => {
    console.log(data)
    const requestOptions = {
      method: "POST",
      headers: {'Content-Type' : 'application/json'},
      body: JSON.stringify(data)
    }

    const response = await fetch('/api/connect', requestOptions)
    if(response.status === 200) {
      const res_json = await response.json()
      console.log(res_json)
      if(res_json.info === 'success') {
        console.log(res_json)
      } else { alert('login failed') }
    }
  }

CORS問題対策に間に挟む別ファイルの関数にも、POSTで受け取ったデータを使って、バックエンドへ POST で fetch しています

フロントエンド：＜pages/api/connects.ts＞

import { NextApiRequest, NextApiResponse } from 'next'

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const requestOptions = {
    method: "POST",
    headers: {'Content-Type' : 'application/json'},
    body: JSON.stringify(req.body)
  }

  const response = await fetch("http://backend:7777/api/connect", requestOptions)
  const data = await response.json()

  // response.status > success 200
  res.status(response.status).json(data);
}

fetch でデータをとってくる先は、バックエンドの flask で作った「Nutanixクラスタに接続しクラスタ名を取得し、データを Elasticsearch へインプットする」関数です
関数の中身の説明はココ
【Nutanix UUIDエクスプローラーを作ってみよう】Flask表示までのまとめ - konchangakita

Nutanixクラスタのログイン情報をインプットし、無事接続できると Elasticsearch にデータ入力後にクラスタ名がレスポンスで返ってきます

fetch 後にページ遷移

fetch してデータ取得に成功後にページ遷移をさせたい場合には、Next.js機能の Router を使います

import { useRouter } from 'next/router'

router.push({
  pathname: '/home',
  query: {
    cluster: res_json.cluster_name,
  }
})

こうすることで、ページ遷移の際に fetcth のレスポンスとして受け取ったクラスタ名を含んだ「http://～～/?cluster=クラスタ名」という GET のURLとなります

関数に組み込んでみます

  const onConnect: SubmitHandler<FormValues> = async data => {
    console.log(data)
    const requestOptions = {
      method: "POST",
      headers: {'Content-Type' : 'application/json'},
      body: JSON.stringify(data)
    }

    const response = await fetch('/api/connect', requestOptions)
    if(response.status === 200) {
      const res_json = await response.json()
      console.log(res_json)
      if(res_json.info === 'success') {
        console.log(res_json)
        router.push({
          pathname: '/home',
          query: {
            cluster: res_json.cluster_name,
          }
        })
      } else { alert('login failed') }
    }
  }

遷移先のページ作成

遷移先のページを「pages/home.tsx」で作ります
URL の GETパラメータをページ上に表示するだけのページを作ります

フロントエンド：＜pages/home.tsx＞

import type { NextPage } from 'next'
import { useRouter } from 'next/router'

const Index: NextPage = () => {
  const router = useRouter()
  const {cluster} = router.query
  return (
    <div className="">
      <main data-theme="white" className="h-screen flex justify-center items-center">
        {cluster}
      </main>
    </div>
  )
}

export default Index

fetch に時間をかける

fetchしてページ遷移しましたが、次はページ遷移した先で fetch して SSR（サーバサイドレンダリング）を行います