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 in cloud projects

In a cloud project, 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

Visual Editor supports using pnpm with a Next.js project in a cloud 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: