Contentlayer

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

⚠️ This is a maintained Contentlayer fork. No major breaking changes are expected while discussions are on-going about the project's future.

🚚 For some tips on migrating from the official Contentlayer packages, see the migration guide below.

Getting Started

The video above is a brief look at Contentlayer. Explore further with our example projects, which you can clone to try out locally or in via Gitpod or Stackblitz in your browser.

Migrating to the fork

In many cases, migrating to the contentlayer2 fork from the official packages may be as simple as switching to the forked packages. However, you may encounter a few issues, so this guide will walk you through the process and address those.

Switching to fork packages

Since contentlayer2 doesn't have any breaking API changes, hopefully this is all you need to do. 🤞🏻

1. Replace any Contentlayer packages in your package.json with the corresponding fork package and new version

   -    "contentlayer": "^0.3.3",
   +    "contentlayer2": "^0.4.6",
   -    "next-contentlayer": "^0.3.3",
   +    "next-contentlayer2": "^0.4.6",

2. Update any existing imports to the fork packages

   contentlayer.config.ts

   -import { defineDocumentType, makeSource } from 'contentlayer/source-files';
   +import { defineDocumentType, makeSource } from 'contentlayer2/source-files';

   next.config.js

   -const { withContentlayer } = require('next-contentlayer');
   +const { withContentlayer } = require('next-contentlayer2');

3. Update any package scripts to reference the new contentlayer2 executable

   package.json

   {
      "scripts": {
   -    "build:content": "contentlayer build",
   +    "build:content": "contentlayer2 build",
      }
   }

4. Run a contentlayer2 build and start your Next.js application. If you don't see any errors, you're likely good to go! 🥳

   Otherwise, see below for common compatibility issues. ❤️‍🩹

Upgrading incompatible Remark and Rehype packages

While contentlayer2 is API compatible with contentlayer, it has been updated to use the latest (v11+) Unified toolchain. If your configuration includes Remark or Rehype plugins, you'll likely need to upgrade them.

Common plugins and upgrade paths

• remark-gfm → simply upgrade to 4.0.0
• remark-slug → switch to rehype-slug and move the plugin from remarkPlugins to rehypePlugins in your Contentlayer configuration
• For any custom Remark plugins, you'll need to upgrade unified itself to 11.0.0 or higher along with packages such as unist-util-visit

TypeScript 5.0

The ts-pattern dependency has been updated to the latest version in contentlayer2. This version of ts-pattern requires TypeScript 5+. Unfortunately, it seems the ts-pattern definition files cause compilation errors on older versions of TypeScript, even when skipLibCheck is set to true in your tsconfig.json.

If you can't or don't want to upgrade to TypeScript 5+ yet, you can use your package manager to force ts-pattern 4.3.0 to be installed instead.

• For npm use the overrides field
• For pnpm use the overrides field
• For Yarn use the resolutions field

Tutorial & Documentation

Follow the tutorial to get started building your own project. Or explore the full documentation. Follow the tutorial to get started building your own project. Or explore the full documentation.

Features

• Live reload on content changes
• Fast and incremental builds
• 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)

Supported Content Sources

• Local content (Markdown, MDX, JSON, YAML)
• Contentful (experimental)
• Sanity (considering)
• Notion (considering)

Supported Environments

• Next.js
• Remix (considering)
• SvelteKit (considering)
• Astro (considering)

Roadmap

See our docs for more information on our roadmap.

Community

Join our Discord community to get help, suggest new features, and stay up to date on all things Contentlayer.

Who is using Contentlayer?

• ped.ro
• GraphCMS Docs
• axeldelafosse.com (Source)
• jahir.dev (Source)
• samuelkraft.com (Source)
• nirmalyaghosh.com (Source)
• miryang.dev (Source)
• osiux.ws (Source)
• akhilaariyachandra.com (Source)
• dawchihliou.github.io (Source)
• sergiobarria.com (Source)
• adeecc.vercel.app (Source)
• alpesdream.vercel.app (Source)
• bayukurnia.com (Source)
• makersleague.de (Source)
• thismodernweb.com (Source)
• nikosantis.dev (Source)
• phong.vn (Source)
• dvl.sh
• nicholaswarren.com
• blog.sandromaglione.com
• achintyajha.com (Source)
• datahub.io
• Making Sense of Crypto and Web3
• cretu.dev (Source)
• jarocki.me (Source)
• iyansr.id (Source)
• thisyujeong.dev (Source)
• gipsterya.com
• seankerwin.dev (Source)
• royanger.dev (Source)
• akashrajpurohit.com
• kyoung-jnn.com (Source)
• MrcatDev (Source)
• screfy.com (Source)
• igorkowalczyk.dev (Source)
• christianpenrod.com (Source)
• xahidex.com
• adrianmato.art
• livropog.com.br (Source)
• jakubh.com (Source)
• fiqry.dev (Source)
• soapbox.pub (Source)
• anudeepreddy.dev
• nikhilmohite.com
• shenlu.me (Source)
• chillinmice.dev (Source)
• wibb.me (Source)
• jasongerbes.com (Source)
• Irregular-expressions.com (Source)
• goosebumps.fm (Source)
• willin.wang (Source)
• mateusf.com (Source)
• algolia.com/doc-beta
• prologue.dev(Source)
• justgokul.dev(Source)
• shubhdeepchhabra.in(Source)
• zanreal.net
• devtella
• Modern Developer Blog Template (Digital Garden Starter)(Source)
• floriankiem.com (Source)
• zippystarter

Are you using Contentlayer? Please add your page (and repo) to the end of the list via a PR. 🙏