axeldelafosse / contentlayer

Contentlayer turns your content into data - making it super easy to import MD(X) and CMS content in your app

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.

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)

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