使用 Mirage 開發 Next.js 頁面

直接在 Next.js 應用程式的頁面中模擬用戶端 API 請求，讓您無需任何後端服務即可繼續進行本機開發。

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

步驟 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>
  )
}

現在您可以繼續開發您的頁面，並使用 Mirage 模擬您的後端 API 端點。

請注意：您一次只能實例化一個 Mirage Server，因此如果您想要在多個頁面之間共用您的模擬程式碼，請查看關於集中和共用 Mirage 伺服器的指南。