With your example project installed and running locally, let's begin the tutorial by installing Stackbit's local development environment.

This is a lesson within the Next.js + Markdown files tutorial. Following it requires running the example project locally on your machine.

Content-Driven Development

Stackbit's only real requirement is that content must be structured and separated from code. Learn more about content modeling basics in Stackbit.

This project is setup using a single composable page template. It works like this:

  1. Content is stored in markdown files in the content/pages directory (find the home page at content/pages/index.md).
  2. The content files are parsed by a set of utility functions in utils/content.js
  3. These utilities are used by an optional catch-all page template in pages/[[...slug]].jsx. This page template uses takes the structured content and maps it to the appropriate components in the components directory.

Content-driven development diagram

Configure Stackbit

Stackbit reads a stackbit.yaml configuration file from the root of your project directory. Add this file to your project with the minimal configuration for a Next.js site using files as the content source:

# stackbit.yaml

stackbitVersion: ~0.5.0
ssgName: nextjs
nodeVersion: '16'
cmsName: git
pagesDir: content/pages
  referenceType: static
  staticDir: public
  uploadDir: images
  publicPath: /

Local Development

We now have all we need inside the code to be able to run Stackbit's development server. (Seriously, how easy was that?)

Install Stackbit CLI

Install the CLI, which provides the stackbit command used to run the local development server:

npm install -g @stackbit/cli

Run Stackbit Dev

With your development server still running on port 3000, start the Stackbit dev server.

stackbit dev

Both servers (Next.js and Stackbit) should now be running on your machine. Learn more about working modes.

Development servers running in parallel

Open the Visual Editor App

Stackbit dev outputs a URL unique to your user: app.stackbit.com/local/.... Open the full URL in your browser and register or sign in.

After signing in, you should see your example project within the preview section of Stackbit's visual editor. (You won't be able to edit content just yet.) Learn more about Stackbit's visual editor.

Example project in Stackbit's visual editor