### Install Contentlayer Dependencies

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

Installs Contentlayer, the Next.js plugin, and the date-fns utility for date handling.

```bash
npm install contentlayer next-contentlayer date-fns
```

--------------------------------

### Contentlayer Getting Started and Concepts

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/index.mdx

Guides for getting started with Contentlayer and understanding its core concepts. It highlights building a blog with Next.js and explains the internal workings of Contentlayer.

```javascript
// Example usage for Getting Started
// Assuming a Next.js project setup with Contentlayer

// In your Next.js page or component:
// import { allPosts } from 'contentlayer/generated';
// console.log(allPosts);

// For Concepts, refer to the documentation for detailed explanations on:
// - Why use Contentlayer
// - How Contentlayer works under the hood
```

--------------------------------

### Local Setup Commands

Source: https://github.com/contentlayerdev/website/blob/main/README.md

Commands to install dependencies and start the development server for the Contentlayer website. Requires Node.js and npm.

```bash
npm install
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/125-notion/100-getting-started.mdx

Installs the necessary packages for integrating Contentlayer with Notion and using the Notion JS SDK.

```text
npm install contentlayer-source-notion @notionhq/client
```

--------------------------------

### Example Post Markdown Content

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

An example of a markdown file (`posts/post-01.md`) with frontmatter defining the title and date for a blog post.

```txt
---
title: My First Post
date: 2021-12-24
---

Ullamco et nostrud magna commodo nostrud ...
```

--------------------------------

### Running the Next.js App

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/125-notion/100-getting-started.mdx

This command initiates the Next.js development server, allowing you to view your blog site locally. After running this command, you can access your blog at `localhost:3000` in your web browser.

```text
npm run dev
```

--------------------------------

### Create Next.js Project

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

Initializes a new Next.js project with TypeScript, Tailwind CSS, and App Router support using create-next-app.

```bash
npx create-next-app@latest --typescript --tailwind --experimental-app --eslint contentlayer-example
```

--------------------------------

### Configure Notion Source Plugin (Basic)

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/125-notion/100-getting-started.mdx

Sets up the Contentlayer configuration with the Notion source plugin, initializing the Notion client with an authentication token.

```javascript
import { makeSource, defineDatabase } from 'contentlayer-source-notion'
import { Client } from '@notionhq/client'

const client = new Client({ auth: process.env.NOTION_TOKEN })

export default makeSource({
  client,
  databaseTypes: [],
})
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

Changes the current directory to the newly created Next.js project.

```bash
cd contentlayer-example
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

This command initiates the Next.js development server, allowing you to view the blog locally. After running this command, you can access the application by navigating to `localhost:3000` in your web browser.

```txt
npm run dev
```

--------------------------------

### Configure Next.js with Contentlayer

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

Wraps the Next.js configuration with `withContentlayer` to integrate Contentlayer into the build process.

```js
// next.config.js
const { withContentlayer } = require('next-contentlayer')

/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: true, swcMinify: true }

module.exports = withContentlayer(nextConfig)
```

--------------------------------

### Ignore Contentlayer Build Output

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

Adds the `.contentlayer` directory to `.gitignore` to prevent version control conflicts and ensure fresh data on each build.

```bash
# .gitignore

# ...

# contentlayer
.contentlayer
```

--------------------------------

### Contentlayer Configuration Example

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

This snippet demonstrates a basic configuration for Contentlayer, showing how to define document types and their schema. It's a common starting point for integrating Contentlayer into a project.

```javascript
import { defineDocumentType, defineNestedType, ContentCollection } from 'contentlayer/source-files'

const Author = defineNestedType({
  name: 'Author',
  fields: {
    name: { type: 'string', required: true },
    handle: { type: 'string', required: true },
    avatar: { type: 'string', required: true },
  },
})

export const Post = defineDocumentType({
  name: 'Post',
  filePathPattern: 'posts/**/*.md',
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'string', required: true },
    cover_image: {
      type: 'object',
      fields: {
        url: { type: 'string', required: true },
        alt: { type: 'string', required: true },
        width: { type: 'number' },
        height: { type: 'number' },
      },
    },
    authors: {
      type: 'list',
      of: Author,
      required: true,
    },
    excerpt: { type: 'string', required: true },
    tags: {
      type: 'list',
      of: { type: 'string' },
    },
    related_posts: {
      type: 'list',
      of: { type: 'string' },
    },
  },
  computedFields: {
    url: {
      type: 'string',
      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
    },
    readingTime: {
      type: 'json',
      resolve: (doc) => readingTime(doc.body.raw),
    },
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath,
    },
  },
})

