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

Create contentlayer.config.ts file

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] },
})

Set up Next.js plugin in next.config.js (optional: enables live-reload and build setup)

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)
• thismodernweb.com (Source)
• scriptbar-snippets.tryapp.us (Source)
• nikosantis.dev (Source)

Are you using Contentlayer? Please add yourself to the list above via a PR. 🙏