Skip to main content

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 { useEffect } from "react";

import { mockforme } from "mockforme";

export default function MockForMeClient() {
  useEffect(() => {
    mockforme().run();
  }, []);

  return null;
}

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(); // token is required for SSR

Import MockForMe in your root layout​

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

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

...
...

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <MockForMeClient />
        {children}
      </body>
    </html>
  );
}

🎉 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.