search

timlrx / contentlayer2

Contentlayer turns your content into data - making it super easy to import MD(X) and CMS content in your app
https://contentlayer.dev
MIT License
192 stars 12 forks source link

readme

  Contentlayer Discord

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.

Video Thumbnail

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

StackBlitz

Contentlayer Playground

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

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.

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

Supported Content Sources

Supported Environments

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?

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