Runtime error on Next.js with mirage

Hello, I’m trying to setup miragejs with my Next.js Project. But when I setup mirage server with <Link> in Next.js it shows following error.

import { Server } from "miragejs"

new Server({
  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 Home() {
  return (
    <div>
      <Link href="/posts">
        <a>Posts</a>
      </Link>
      <p>index page</p>
    </div>
  )
}

Does anyone knows about this?

[samselikoff]

Gotcha - thanks for digging into this @arsnl!

The passthrough API is indeed weird in that it inherits any previously set namespace, but you can actually rest it back to the empty string before calling passthrough() if you want it to work on the root of the current domain, like this:

createServer({
  routes() {
    this.namespace = 'api';

    // handles GET requests to /api/movies
    this.get("/movies", () => ({
      movies: [
        { id: 1, name: "Inception", year: 2010 },
        { id: 2, name: "Interstellar", year: 2014 },
        { id: 3, name: "Dunkirk", year: 2017 },
      ],
    }))

    // resets the namespace to the root
    this.namespace = "" // or this.namespace = "/"
    this.passthrough() // now this will pass through everything not handled to the current domain (e.g. localhost:3000)
  },
})

I think the “real” solution here is to improve the passthrough/namespace API so it’s clear how the prefix is applied.

[arsnl]

Depending of how your routes are defined in your mock server, you gonna have to set the passthrough differently.

If don’t use the namespace, you can use the global passthrough() at the end of all your routes or a specific passthrough("/_next/static/development/_devPagesManifest.json").

If you are using the namespace, you gonna have to use the solution proposed by @ynotdraw since I think the call for /_next/static/development/_devPagesManifest.json gonna be resolved to api/_next/static/development/_devPagesManifest.json (if the namespace is api). So, the call for GET /_next/static/development/_devPagesManifest.json will not be filtered by the passthrough.