Skip to main content

NextJs Integration

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

MockForMe + Next.js (CSR + SSR) Integration

Step 1. Create NextJs Application​

npx create-next-app@latest mockforme-nextjs

Step 2. Install mockforme package with YARN or NPM​

yarn add mockforme -D
npm i mockforme --save-dev

Step 3. Create .env file and add mockforme Access Token​

NEXT_PUBLIC_MFM_API_TOKEN=ADD_ACCESS_TOKEN_HERE

Get Access Token from MockForMe Access Token

Step 4. Client Setup​

Create a new file at src/app/mockforme-client.js to set up client-side initialization.​

Note: Add "use client"; at the very top of the file to ensure it runs in the client environment.

./src/app/mockforme-client.js
"use client"

import { mockforme } from "mockforme";

const TOKEN = process.env.NEXT_PUBLIC_MFM_API_TOKEN;

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

Step 5. SSR Setup​

Create a new file at src/app/mockforme-server.js to set up server-side initialization​

  • Import the component that uses mockforme for client-side rendering (CSR).
  • Set up and initialize mockforme for server-side rendering (SSR).
./src/app/mockforme-server.js
import { mockforme } from "mockforme/server";

const TOKEN = process.env.NEXT_PUBLIC_MFM_API_TOKEN;

mockforme(TOKEN).run((apiMappings, rules) => {
  console.log("<MockedApis>", apiMappings);
  console.log("<MockedRules>", rules);
}, (err) => {
  console.log("<mockforme error>", err);
});

Step 6. Import mockforme-client and mockforme-server in layout.js​

src/app/layout.js file.

./src/app/layout.js
import "./mockforme-client";
import "./mockforme-server";
                
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Step 7. Inside src/app/page.js get product data and pass to ProductList component​

./src/app/page.js
import { ProductList } from "@/app/components/ProductList";

export default async function Product() {
  try {
    const res = await fetch("https://www.myexample.com/products", {
      cache: "no-store",
    });
    const data = await res.json();
    return (
      <div>
        <ProductList initialData={data} />
      </div>
    );
  } catch (err) {
    console.log("<err>", err);
    return <ProductList initialData={[]} />;
  }
}

Step 8. Run the project​

JSON Sample Data for APIs​

Create MockApi in mockforme dashboard​

  • Visit mockforme dashboard
  • Click on Create Api
  • Add /products and /cart endpoints
  • Enable mocking for both endpoints
  • Add JSON data for both endpoints

Key Takeaways​

  1. No server setup required
  2. Works seamlessly with CSR + SSR
  3. Speeds up development & testing

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