使用 Mirage 开发 Next.js 页面

直接在 Next.js 应用的页面中模拟客户端 API 请求，以便您可以在没有后端服务的情况下继续进行本地开发。

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

步骤 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 服务器，因此如果您希望在多个页面之间共享模拟代码，请查看有关 集中和共享 Mirage 服务器 的指南。