export const collections = {
  posts: Post,
}

```

--------------------------------

### Install Dependencies

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/600-integrations/100-stackbit/100-tutorial.mdx

Installs the necessary packages for Stackbit and Contentlayer integration with a Next.js project.

```txt
npm install contentlayer next-contentlayer @contentlayer/experimental-source-files-stackbit
```

--------------------------------

### Contentlayer Configuration Example

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

Example of how to configure Contentlayer in your Next.js project, specifying content sources and formats.

```javascript
import { defineDocumentType, makeSource } from 'contentlayer/source'

// Define document types
export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.md`,
  fields: {
    title: {
      type: 'string',
      description: 'The title of the post',
      required: true,
    },
    date: {
      type: 'date',
      description: 'The date of the post',
      required: true,
    },
  },
  computedFields: {
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath,
    },
  },
}))

// Make source
export default makeSource({
  contentDir: 'content',
  documentTypes: [Post],
})
```

--------------------------------

### Replace Home Page with Post Listing

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

This snippet shows how to replace the default Next.js home page (`app/page.tsx`) with a dynamic listing of all blog posts. It imports post data from `contentlayer/generated`, sorts them chronologically, and renders each post using a `PostCard` component. Dependencies include `next/link`, `date-fns` for date formatting, and `contentlayer/generated` for post data.

```jsx
// app/page.tsx
import Link from 'next/link'
import { compareDesc, format, parseISO } from 'date-fns'
import { allPosts, Post } from 'contentlayer/generated'

function PostCard(post: Post) {
  return (
    <div className="mb-8">
      <h2 className="mb-1 text-xl">
        <Link href={post.url} className="text-blue-700 hover:text-blue-900 dark:text-blue-400">
          {post.title}
        </Link>
      </h2>
      <time dateTime={post.date} className="mb-2 block text-xs text-gray-600">
        {format(parseISO(post.date), 'LLLL d, yyyy')}
      </time>
      <div className="text-sm [&>*]:mb-3 [&>*:last-child]:mb-0" dangerouslySetInnerHTML={{ __html: post.body.html }} />
    </div>
  )
}

export default function Home() {
  const posts = allPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)))

  return (
    <div className="mx-auto max-w-xl py-8">
      <h1 className="mb-8 text-center text-2xl font-black">Next.js + Contentlayer Example</h1>
      {posts.map((post, idx) => (
        <PostCard key={idx} {...post} />
      ))}
    </div>
  )
}
```

--------------------------------

### Configure TypeScript Paths

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

Adds paths to `tsconfig.json` to correctly resolve generated Contentlayer files, improving editor support and imports.

```json
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "contentlayer/generated": ["./.contentlayer/generated"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".contentlayer/generated"
  ]
}
```

--------------------------------

### Next.js Integration Example

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

This example demonstrates how to fetch and use Contentlayer data within a Next.js application, specifically for rendering blog posts. It shows the basic pattern for accessing generated content.

```jsx
import type { Posts } from '.contentlayer/generated'
import { allPosts } from '.contentlayer/generated'

export const getStaticProps = async () => {
  const posts = allPosts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
  return { props: { posts } }
}

const Blog = ({ posts }: { posts: Posts }) => {
  return (
    <>
      {posts.map((post) => (
        <div key={post._id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </>
  )
}

export default Blog

```

--------------------------------

### Add Post Layout for Individual Posts

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

This snippet defines the layout for individual blog post pages (`app/posts/[slug]/page.tsx`). It generates static paths for all posts, sets metadata for each post (like the title), and renders the post content. It imports post data from `contentlayer/generated` and uses `date-fns` for date formatting. This resolves the 404 errors encountered when clicking on post links.

