Content Layer

Learn how to use the content layer in your Next.js project.

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.


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.

You can find more information about the configuration options in the ContentLayer documentation.

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.

You can find more information about content type fields in the ContentLayer documentation.

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}))


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.

Last updated 7 months ago
Scroll to top
Was this article helpful?