Next.js + Contentful Stackbit Starter

👉 This repository is archived, for an up-to-date Next.js & Contentful starter see here.

This is a minimal starting point for new Stackbit projects. It is built with Next.js and uses Contentful as the content source. See below for other Stackbit example projects.

Getting Started

The typical development process is to begin by working locally.

Create local Stackbit project from this repo:

npx create-stackbit-app@latest --starter contentful

Change into the project directory and add the Contentful tokens to the .env file (see .env.example for reference). If you don't have a Contentful space with the proper content, see below for importing default content and schema into Contentful.

cd my-stackbit-site

Run the Next.js development server:

npm run dev

Install the Stackbit CLI. Then open a new terminal window in the same project directory and run the Stackbit Dev server:

npm install -g @stackbit/cli@latest
stackbit dev

This outputs your own Stackbit URL. Open this, register or sign in, and you will be directed to Stackbit's visual editor for your new project.

Importing Contentful Content

If you don't have a Contentful space set up and ready to go, you can import the starting content provided by this project.

1. Create a new Space in Contentful

2. Create new Contentful Personal Access Tokens here.

3. Import the Contentful data stored in the contentful/export.json file to the new space by running the following command. Replace the <management_token> with your Personal Access Token and the <space_id> with the new space ID.

   ./contentful/import.js <management_token> <space_id>

4. Create Content Preview API - Access Token for the new space via Contentful app Settings => API Keys => Content delivery / preview tokens => Add API Key. Add these keys to .env file(s) as mentioned above.

Next Steps

Here are a few suggestions on what to do next if you're new to Stackbit:

• Learn how Stackbit works
• Follow the Getting Started tutorial
• Explore the how-to guides for help while developing your site

Other Stackbit Projects

Stackbit has a number of examples that you can use to create a new project or evaluate Stackbit. Run the following command to see a list of available examples:

npx create-stackbit-app@latest --help

You can also visit our stackbit-themes GitHub organization

Join the Community

Join us on Discord for community support and to showcase what you build with this starter.