針對共享 Mirage 伺服器開發 Next.js 應用程式

一旦您準備好集中您的 Mirage 伺服器並在開發和測試之間共享它，請按照這些步驟操作。

注意：目前，Mirage 僅在瀏覽器中執行，這表示它不會模擬 Next.js 應用程式透過 getServerSideProps 等 hook 進行的任何伺服器端網路呼叫。

步驟 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 應用程式上繼續進行本地開發。

開發頁面