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

2. Create a mirage folder

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

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

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

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

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
  }
}

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()
}

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

THANKS FOR READ ME