Next.js

Integrating Netlify Create in a Next.js website

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.

Configuration

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
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 Reloading

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.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
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: