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.
There are multiple example projects which you can clone to try out locally or in via Gitpod or Stackblitz in your browser:
- 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)
- 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
- ...
You can find the full documention for Contentlayer here.
npm install contentlayer next-contentlayer
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] },
})
const { withContentlayer } = require('next-contentlayer')
module.exports = withContentlayer({
// Your Next.js config...
})
- 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)
- thismodernweb.com (Source)
- scriptbar-snippets.tryapp.us (Source)
- nikosantis.dev (Source)
- phong.vn (Source)
- dvl.sh
Are you using Contentlayer? Please add yourself to the list above via a PR. 🙏