Stackbit is a composable visual editor that supports multiple content sources and site frameworks.
Contentlayer can be used in sites that are Stackbit-enabled to ease the process for developers working with content in their components and pages.
Contentlayer provides a method for transforming Stackbit configuration into Contentlayer configuration, so you only have to define the shape of your content in one place.
How it Works
With the appropriate packages installed, the process works like this:
- Define the shape of your documents using Stackbit's
models
property. - Import Stackbit config object into the Contentlayer configuration file.
- Extend any necessary properties to support your code.
- Configure the Contentlayer source.
See below for an example, and also view the API reference for specific usage details.
Example Project
If you'd like to see this in process, check out this example project, which integrates Stackbit and Contentlayer in a Next.js site.
The README file has setup information, but we recommend reading through the tutorial below to understand how the pieces fit together.
Stackbit Guides
The following docs will get you started integrating Stackbit and Contentlayer into your Next.js project.
Stackbit + Contentlayer Tutorial
Learn how to use Stackbit and Contentlayer to add visual editing to a Next.js application.
Stackbit Configuration
API reference for transforming a Stackbit configuration object into Contentlayer config for source-files.
Stackbit Development Server
Hook the Stackbit development server into Next.js and Contentlayer.
Was this article helpful to you?
Provide feedback
Last edited on May 24, 2023.
Edit this page