Run it inside your Next.js app

next-diff compares the live site with the page you have open. It runs inside your own next dev, on your machine. Nothing is sent to a service, and next build does not include it.

Your app keeps the Next.js it already has. There is no route to add and nothing to put in a layout.

Install

npm i -D @seggy116/next-diff

pnpm add -D @seggy116/next-diff and yarn add -D @seggy116/next-diff are the same install.

Point it at live

Wrap the Next config. live is an origin, such as https://example.com, not a path. The same wrapper works in next.config.ts.

// next.config.mjs
import { withDiff } from "@seggy116/next-diff";

export default withDiff(
  {
    // your config
  },
  { live: "https://example.com" },
);

Open a page

Run next dev. A round button sits just above Next’s own dev-tools button, or press Ctrl / Cmd + Shift + D. Live is on the left and local is on the right, with every difference marked. Exit diff and you are back on the page you were looking at.

The dev server only fetches the origin you set. Sessions stay in memory. Your cookies are not sent to the live site. Pages behind a login are shown logged out, and pages that refuse to be framed may not render.

next-diff on GitHub