Contentlayer is a popular content SDK that transforms your Markdown & MDX content into type-safe JSON data that you can easily import into your React applications.
However, ever since their main sponsor, Stackbit, was acquired by Netlify, Contentlayer has been effectively unmaintained. Couple that with issues like Next.js App Router incompatibility, and it was clear that a drop-in replacement was needed.
Enter Content Collections.
What is Content Collections?
Content Collections is a Contentlayer-inspired content framework created by Sebastian Sdorra. Frustrated by the lack of flexibility in Contentlayer's schema definition (e.g. you can't define an email
or url
type for a given field), Sebastian decided to create a drop-in replacement for Contentlayer that addresses these limitations.
Why Content Collections?
Here are several reasons why Content Collections is the best drop-in successor to Contentlayer:
1. Zod-powered Schema Validation
If you're already using Zod for schema validation, Content Collections will feel like second nature to you. To define a collection schema, you can easily use the schema
attribute, which comes with a Zod parameter z
:
2. Native Fumadocs integration
The creator of Fumadocs – an increasingly popular open-source documentation framework used by projects like Million and Turborepo – recently added native support for Content Collections.
Interestingly, support for Contentlayer has also been deprecated.
3. Compatible with Next.js App Router
Content Collections is compatible with Next.js App Router and React Server Components (RSC).
For example, to render the GitHub repository cards in this blog post, you can create a server component that fetches the latest stats for the repository and renders a React component:
Then, include it in your MDX content:
4. Actively maintained by an incredible developer
Content Collections is actively maintained by Sebastian Sdorra. If you've enjoyed using Content Collections, we highly recommend sponsoring Sebastian to help him maintain this project.
How to migrate from Contentlayer to Content Collections?
Since Content Collections is a drop-in replacement for Contentlayer, migrating from Contentlayer to Content Collections is fairly straightforward.
First, install the required Content Collections packages.
If you're using Next.js, you'll also need to install @content-collections/next
as well as @content-collections/mdx
for MDX support.
Then, adjust your tsconfig.json
file:
Next, update your next.config.js
file:
Next, add a content-collections.ts
file at the root of your project. As you can see, the main difference is the usage of Zod for schema validation.
If you're using any Remark or Rehype plugins, you'll need to update them accordingly as well. Since Content Collections does not compile or parse the content by default, you'll need to use the transform
option to pass the plugins to the compiler:
The reason why Content Collections does not parse or compile the content by default is for flexibility - you can essentially bring your own Markdown formatter/library and use it with Content Collections.
Finally, update your imports to use the new content-collections
source. This can be as simple as doing a CMD+SHIFT+F
and replacing contentlayer/generated
with content-collections
.
You might also need to update your MDX component's code
attribute as well:
Finally, remove any Contentlayer dependencies and files from your project.
And voilà! You've successfully migrated your project from Contentlayer to Content Collections.
Scale your content pipeline with Content Collections
We're very excited about what this migration to Content Collections unlocks for Dub. Not only does it give us a much better developer experience with its Zod schema validation, but it also allows us to ensure our content pipeline is more robust and reliable in the long run.
As always, our codebase is fully open-source, so feel free to check it out and learn more about the latest tech we're using at Dub:
And if you're looking for an actively maintained, modern alternative to Contentlayer, we highly recommend giving Content Collections a try.