This tutorial takes a hands-on approach to learning Stackbit's core concepts using Next.js as the site framework and markdown files within the repository as the content source.

Before we move onto individual lessons, let's make sure that you can run the example project locally on your machine.

See the getting started intro for more information on the format and goals of this tutorial.

System Requirements

We suggest you also have the following to optimize your experience:

  • Browser: Google Chrome
  • Node: v14 or later

Setup Next.js Example Project

Let's begin by installing the example project, which is a Next.js + Contentful site:

npx create-stackbit-app@latest --example tutorial-nextjs-files
cd tutorial-nextjs-files

This creates a new repo in a tutorial-nextjs-files directory on your machine and installs the dependencies.

Run the Project

Now you should be able to run the Next.js development server and see your content.

npm run dev

Visit localhost:3000 and you should the example project's home page.

Example project in Stackbit's visual editor

Tutorial Lessons

This tutorial covers the following topics.