New

Introducing Contentlayer (Beta): Content Made Easy for Developers

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

Get started Why Contentlayer?

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

Developer Relations at Vercel

Used in 2844 projects

Explore on GitHub

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

Configure your content source

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

Explore Example

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 }
  },
}))
 
export default makeSource({
  contentDirPath: 'posts',
  /*              ^^^^^^^ Directory with the Markdown files. */
  documentTypes: [Post]
})

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/
- │ ├──
- │ ├──
- │ └──
├──
└──

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.

tsx
import { allPosts, type Post } from 'contentlayer/generated'
 
export function getStaticProps() {
  return { props: { posts: allPosts } }
}
 
export default function Home({ posts }: { posts: Post[] }) {
  return (
    <div>
      <h1>All posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.url}>
            <a href={post.url}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  )
}

Give Contentlayer a try – right here

Try to edit some of the content below...

... the changes will update in real-time

Contentlayer Playground

Contentlayer runs as part of the Next.js dev server

Frequently Asked Questions

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

Content made easy for developers

Supported Frameworks

Supported Content Sources

Just use JS/TS

Built-in code confidence

Build. Faster.

How Contentlayer works with...

Configure your content source

Your content is transformed into data

Import data into your application

Give Contentlayer a try – right here

Contentlayer Playground

Frequently Asked Questions

What problem is Contentlayer solving?

Why is Contentlayer fast?

Can I use Contentlayer with my existing tools?

Docs

Examples

Community