contentlayer.dev Open in urlscan Pro
3.121.122.184  Public Scan

Form analysis
0 forms found in the DOM

Text Content

ContentlayerBeta

DocumentationExamples
Search...⌘K
GithubDiscord


CONTENT MADE EASY FOR DEVELOPERS

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

 * 
   Lightweight & easy to use
 * 
   Great developer experience
 * 
   Blazing fast build & page performance

Get startedWhy 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 5699 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...

Local filesNotion
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).

Explore Example

contentlayer.config.ts

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/
 * ├── change-me.md
 * ├── click-me.md
 * └── what-is-contentlayer.md


.contentlayer/generated/
 * ├── Post/
    * │ ├── change-me.md.json
    * │ ├── click-me.md.json
    * │ └── what-is-contentlayer.md.json

 * ├── index.d.ts
 * └── index.mjs

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.


app/posts/page.tsxapp/posts/[slug]/page.tsx

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





GIVE CONTENTLAYER A TRY – RIGHT HERE

1. Let's edit some content2. How content is transformed into data3. How data is
used from your app4. Project setup

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.

Read more in docsAsk a question


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

 * Lee Robinson
   
   Developer Relations at Vercel
   
   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.

 * Pedro Duarte
   
   Creator of Radix UI
   
   Been using Contentlayer as the mdx processor for the Rainbow docs. Such a
   pleasant experience 🧘‍♂️ It transforms the mdx files, validates them AND
   adds types!

 * Houssein Djirdeh
   
   Software Engineer at Google
   
   Contentlayer looks like a super promising library [...] to import data from
   CMS platforms or local files like markdown into your application. Took me
   less than 5 minutes to cleanly separate and connect MDX files to a Next.js
   layout.

 * Jed Watson
   
   Co-founder of Thinkmill
   
   If you bring content-as-data into your website, whether it's from Markdown
   files or a hosted CMS, do yourself a favour and check this out. Massive leap
   forward in speed, type safety, and DX 👏🏻

 * João Pedro Schmitz
   
   Front-End Engineer at GraphCMS
   
   We're using Contentlayer on the @GraphCMS documentation, and it's fantastic!
   It not only loads all the local content, but it also supports MDX. Plus,
   having type definitions for the content is super helpful.

 * Lee Robinson
   
   Developer Relations at Vercel
   
   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.

 * Pedro Duarte
   
   Creator of Radix UI
   
   Been using Contentlayer as the mdx processor for the Rainbow docs. Such a
   pleasant experience 🧘‍♂️ It transforms the mdx files, validates them AND
   adds types!

 * Houssein Djirdeh
   
   Software Engineer at Google
   
   Contentlayer looks like a super promising library [...] to import data from
   CMS platforms or local files like markdown into your application. Took me
   less than 5 minutes to cleanly separate and connect MDX files to a Next.js
   layout.

 * Jed Watson
   
   Co-founder of Thinkmill
   
   If you bring content-as-data into your website, whether it's from Markdown
   files or a hosted CMS, do yourself a favour and check this out. Massive leap
   forward in speed, type safety, and DX 👏🏻

 * João Pedro Schmitz
   
   Front-End Engineer at GraphCMS
   
   We're using Contentlayer on the @GraphCMS documentation, and it's fantastic!
   It not only loads all the local content, but it also supports MDX. Plus,
   having type definitions for the content is super helpful.

 * Lee Robinson
   
   Developer Relations at Vercel
   
   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.

 * Pedro Duarte
   
   Creator of Radix UI
   
   Been using Contentlayer as the mdx processor for the Rainbow docs. Such a
   pleasant experience 🧘‍♂️ It transforms the mdx files, validates them AND
   adds types!

 * Houssein Djirdeh
   
   Software Engineer at Google
   
   Contentlayer looks like a super promising library [...] to import data from
   CMS platforms or local files like markdown into your application. Took me
   less than 5 minutes to cleanly separate and connect MDX files to a Next.js
   layout.

 * Jed Watson
   
   Co-founder of Thinkmill
   
   If you bring content-as-data into your website, whether it's from Markdown
   files or a hosted CMS, do yourself a favour and check this out. Massive leap
   forward in speed, type safety, and DX 👏🏻

 * João Pedro Schmitz
   
   Front-End Engineer at GraphCMS
   
   We're using Contentlayer on the @GraphCMS documentation, and it's fantastic!
   It not only loads all the local content, but it also supports MDX. Plus,
   having type definitions for the content is super helpful.

 * Lee Robinson
   
   Developer Relations at Vercel
   
   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.

 * Pedro Duarte
   
   Creator of Radix UI
   
   Been using Contentlayer as the mdx processor for the Rainbow docs. Such a
   pleasant experience 🧘‍♂️ It transforms the mdx files, validates them AND
   adds types!

Show more
Contentlayer

MIT Licenced - A project by Stackbit

Made with 💜 by @schickling & community

DOCS

 * Getting Started
 * Concepts
 * Sources
 * Environments
 * API Reference

EXAMPLES

 * Next.js (TypeScript)

COMMUNITY

 * Twitter
 * Discord
 * GitHub