使用共享的 Mirage 服务器开发 Next.js 应用

当你准备好将你的 Mirage 服务器集中化并在开发和测试之间共享时，请按照以下步骤操作。

注意：目前，Mirage 只能在浏览器中运行，这意味着它不会模拟你的 Next.js 应用通过 getServerSideProps 等钩子进行的任何服务器端网络调用。

步骤 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 都会拦截该请求并使用你的服务器定义中的数据进行响应。

现在，你拥有了一个中心位置来定义和更新你的 Mirage 服务器，并在继续你的 Next.js 应用的本地开发时进行维护。

开发一个页面