Contentlayer
Contentlayer turns your content into data - making it super easy to import
MD(X) and CMS content in your app
NOTE: Contentlayer is still in alpha and under active development. We expect to release a more stable beta version soon.
Try out an example
There are multiple example projects which you can clone to try out locally or in via Gitpod or Stackblitz in your browser:
Features
- Supported content sources:
- Local content (Markdown, MDX, JSON, YAML)
- Contentful
- Sanity (experimental)
- Live-reload on content changes
- Fast and incremental builds (many times faster than Gatsby in most cases)
- Simple but powerful schema DSL to design your content model (validates your content and generates types)
- Auto-generated TypeScript types based on your content model (e.g. frontmatter or CMS schema)
Roadmap
- Better getting started experience with auto-scaffolding of config file based on existing content files
- Stackbit integration
- Incremental data fetching for Contentful
- More content sources:
- Notion
- GraphCMS
- ...
Documentation
You can find the full documention for Contentlayer here.
Usage with Next.js
Install dependencies
npm install contentlayer next-contentlayer
contentlayer.config.ts
file
Create import { defineDocumentType, makeSource } from 'contentlayer/source-files'
import highlight from 'rehype-highlight'
export const Post = defineDocumentType(() => ({
name: 'Post',
filePathPattern: `**/*.md`,
fields: {
title: { type: 'string', required: true },
date: { type: 'date' },
},
}))
export default makeSource({
contentDirPath: 'posts',
documentTypes: [Post],
markdown: { rehypePlugins: [highlight] },
})
next.config.js
(optional: enables live-reload and build setup)
Set up Next.js plugin in const { withContentlayer } = require('next-contentlayer')
module.exports = withContentlayer()({
// Your Next.js config...
})
Who is using Contentlayer?
- ped.ro (Source)
- GraphCMS Docs
- leerob.io (Source)
- axeldelafosse.com (Source)
- arthurvdiniz.me (Source)
- imadatyatalah.vercel.app (Source)
- jahir.dev (Source)
- samuelkraft.com (Source)
- nirmalyaghosh.com (Source)
- miryang.dev (Source)
- osiux.ws (Source)
- akhilaariyachandra.com (Source)
- dawchihliou.github.io (Source)
- sergiobarria.com (Source)
- adeecc.vercel.app (Source)
- alpesdream.vercel.app (Source)
- bayukurnia.com (Source)
- makersleague.de (Source)
- euisblue.me (Source)
Are you using Contentlayer? Please add yourself to the list above via a PR. 🙏