DEV Community

Cover image for Use MirageJS to fake API calls with NextJS
Miguel A. Gavilán Merino
Miguel A. Gavilán Merino

Posted on • Updated on

Use MirageJS to fake API calls with NextJS

Welcome!

In this post, I am going to write an introduction to MirageJS, a tool that I discovered recently and I think that is very useful when you develop a Frontend application that will use an API to get its data without having the backend fully developed.

Assuming we already have a working frontend project in which we want to use Mirage, we have to follow the next steps:

 1. Install Mirage in our project:

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs
Enter fullscreen mode Exit fullscreen mode

2. Create a mirage folder

Now we need to create a folder called mirage. I located it at lib folder with the next structure:
Alt Text

3. Inside index.js

Inside index.js we have to create a mirage server which will serve to generate our fake api:

import { Server } from 'miragejs'

// Some imports from routes folder. Ex:
// import { mock1Routes } from './routes/mock1Routes'

const createMirageServer = () => {
  const server = new Server({
    routes () {
      this.urlPrefix = process.env.API_BASE_URL

      // Examples:
      // mock1Routes(this)
      // mock2Routes(this)
    }
  })

  return server
}

export default createMirageServer
Enter fullscreen mode Exit fullscreen mode

In urlPrefix we have to set the API base URL of our development API.

4. Create the mock routes

Now, inside the folder called routes we have to create those calls to the api that we want to mock.
For example we create a routes/mock1Routes.ts file with the next content:

import { Server, Response } from 'miragejs'

const mock1Routes = (server: Server) => {
  server.get('/api/whatever/', (_, request) => {
    if (successCondition) {
      return new Response(200, {}, {})
    } else {
      return new Response(404, {}, {})
    }
  })
}

export default mock1Routes
Enter fullscreen mode Exit fullscreen mode

We can customize responses according to what we need.

NOTE:
In this example we are mocking a GET method with server.get, but we can mock any method: server.post, server.patch...

5. Configure our Next.js app to use Mirage

To finish, we have to configure our Nextjs app to use this.
I added a .env variable to switch between use or not use mirage.

USE_MIRAGE_SERVER=true
Enter fullscreen mode Exit fullscreen mode

Then we need to configure the next.config.js file in order to use our env variables:

if (process.env.NODE_ENV === 'development') {
  require('dotenv').config()
}

module.exports = {
  env: {
    API_BASE_URL: process.env.API_BASE_URL,
    USE_MIRAGE_SERVER: process.env.USE_MIRAGE_SERVER
  }
}
Enter fullscreen mode Exit fullscreen mode

And now in our _app.tsx file we have to use this env variable and create the mirage server:

if (process.env.USE_MIRAGE_SERVER === 'true') {
  console.log('ATTENTION - Using mirage server')
  createMirageServer()
}
Enter fullscreen mode Exit fullscreen mode

And with this would be everything. We already have a functional API mock for our frontend development. 🎉🎉🎉

THANKS FOR READ ME
Alt text

Top comments (0)