Next.js

How to integrate Stackbit in your Next.js-based website

Many of our starters & examples are based on Next.js, as it's quickly becoming the framework of choice for many companies from SMB to the enterprise. Next.js allows developers to use client-side, server-side or static rendering as needed, all within the same project. Stackbit is agnostic of these modes.

How to use

Define ssgName: nextjs in your Stackbit configuration file.
In many cases, no other configuration is necessary.

By default, Stackbit will launch the Next.js server by directly running next dev (note: it does not run npm run dev). If you need to use a different command, set the devCommand property in your Stackbit configuration (reference).

Content reload

When Stackbit 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.

Managed hosting

When you're our Managed Hosting, include a Netlify configuration file which references Netlify's Next.js plugin (see example).

Netlify fully support's 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 (next export).

Examples

Minimal Javascript Starter

TypeScript Starter

Contentful Starter