Content Collections

By default, TurboStarter uses Content Collections to store and retrieve content from the MDX files.

Content from there is used to populate data in the following places:

Blog
Legal pages
Documentation

Why content-collections?

It is a great alternative to headless CMS like Contentful or Prismic based on MDX (a more powerful version of markdown). It is free, open source and the content is located right in your repository.

Of course, you can add more collections and views, as it's very flexible.

Defining new collection

To define a new collection, you need to create a new file in the packages/cms/src/collections directory:

packages/cms/src/collections/legal/index.ts

import { defineCollection } from "@content-collections/core";
 
export const legal = defineCollection({
  name: "legal",
  directory: "src/collections/legal/content",
  include: "**/*.mdx",
  schema: (z) => ({
    title: z.string(),
    description: z.string(),
  }),
  transform: async (doc, context) => {
    const mdx = await transformMDX(doc, context);
 
    return {
      ...mdx,
      slug: slugify(doc.title, { lower: true }),
    };
  },
});

Then it's passed to the config in packages/cms/content-collections.ts file which is used to generate types and parse content from MDX files.

packages/cms/content-collections.ts

import { defineConfig } from "@content-collections/core";
 
import { legal } from "./src/collections/legal";
 
export default defineConfig({
  collections: [legal],
});

When you run a development server, content collections will be automatically rebuilt (in .content-collections directory) and you will be able to import the content and metadata of each file in your application.

It's fully type-safe!

By exporting the generated content you get fully type-safe API to interact with the content. We can have type safety on the data that we're receiving from the MDX files.

Using content collections

To get some content from @turbostarter/cms package, you need to use the exposed API that we described in the Overview section:

apps/web/src/app/(client)/(marketing)/legal/[slug]/page.tsx

import { content } from "@turbostarter/cms";
 
export default function Page({ params }: { params: { slug: string } }) {
  const { title } = getContentItemBySlug({
    collection: CollectionType.LEGAL,
    slug: params.slug,
  });
 
  return <h1>{title}</h1>;
}

Voila! You can now access the content from the MDX files.

content-collections.dev

MDX

mdxjs.com

Content Collections

Defining new collection

Using content collections

Content Collections

MDX

On this page