Next.js 13 × Client Components × SWR × Route Handlersでクライアントサイドからデータを取得する

目標

Next.js 13のClient Componentsからデータをフェッチする。

条件

データをフェッチするにあたり、SWR（axios）とRoute Handlersを使用します。
クライアントから送信されたリクエストパラメータの検証にはZodを使用します。
エンドポイントにはJSONPlaceholderを使用します。
利用するフレームワーク、ライブラリのバージョンは以下のとおりです。2023年9月21日時点での最新バージョンを利用します。

・Next.js: 13.5.1
・Swr: 2.2.2
・Axios: 1.5.0
・Zod: 3.21.4

Client Components

Client Componentsを使用すると、リクエスト時にクライアントでレンダリングされるインタラクティブなUIを記述できます。Client Componentsを使用するには、"use client "ディレクティブをファイルの一番上（import文の上）に追加します。

Client Componentsの特徴:

クライアントサイドでのレンダリング（Javascriptはブラウザで実行）
データのフェッチ（async/awaitの代わりにuseState・useEffect・SWR・React-queryを使用）
イベントリスナーの追加（onClick()、onChange()など）
Stateとライフサイクルエフェクトの使用 (useState(), useReducer(), useEffect() など)
ブラウザ専用のAPIの使用
State、エフェクト、またはブラウザ専用APIに依存するカスタムフックの使用
Reactクラスのコンポーネントの使用

以下はボタンをクリックすると、クリックした回数を画面に表示する実装の一例です。

// app/counter/page.tsx.
'use client'

import { useEffect, useState } from 'react'

export default function Counter() {
  // useStateを利用してクリックした回数を保持
  const [count, setCount] = useState(0)

  // countの値が変わるたびに実行
  useEffect(() => {
    console.log('count', count)
  }, [count])

  // ボタンを押下するたびに実行
  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click</button>
    </div>
  )
}

SWR

Next.jsは、SWRというデータフェッチ用のReactフックライブラリを作成しています。クライアントサイドでデータを取得する場合は、このライブラリを使うことを強くお勧めします。
キャッシュ、再検証、フォーカストラッキング、再フェッチなどを手軽に実装することができます。SWRの詳細は以下を参照ください。

　 https://swr.vercel.app/ja

Route Handlers

Client Componentsでデータを取得する必要がある場合、クライアントからRoute Handlerを呼び出すことができます。
Route Handlerはサーバー上で実行され、クライアントにデータを返します。これは、APIトークンのような機密情報をクライアントに公開したくない場合に便利です。
Route Handlersはappディレクトリ内でのみ利用可能です。API RoutesとRoute Handlersを一緒に使う必要はありません。詳細は以下を参照ください。

　 https://nextjs.org/docs/app/building-your-application/routing/route-handlers

実装

Client ComponentsでSWRとRoute Handlersを利用して、外部サイトからデータを取得する実装は以下の通りです。

各種ライブラリのインストール

$ npm install swr axios

ディレクトリ構造

app
├── routeHandlers
│     └── page.tsx ← クライアントで実行
└── api
     └── routeHandlers
          └── route.ts ← サーバーで実行

app/routeHandlers/page.tsx

'use client'

import axios, { AxiosResponse } from 'axios'
import useSWR from 'swr'
import { useState } from 'react'

type TestResponse = {
  userId: string
  id: string
  title: string
  body: string
}

type TestRequest = {
  url: string
  postId: string
}

const fetcher = async (request: TestRequest) =>
  await axios
    .post(request.url, { postId: request.postId })
    .then((res: AxiosResponse<TestResponse>) => res.data)

export default function RouteHandlers() {
  const [postId, setPostId] = useState('1')

  const { data, error, isLoading } = useSWR<TestResponse, Error>(
    ['/api/routeHandlers', postId],
    ([url, postId]: [url: string, postId: string]) => fetcher({ url, postId }),
  )

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const targetElement = e.currentTarget?.postId as HTMLInputElement
    if (targetElement) {
      setPostId(targetElement.value)
    }
  }

  if (error) {
    return <div>Failed to load</div>
  }

  if (isLoading) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <div>
        <form onSubmit={handleSubmit}>
          <input name='postId' type='number' required placeholder='enter postId' />
          <button>search</button>
        </form>
      </div>
      <div>
        {data && Object.keys(data).length !== 0 ? (
          <div>
            <div key={data.id}>
              <h3>{data.title}</h3>
              <p title={data.body}>{data.body}</p>
            </div>
          </div>
        ) : (
          <h2>Not found</h2>
        )}
      </div>
    </div>
  )
}

app/api/routeHandlers/route.ts

import 'server-only'
import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

const userSchema = z.object({
  postId: z.string(),
})

type TestResponse = {
  userId: string
  id: string
  title: string
  body: string
}

export const POST = async (request: NextRequest) => {
  try {
    const result = userSchema.safeParse(await request.json())
    if (!result.success) {
      return NextResponse.json({}, { status: 400 })
    }

    const postId = result.data.postId.trim()
    const post = (await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then((res) =>
      res.json(),
    )) as TestResponse
    if (!post || Object.keys(post).length === 0) {
      return NextResponse.json({}, { status: 500 })
    }

    return NextResponse.json(post, { status: 200 })
  } catch (error) {
    return NextResponse.json({}, { status: 500 })
  }
}

以上で全ての手順は完了になります

Next.js 13 × Client Components × SWR × Route Handlersでクライアントサイドからデータを取得する

目標

条件

目次

Client Components

SWR

Route Handlers

実装