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 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)

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