```jsx
// app/posts/[slug]/page.tsx
import { format, parseISO } from 'date-fns'
import { allPosts } from 'contentlayer/generated'

export const generateStaticParams = async () => allPosts.map((post) => ({ slug: post._raw.flattenedPath }))

export const generateMetadata = ({ params }: { params: { slug: string } }) => {
  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
  if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
  return { title: post.title }
}

const PostLayout = ({ params }: { params: { slug: string } }) => {
  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
  if (!post) throw new Error(`Post not found for slug: ${params.slug}`)

  return (
    <article className="mx-auto max-w-xl py-8">
      <div className="mb-8 text-center">
        <time dateTime={post.date} className="mb-1 text-xs text-gray-600">
          {format(parseISO(post.date), 'LLLL d, yyyy')}
        </time>
        <h1 className="text-3xl font-bold">{post.title}</h1>
      </div>
      <div className="[&>*]:mb-3 [&>*:last-child]:mb-0" dangerouslySetInnerHTML={{ __html: post.body.html }} />
    </article>
  )
}

export default PostLayout

```

--------------------------------

### Define Notion Database Schema

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/125-notion/100-getting-started.mdx

Defines a custom database schema for Contentlayer, specifying the database ID, query filters, property mappings, and computed fields like the post URL.

```javascript
import { makeSource, defineDatabase } from 'contentlayer-source-notion'
import * as notion from '@notionhq/client'

const client = new notion.Client({ auth: process.env.NOTION_TOKEN })

export const Post = defineDatabase(() => ({
  name: 'Post',
  databaseId: '<databaseId>',
  query: {
    filter: {
      property: 'Status',
      status: {
        equals: 'Published',
      },
    },
  },
  properties: {
    date: {
      name: 'Created time',
    },
  },
  computedFields: {
    url: {
      type: 'string',
      resolve: (post) => `/posts/${post._id}`,
    },
  },
}))

export default makeSource({
  client,
  databaseTypes: [Post],
})
```

--------------------------------

### Define Contentlayer Document Schema

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/100-getting-started/index.mdx

Defines a 'Post' document type for Markdown files in the 'posts' directory, specifying fields like title and date, and a computed URL field.

```js
// contentlayer.config.ts
import { defineDocumentType, makeSource } from 'contentlayer/source-files'

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.md`,
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
  },
  computedFields: {
    url: { type: 'string', resolve: (post) => `/posts/${post._raw.flattenedPath}` },
  },
}))

