Netlify Docs
Ask Netlify

Contact

Netlify Create /Frameworks /

Use Netlify Create 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. Netlify Create is agnostic of these modes.

# Configure Netlify Create 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, Netlify Create 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 Netlify Create detects content changes, it will automatically call Next's router.replace() function to refresh the current page shown in the 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

Netlify Create 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"
  // ...
});

# Managed hosting

When you're using managed hosting, include a Netlify configuration file which references Netlify's Next.js plugin. See this example for reference.

Netlify fully supports Next.js server-side features (e.g. API routes). If you're using any of these, make sure that the build command does not include statically exporting your site (i.e. do not use next export).

# Examples

Here are our most popular Next.js starter projects: