Content Layer

ContentLayer is a powerful tool for managing content in a Next.js project. We use ContentLayer to handle Markdown and MDX files, which are used to generate the content for your documentation pages.

Configuration

You can configure ContentLayer in the contentlayer.config.ts file. You can find the configuration file in the root of your project.

By default, we keep the MDX files for your documentation pages in the /content directory. You can change this by updating the contentDir property in the configuration file.

Content Types

By default, we provide a single content type: docs. You can find the content files for these types in the content directory.

In ContentLayer, each content type can have a set of fields that define its structure. For example, the Doc content type includes fields like title, description, lastUpdated, breadcrumbs, and related.

You can also specify a set of fields that are automatically generated for each content type. For example, the slug field is automatically generated based on the title attribute of the content file.

How to add a Content Type

To add a new content type, you would define a new document type in contentlayer.config.ts using the defineDocumentType function.

Here's a basic example:

1export const BlogPost = defineDocumentType(() => ({
2  name: "BlogPost",
3  filePathPattern: "**/blog/**/*.mdx",
4  contentType: "mdx",
5  fields: {
6    title: {
7      type: "string",
8      required: true,
9    },
10    // Add more fields as needed
11  },
12  computedFields: computedFields("blog"),
13}))

Then, add the new content type to the documentTypes array in the makeSource function:

1export default makeSource({
2  contentDirPath: "content",
3  documentTypes: [Doc, BlogPost],
4  // ...
5})

Custom fields

We also use custom fields in our content types. These are fields that are not part of the standard set of fields provided by ContentLayer. For example, in the Doc content type, we have a breadcrumbs field that uses a custom nested type Breadcrumb:

1const breadcrumb = defineNestedType(() => ({
2  name: "Breadcrumb",
3  fields: {
4    title: {
5      type: "string",
6      required: true,
7    },
8    href: {
9      type: "string",
10      required: true,
11    },
12  },
13}))

Conclusion

ContentLayer is a powerful tool for managing content in a Next.js project. By understanding how to define and use content types, you can leverage ContentLayer to its full potential in your project.