Netlify Docs
Ask Netlify

Contact

Visual editing /Visual Editor /Frameworks /

Use Visual Editor with Next.js

Next.js is the framework of choice for many companies, especially those building modern websites at scale.

Next.js allows developers to use client-side, server-side, or static rendering as needed, all within the same project. Visual Editor is agnostic of these modes.

# Configure Visual Editor for a Next.js project

In common cases, the only required configuration is to specify ssgName: "nextjs". You may also want to specify nodeVersion, depending on dependency requirements.

// stackbit.config.ts
import { defineStackbitConfig } from "@stackbit/types";

export default defineStackbitConfig({
  stackbitVersion: "~0.6.0",
  ssgName: "nextjs",
  nodeVersion: "18"
  // ...
});

# Dev command with cloud setup

When not working locally and using the cloud setup, the visual editor will launch the Next.js server by directly running next dev. (It does not run npm run dev.)

If you need to use a different command, use the devCommand property.

# Content reload

When Visual Editor detects content changes, it will automatically call Next's router.replace() function to refresh the current page shown in Visual Editor. This maintains client-side state and does not trigger a full page reload.

You can override this behavior in part or in full to implement site-specific optimizations. See Automatic Content Reload.

# pnpm support

The visual editor supports using pnpm with a Next.js project but requires that you set the devCommand config option.

// stackbit.config.ts
import { defineStackbitConfig } from "@stackbit/types";

export default defineStackbitConfig({
  stackbitVersion: "~0.6.0",
  ssgName: "nextjs",
  nodeVersion: "18",
  devCommand: "node_modules/.bin/next dev -- --port {PORT} --hostname 127.0.0.1"
  // ...
});

# Examples

Here are our most popular Next.js starter projects: