Mirage を使用した Next.js ページの開発

Next.js アプリケーションのページ内でクライアント側の API リクエストをモックすることで、バックエンドサービスなしでローカル開発を続けることができます。

注: 現時点では、Mirage はブラウザでのみ動作します。つまり、`getServerSideProps` などのフックを介して Next.js アプリケーションが行うサーバー側のネットワーク呼び出しはモックされません。

ステップ1: Mirageのインストール

まず、プロジェクトに Mirage を追加していることを確認してください。

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

ステップ2: ページにサーバーを作成する

ページファイル内で、Mirage から Server をインポートし、サーバーを作成し、コードに必要な API エンドポイントのモックを開始します。

// pages/index.js
import { useState, useEffect } from "react"
import { createServer } from "miragejs"

createServer({
  routes() {
    this.get("/api/movies", () => ({
      movies: [
        { id: 1, name: "Inception", year: 2010 },
        { id: 2, name: "Interstellar", year: 2014 },
        { id: 3, name: "Dunkirk", year: 2017 },
      ],
    }))
  },
})

export default function Index() {
  let [movies, setMovies] = useState([])

  useEffect(() => {
    fetch("/api/movies")
      .then((res) => res.json())
      .then((json) => {
        setMovies(json.movies)
      })
  }, [])

  return (
    <ul>
      {movies.map((movie) => (
        <li key={movie.id}>
          {movie.name} ({movie.year})
        </li>
      ))}
    </ul>
  )
}

これで、ページの開発を続け、バックエンド API エンドポイントを Mirage でモックしながら作業を進めることができます。

注: Mirage サーバーは一度に 1 つしかインスタンス化できないため、モックコードを複数のページで共有する場合は、Mirage サーバーの集約と共有に関するガイドをご覧ください。

アプリケーションの開発