0.3.1

ℹ️ [TLDR] React Server Components support, Dynamic content fetching (experimental), updated dependencies, bug fixes

React Server Components (RSC) support

We're super excited to announce that Contentlayer now supports React Server Components (RSC) out of the box! 🎉

We've updated our Next.js example to use RSC and it works like a charm. You can find the full example here. (Our docs will be updated shortly as well.)

We now recommend using RSC over the old getStaticProps/getStaticPaths approach. RSC is much more flexible and even allows you to use Contentlayer's dynamic content fetching API (see below).

Note: While it's theoretically also possible to use Contentlayer combined with the 'use client' approach, we don't recommend it as it massively increases page sizes and thus the page load time.

Experimental: Dynamic content fetching (e.g. in React Server Components)

Contentlayer is mostly used to build content-based static sites. However, in some cases it can be required/useful to fetch & process (remote) content dynamically at runtime (e.g. via React Server Components). This is now possible with the new (still experimental) fetchContent API for the contentlayer/source-remote-files content source. (Closes #85).

Here is a shortend example of how to use it (see full example for full details):

// app/some-dynamic-page.tsx
import { fetchContent } from 'contentlayer/generated'

export default function SomeDynamicPage({ }) {
  const contentResult = await fetchContent('some-branch')

  return <div>{content}</div>
}

// contentlayer.config.ts
import { defineDocumentType } from 'contentlayer/source-files'
import { makeSource } from 'contentlayer/source-remote-files'

const Post = defineDocumentType(() => ({
  // ...
}))

const syncContentFromGit = async ({ contentDir, gitTag }: { contentDir: string; gitTag: string }) => {
  // See full example
}

export default makeSource((contentBranch = 'main') => ({
  syncFiles: (contentDir) => syncContentFromGit({ contentDir, gitTag: contentBranch }),
  contentDirPath: `content/repo-${sourceKey}`,
  documentTypes: [Post],
  experimental: { enableDynamicBuild: true },
  //              ^^^^^^^^^^^^^^^^^^ enable dynamic content fetching
}))

Other Improvements

• Fix: Unable to install contentlayer in NextJs v13.2.1 (closes #386)
• Fix: contentType data doesn't support empty files (closes #361)
• Fix: Replace faker with alternative library (closes #217 - thanks @feliskio)
• Fix: Incorrect type inference from Stackbit config (closes #363)