Content made easy for developers

Contentlayer is a that validates and transforms your content into JSON data you can easily import into your application.

  • Lightweight & easy to use
  • Great developer experience
  • Blazing fast build & page performance
Intro to Contentlayer Video Thumbnail

Supported Frameworks

Supported Content Sources

Having type-safe access to my content has been extremely helpful. Contentlayer provides a nice abstraction between your Markdown files or CMS and your application.

Lee Robinson

Lee Robinson

Developer Relations at Vercel

Just use JS/TS

No need to learn a new query language or complicated API docs to read. Import and manipulate your content as data directly with the JavaScript methods you know and love.

  • Simply import your content as data
  • No new query language to learn
  • Works great with your site framework

Built-in code confidence

Automatically-generated type definitions and configurable data validations ensure that your data is properly structured across your application.

  • Validates your content & frontmatter
  • Generates TypeScript types
  • Great error messages

Build. Faster.

Contentlayer + Next.js brings faster build times than Next.js alone or up against other frameworks, like Gatsby.

  • Incremental & parallel builds
  • Instant content live-reload
  • Scales to 100k of documents

How Contentlayer works with...

1

Configure your content source

When working with local markdown or MDX files, you tell Contentlayer the expected shape of your data (document type definitions).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
tsx
import { defineDocumentType, makeSource } from 'contentlayer/source-files'
 
const Post = defineDocumentType(() => ({
name: 'Post',
filePathPattern: `**/*.md`,
fields: {
title: { type: 'string', required: true },
date: { type: 'date', required: true }
},
computedFields: {
url: { type: 'string', resolve: (post) => `/posts/${post._raw.flattenedPath}` },
},
}))
 
export default makeSource({
contentDirPath: 'posts',
/* ^^^^^^^ Directory with the Markdown files. */
documentTypes: [Post]
})
2

Your content is transformed into data

Run Contentlayer to process your content. Do this as part of the Next.js dev server, or using the Contentlayer CLI.

This validates the content, then generates types definitions and outputs data objects ready to be imported as a ESM module.

posts/
  • ├──
  • ├──
  • └──
.contentlayer/generated/
  • ├── Post/
    • ├──
    • ├──
    • └──
  • ├──
  • └──
3

Import data into your application

Import the data just like you would any other JavaScript library. Use it to render pages, and pass down as props to the components on those pages.

Keep the development bundle small with tree-shaking and improve the development experience by using the generated type definitions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
tsx
import { allPosts } from 'contentlayer/generated'
 
export default function Home() {
return (
<div>
<h1>All posts</h1>
<ul>
{allPosts.map((post) => (
<li key={post.url}>
<a href={post.url}>{post.title}</a>
</li>
))}
</ul>
</div>
)
}

Frequently Asked Questions

We've heard a lot of questions about Contentlayer. These are the questions we get most often.

  • What problem is Contentlayer solving?

    Modern web frameworks don't prescribe a method for parsing content. They provide powerful page routing and rendering processes, but it's up to you to provide it with content. Contentlayer persists the great developer experience provided by modern web frameworks by making it easy to work with content in your web project. Learn more.
  • Why is Contentlayer fast?

    Contentlayer leverages optimizations of build tools to the fullest to make processing source content a breeze. It then caches that content intelligently and builds incrementally. When you update content, Contentlayer will only build what has changed, taking advantage of work already done. Learn more.
  • Can I use Contentlayer with my existing tools?

    Contentlayer is built to be framework agnostic. Contentlayer is a content processor at its core, but provides modules for importing content from various sources, and uses plugins to provide tight integration with modern frameworks. Learn more.