共有Mirageサーバーに対してNext.jsアプリを開発する

Mirageサーバーを集中管理して開発とテストで共有する準備ができたら、次の手順に従ってください。

注：現時点では、Mirageはブラウザでのみ実行されるため、getServerSidePropsなどのフックを介してNext.jsアプリが行うサーバー側のネットワーク呼び出しをモックアウトしません。

ステップ1：Mirageをインストールする

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

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

ステップ2：共有サーバーを定義する

共有サーバーを定義する一般的な場所はmirage.jsです

// mirage.js
import { createServer, Model } from "miragejs"

export function makeServer({ environment = "test" } = {}) {
  let server = createServer({
    environment,

    models: {
      movie: Model,
    },

    seeds(server) {
      server.create("movie", { name: "Inception", year: 2010 })
      server.create("movie", { name: "Interstellar", year: 2014 })
      server.create("movie", { name: "Dunkirk", year: 2017 })
    },

    routes() {
      this.namespace = "api"

      this.get("/movies", (schema) => {
        return schema.movies.all()
      })
    },
  })

  return server
}

ステップ3：開発環境でサーバーを起動する

Next.jsアプリの初期化ファイル（pages/_app.js）を開き、makeServer関数をインポートし、開発環境で呼び出します。

// pages/_app.js
import { makeServer } from "../mirage"

if (process.env.NODE_ENV === "development") {
  makeServer({ environment: "development" })
}

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

これで、アプリケーション内の任意のページが開発中にネットワークリクエストを行うと、Mirageはそのリクエストをインターセプトし、サーバー定義からのデータで応答します。

これで、Next.jsアプリのローカル開発を継続しながら、Mirageサーバーを定義および更新するための一元的な場所ができました。

ページを開発する