claudemesh/.context/turbostarter-framework-context/sections/web/cms/content-collections.md

title, description, url

title	description	url
Content Collections	Get started with Content Collections.	/docs/web/cms/content-collections

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

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:

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: doc._meta.directory,
      locale: doc._meta.fileName.split(".")[0],
    };
  },
});

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.

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.

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:

import { content } from "@turbostarter/cms";

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string; locale: string }>;
}) {
  const item = getContentItemBySlug({
    collection: CollectionType.LEGAL,
    slug: (await params).slug,
    locale: (await params).locale,
  });

  return <h1>{title}</h1>;
}

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