If you have been using NextJs for a long time, you must have remembered there was time when we can mock REST API using /api folder. When we call an API that matches a route in this folder, it return a response as we defined. We can no longer do that in Next, so I'd like to share an even more convenient way to mock an API, using Mockoon.

I. What is Mockoon

Mockoon is a popular open-source API mocking tool created in 2017 by Guillaume Monnet. It allows developers to quickly create mock APIs and test their applications without relying on third-party APIs that can be unreliable, slow, or expensive to use in development and testing environments.
Source: https://mockoon.com/what-is-mockoon/

So, it's just a tool that helps you mock APIs easily.
Your data will be in a single JSON file so you can share with the others without any sophisticated setup, all you need is Mockoon Desktop. This JSON file from your code can be automatically update everytime you change something on Mockoon Desktop.

Use Mockoon if:

• You want to speed up development cycle
• BE is not ready
• You want to enhance your integration testing
• You want to show demo to customers

With these mock APIs, you can do other things using Mockoon. Checkout it's full features here. In this blog, we'll focus on it's main purpose, which is mocking an API.

II. How to mock an API Mockoon

1) Download Mockoon Desktop

Download and install the application here:
https://mockoon.com/download/

After installed, open the application and you can see that there's an example for you to refer and jump to step 3. Or, follow our next step.

2) Create JSON file in your APP

As you can see, I have a basic Nextjs app with nothing in it yet.
/mockoon is the folder created to keep my JSON file, you can name anything you want, it doesn't matter.

Next, open Mockoon Desktop and select "New local environment". When a window open, select the folder that you created above and input a name for your data file, then save.

You can now see a JSON file has been created with all the initial information needed to run mock API. This file will store every API routes you create, so the more mock APIs you have, the more complicated the file become. It will be hectic if we have to modify our response directly in this file, but you don't have to worry, change should be made from Mockoon Desktop and any changes will reflect to this JSON file.

3) Run mock

I have created some data to get students for my app, and start running mockoon server.

Now i can call API on my app with http://localhost:9000/students and display it.

Voila! It's not wrong to say "too easy", isn't it.

4) Add parameters

Ofcourse you can mock CRUD operations with Mockoon.
If you need to mock a POST API with body, you can totally add differents responses that match different rules. Here's how to do it.

Let say I have a /search API, which has below request body interface.
And I want to search for students that has rank A.

interface SearchRequest {
    name?: string;
    class?: string;
    rank?: string;
}

In Mockoon Desktop, add another HTTP Route for POST /search an add another response. In Rules tab, add the conditions that match you body request. In Status & Body, return the mock data with students that has rank A only.

One thing to note is that, the rules hierarchy is like an if-else hierarchy, so any response that has more rules should be before the one that has less rules. For example, the response for api that has rules will be place above the one that doesn't have any rules. Otherwise, our api call will match the one with no rule and return differently.

I hope this little blog introduce something helpful to you. Mockoon is simple, free, and can be a great help in many cases if you're a FE developer. Let's try it out!