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
- 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.
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.
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.
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?
Last edited on May 09, 2023.
Edit this page