NextJs Example

Just three lines of code—as shown below—are enough to integrate MockForMe into your Next.js application and start mocking APIs instantly.

MockForMe with Next.js

Get Access Token

GitHub example: Next.js MockForMe Example

---

Client-side setup

Create a new file at src/app/mockforme-client.js to initialize MockForMe on the client side.

./src/app/mockforme-client.js

"use client"

import { mockforme } from "mockforme";

const TOKEN = "ACCESS_TOKEN";

mockforme(TOKEN).run(
  (apis, rules) => {
    console.log("Mocked APIs", apis);
    console.log("Mocked Rules", rules);
  },
  (err) => {
    console.log("MockForMe Error", err);
  }
);

Server-side setup

Server-side setup (SSR)

Create a new file at src/app/mockforme-server.js to enable server-side API mocking.

./src/app/mockforme-server.js

import { mockforme } from "mockforme/server";

const TOKEN = "ACCESS_TOKEN";

mockforme(TOKEN).run(
  (apiMappings, rules) => {
    console.log("Mocked APIs", apiMappings);
    console.log("Mocked Rules", rules);
  },
  (err) => {
    console.log("MockForMe Error", err);
  }
);

Import MockForMe in your root layout

Import both client and server initializers inside src/app/layout.js

import "./mockforme-client";
import "./mockforme-server";

...
...

🎉 You’re all set!

Your Next.js app is now fully integrated with MockForMe.

Simply create an API endpoint in the MockForMe Dashboard, enable mocking, and use the same endpoint in your application code—no backend changes required. MockForMe will automatically intercept the request and return the mocked response.