export default makeSource({ contentDirPath: 'posts', documentTypes: [Post] })
```

--------------------------------

### Install Notion Render Client

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/125-notion/400-configure-renderer.mdx

Installs the `@notion-render/client` package, which is used by `contentlayer-source-notion` for rendering Notion rich text content into HTML.

```text
npm install @notion-render/client
```

--------------------------------

### Joining the Contentlayer Community

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

Provides instructions and links for community engagement, including following the tutorial, exploring examples, joining the Discord community, and contributing to the GitHub repository.

```markdown
- Following [the tutorial](/docs/getting-started) and using Contentlayer into your project.
- Looking through [examples](/examples/nextjs) and other open-source projects created with Contentlayer.
- Joining our welcoming [Discord community](https://discord.gg/rytFErsARm).
- Reporting issues in the [GitHub repository](https://github.com/contentlayerdev/contentlayer) - Please also consider starring the repo 🌟
```

--------------------------------

### Contentlayer CLI Help Output

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/100-cli.mdx

Provides an example of the detailed output when running the Contentlayer CLI with the --help flag, listing available commands and general options.

```txt
━━━ Contentlayer CLI - 0.0.34 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  $ contentlayer <command>

━━━ General commands ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  contentlayer build [-c,--config #0] [--clearCache] [--verbose]
    Transforms your content into static data

  contentlayer dev [-c,--config #0] [--clearCache] [--verbose]
    Same as "contentlayer build" but with watch mode

You can also print more details about any of these commands by calling them
with the `-h,--help` flag right after the command name.
```

--------------------------------

### Update Post Fetching in Next.js with Contentlayer

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/125-notion/100-getting-started.mdx

This code snippet demonstrates how to update the `getStaticPaths` and `getStaticProps` functions in a Next.js application to fetch posts using their IDs. It replaces the previous method of using `post._raw.flattenedPath` with `post._id` for more robust post identification. The `PostLayout` component is also shown, which uses the fetched post data to display the title, date, and body.

```js
import Head from 'next/head'
import Link from 'next/link'
import { format, parseISO } from 'date-fns'
import { allPosts } from 'contentlayer/generated'

export async function getStaticPaths() {
  const paths = allPosts.map((post) => post.url)
  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const post = allPosts.find((post) => post._id === params.slug)
  return {                             ^^^^^^^^
    props: {
      post,
    },
  }
}

const PostLayout = ({ post }) => {
  return (
    <>
      <Head>
        <title>{post.title}</title>
      </Head>
      <article className="mx-auto max-w-2xl py-16">
        <div className="mb-6 text-center">
          <Link href="/">
            <a className="text-center text-sm font-bold uppercase text-blue-700">Home</a>
          </Link>
        </div>
        <div className="mb-6 text-center">
          <h1 className="mb-1 text-3xl font-bold">{post.title}</h1>
          <time dateTime={post.date} className="text-sm text-slate-600">
            {format(parseISO(post.date), 'LLLL d, yyyy')}
          </time>
        </div>
        <div className="cl-post-body" dangerouslySetInnerHTML={{ __html: post.body.html }} />
      </article>
    </>
  )
}
```

--------------------------------

### Install next-contentlayer Plugin

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/400-environments/100-nextjs.mdx

Installs the next-contentlayer plugin using npm. This plugin is essential for integrating Contentlayer into a Next.js project.

```txt
npm install next-contentlayer
```

--------------------------------

### Contentlayer Example Usage

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/working-with-content-is-hard-for-developers.mdx

Demonstrates how to define and use content with Contentlayer, showcasing its approach to content as data.

```javascript
import { defineDocumentType, makeSource } from 'contentlayer/source'

const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.md`,
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'string', required: true },
  },
  computedFields: {
    url: {
      type: 'string',
      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
    },
  },
}))

export default makeSource({
  contentDirPath: 'content',
  documentTypes: [Post],
})
```

--------------------------------

### Basic makeSource Usage

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/250-source-notion/100-make-source.mdx

Demonstrates the basic setup for makeSource in contentlayer.config.js, importing the function and exporting the configuration object.

```ts
import { makeSource } from 'contentlayer-source-notion'

export default makeSource({
  /* options */
})
```

--------------------------------

### Configure next-contentlayer with createContentlayerPlugin

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-next-contentlayer.mdx

The `createContentlayerPlugin` function allows for custom configuration of the next-contentlayer plugin. This is useful for advanced setups, but `withContentlayer` is recommended for typical usage.

```javascript
import { createContentlayerPlugin } from 'next-contentlayer'

const withContentlayer = createContentlayerPlugin({
  // Additional Contentlayer config options
})

export default withContentlayer({
  // Your Next.js config...
})
```

--------------------------------

### Basic MDX Content Example

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/100-files/400-mdx.mdx

Demonstrates a simple MDX file structure including markdown text, JSX elements, and custom components.

```md
# Hello, World!\n\nThis is my first MDX file. Here's a button element <button>Click me!</button>.\n\n<MyComponent />
```

--------------------------------

### Contentlayer TypeScript Support Example

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

Demonstrates how Contentlayer provides auto-generated TypeScript type definitions for document types, enhancing type safety and developer experience.

```typescript
// Auto-generated TypeScript type definitions for each document type.
```

--------------------------------

### makeSource with Notion Renderer Configuration

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/250-source-notion/100-make-source.mdx

Illustrates configuring the Notion renderer for transforming Notion Blocks into HTML within the makeSource setup.

```js
import { NotionRenderer } from '@notion-render/client'
import { makeSource } from 'contentlayer-source-notion'

const renderer = new NotionRenderer()

export default makeSource({
  renderer
})
```

--------------------------------

### All Documents Manifest Example

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/100-files/200-generated-data.mdx

Demonstrates the structure of the main manifest file, which exports all document collections and a combined `allDocuments` array. It also includes the `isType` utility.

```js
export { isType } from 'contentlayer/client'

export * from './allPages.mjs'
import { allPages } from './allPages.mjs'

export const allDocuments = [...allPages]
```

--------------------------------

### Contentlayer CLI Usage

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/100-cli.mdx

Demonstrates the basic usage of the Contentlayer CLI and how to access help information.

```txt
contentlayer <command> [options]
contentlayer --help
```

--------------------------------

### Stackbit Configuration

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/600-integrations/100-stackbit/100-tutorial.mdx

Defines the Stackbit configuration, including project settings and content models. It specifies the 'Page' model with a required 'title' field and a URL path pattern.

```ts
import type * as Stackbit from '@stackbit/sdk'

const stackbitConfig: Stackbit.RawConfig = {
  stackbitVersion: '~0.6.0',
  cmsName: 'git',
  ssgName: 'nextjs',
  nodeVersion: '16',
  dataDir: 'content/data',
  pagesDir: 'content/pages',
  models: {
    Page: {
      type: 'page',
      hideContent: true,
      urlPath: '/{slug}',
      fields: [
        {
          type: 'string',
          name: 'title',
          default: 'This is a new page',
          required: true,
        },
      ],
    },
  },
}

export default stackbitConfig
```

--------------------------------

### Build Performance Comparison

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

Presents a comparison of build performance between Contentlayer, DIY content processing, and Gatsby, based on a benchmark study involving over 1,000 markdown content files. Contentlayer shows nearly twice the speed in both initial and warm builds.

```markdown
We put our claims to the test and [built a simple benchmark study](https://github.com/contentlayerdev/contentlayer-benchmarks) that compared a Next.js site with 1,000+ markdown content files to the same site using a DIY content processing method. We then built the same site with Gatsby.

In both cases, using Contentlayer was nearly **twice as fast**. Even when we tested against warm builds, where the frameworks could make use of cached artifacts from previous builds, Contentlayer was still nearly twice as fast. (Note these numbers might differ on machines with more CPUs as Contentlayer doesn't yet support [parallel content processing](https://github.com/contentlayerdev/contentlayer/issues/60).)
```

--------------------------------

### Configure Contentlayer Source

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/600-integrations/100-stackbit/100-tutorial.mdx

Configures the Contentlayer source using `makeSource`, specifying the content directory and the document types derived from the Stackbit configuration. This enables Contentlayer to build content from the specified directory.

```ts
import { makeSource } from '@contentlayer/source-files'
import { stackbitConfigToDocumentTypes } from '@contentlayer/experimental-source-files-stackbit'
import stackbitConfig from './stackbit.config.js'

const documentTypes = stackbitConfigToDocumentTypes(stackbitConfig, {
  // document type extensions ...
})

export default makeSource({ contentDirPath: 'content', documentTypes })
```

--------------------------------

### Contentlayer CLI Usage

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

This snippet shows how to use the Contentlayer CLI to generate the content types. It's essential for setting up the content processing pipeline.

```bash
npx contentlayer generate
```

--------------------------------

### Contentlayer Future Roadmap

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

Outlines the future development plans for Contentlayer leading up to its stable 1.0 release, including adding support for more content sources (Contentful, Notion), integrating with more site frameworks (Vite, Remix, Astro), and evolving core abstractions.

```markdown
- Add support for more content sources (e.g. [Contentful](https://github.com/contentlayerdev/contentlayer/issues/173), [Notion](https://github.com/contentlayerdev/contentlayer/issues/174), ...) and even supporting [multiple content sources](https://github.com/contentlayerdev/contentlayer/issues/84) in a single project
- Providing seamless integrations for more site frameworks (such as [Vite](https://github.com/contentlayerdev/contentlayer/issues/179), [Remix](https://github.com/contentlayerdev/contentlayer/issues/169), [Astro](https://github.com/contentlayerdev/contentlayer/issues/171), ...)
- Validate and evolve the core abstractions of Contentlayer to avoid breaking changes after the 1.0 release
```

--------------------------------

### Parsed Markdown Content

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of the resulting JSON structure for a markdown field, showing 'raw' and 'html' output.

```json
{
  "description": {
    "raw": "Hello world",
    "html": "<p>Hello world</p>"
  }
}
```

--------------------------------

### Parsed MDX Content

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of the resulting JSON structure for an mdx field, showing 'raw' and 'code' output.

```json
{
  "description": {
    "raw": "Hello world",
    "code": "var Component=(()=>{var m=Object.create ..."
  }
}
```

--------------------------------

### Content File with String List

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of content file structure for a list of strings, specifically for the 'tags' field.

```yaml
---
tags:
  - My First Tag
  - Another Tag
---
```

--------------------------------

### Contentlayer CLI Options

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/100-cli.mdx

Lists and describes the common options available for Contentlayer CLI commands, including config, clearCache, verbose, and help.

```txt
config (alias: -c)
  Use a custom config file path. Both contentlayer.config.ts and contentlayer.config.js work by default.

clearCache
  Clears the .contentlayer/generated directory before running the specified command.

verbose
  Adds more detailed output when running a command.

help
  Generates usage instructions and options for the CLI. Does not require an associated command.
```

--------------------------------

### Content File with Nested Objects List

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of content file structure for a list of nested objects, specifically for the 'tags' field.

```yaml
---
tags:
  - title: My First Tag
  - title: Another Tag
---
```

--------------------------------

### Frontmatter Image Reference

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/100-files/500-images.mdx

Example of how to reference an image file in the frontmatter of a content file. The path is relative to the public/static directory.

```yaml
---
title: Why Contentlayer is Awesome
image: /images/why-contentlayer.png
# ...
---
```

--------------------------------

### Contentlayer Benefits

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

Highlights the key advantages of using Contentlayer for content management, including simplified content processing, TypeScript support, automatic validation, caching, live reload, and flexible content modeling.

```markdown
- Content just works: Gone are the days of writing low-level content-processing logic. Instead, you set the rules
    and the content _just works_.
- TypeScript Support: Auto-generated TypeScript type definitions every document type.
- Content validation: Content is validated automatically with helpful error messages.
- Caching: Content builds are cached and incrementally regenerated - doing only the minimal amount of work
    necessary when changing your content.
- Live reload: The browser will automatically reload after changing content for those frameworks that support live
    reloading.
- Flexible content modeling: Contentlayer allows you to structure your content in a flexible and powerful way.
```

--------------------------------

### Define String Field

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Provides an example of defining a 'string' field type in Contentlayer, highlighting its usage for text content and marking it as required.

```javascript
defineDocumentType(() => ({
  // ...
  fields: {
    title: {
      type: 'string',
      required: true,
    },
  },
}))
```

--------------------------------

### Define Document Type with String Field

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of defining a document type with a single 'title' field of type string. This field is not required.

```js
defineDocumentType(() => ({
  // ...
  fields: {
    title: { type: 'string' },
  },
}))
```

--------------------------------

### Define Document Type with Markdown Field

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of defining a document type with a 'description' field of type markdown. It provides 'raw' and 'html' properties.

```js
defineDocumentType(() => ({
  // ...
  fields: {
    // ...
    description: {
      type: 'markdown',
    },
  },
}))
```

--------------------------------

### Notion Source API Reference

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/300-sources/125-notion/index.mdx

Reference for the `contentlayer/notion-source` module, including functions for making a source, defining databases, and working with properties.

```APIDOC
contentlayer/notion-source Module:

makeSource(options)
  - Creates a Contentlayer source from Notion.
  - Parameters:
    - options: An object containing configuration options for the Notion source.

defineDatabase(options)
  - Defines a Notion database schema.
  - Parameters:
    - options: An object containing configuration options for the database schema.

Properties Reference:
  - Provides details on how to configure and work with Notion page properties within Contentlayer.
```

--------------------------------

### Define Document Type with MDX Field

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of defining a document type with a 'description' field of type mdx. It provides 'raw' and 'code' properties.

```js
defineDocumentType(() => ({
  // ...
  fields: {
    description: {
      type: 'mdx',
    },
  },
}))
```

--------------------------------

### Define Document Type with String List Field

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of defining a document type with a 'tags' field of type list, expecting an array of strings.

```js
defineDocumentType(() => ({
  // ...
  fields: {
    tags: {
      type: 'list',
      of: { type: 'string' },
    },
  },
}))
```

--------------------------------

### Define Document Type with Boolean Field

Source: https://github.com/contentlayerdev/website/blob/main/content/docs/500-reference/200-source-files/400-field-types.mdx

Example of defining a document type with a 'isActive' field of type boolean. It includes a default value of false.

```js
defineDocumentType(() => ({
  // ...
  fields: {
    isActive: {
      type: 'boolean',
      default: false,
    },
  },
}))
```

--------------------------------

### Using Contentlayer in Next.js

Source: https://github.com/contentlayerdev/website/blob/main/content/blog/beta.mdx

Demonstrates how to import and use content managed by Contentlayer within a Next.js page component.

```javascript
import { allPosts } from 'contentlayer/generated'
import { useMDX } from 'next-contentlayer'

export default function PostLayout({ post }) {
  const MDXContent = useMDX(post.body.code)

  return (
    <article>
      <h1>{post.title}</h1>
      <time dateTime={post.date}>{post.date}</time>
      <div>
        <MDXContent />
      </div>
    </article>
  )
}

export async function getStaticPaths() {
  const paths = allPosts.map((post) => post.slug)

  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const post = allPosts.find((post) => post.slug === params.slug)
  return { props: { post } }
}
```