# How to set up Content Layer in a Next.js app with the App Router

Sure, here's the corrected markdown code with the necessary formatting fixes:

---

Here are all the steps involved in integrating Content Layer with a NextJs application using the app router, along with code examples:

### Step 1: Setting Up a Next.js Project

First, make sure that you have set up a properly functioning project in Next.js. The following way is how one sets up a Next.js project:

```bash
npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
```

### Step 2: Installing Content Layer

Install Content Layer and dependency modules with:

```bash
npm install contentlayer next-contentlayer
```

### Step 3: Setting up Content Layer

Create `contentlayer.config.js` in your project root:

```javascript
// contentlayer.config.js

import { defineDocumentType, makeSource } from 'contentlayer/source-files'

const BlogPost = defineDocumentType(() => ({
  name: 'BlogPost',
  filePathPattern: `blog/*.md`,
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
    content: { type: 'string', required: true },
  },
}))

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

### Step 4: Create Content Directory and Markdown Files

Create a `content` directory in the root of your project. Inside the `content` directory, create a `blog` directory and add a sample Markdown file:

```plaintext
my-nextjs-app/
├── content/
│   └── blog/
│       └── first-post.md
```

Example [`first-post.md`](http://first-post.md):

```markdown
---
title: "First Post"
date: "2024-07-05"
---

This is the content of the first blog post.
```

### Step 5: Update `next.config.js`

Update `next.config.js` to include the Content Layer plugin:

```javascript
// next.config.js

const { withContentlayer } = require('next-contentlayer')

module.exports = withContentlayer({
  reactStrictMode: true,
})
```

### Step 6: Create Blog Components

With your data ready, it's time to create the UI for it. Create a `pages/blog` directory and add an `[slug].js` to handle individual blog posts:

```javascript
// pages/blog/[slug].js

import { allBlogPosts } from 'contentlayer/generated'
import { useMDXComponent } from 'next-contentlayer/hooks'
import { useRouter } from 'next/router'

export async function getStaticPaths() {
  return {
    paths: allBlogPosts.map(post => ({ params: { slug: post._id.replace(/\.md$/, '') } })),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const post = allBlogPosts.find(post => post._id.replace(/\.md$/, '') === params.slug)
  return { props: { post } }
}

export default function BlogPost({ post }) {
  const MDXContent = useMDXComponent(post.body.code)
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.date}</p>
      <MDXContent />
    </article>
  )
}
```

Now, create an `index.js` inside `pages/blog` to show all the blog posts in a list:

```javascript
// pages/blog/index.js

import Link from 'next/link'
import { allBlogPosts } from 'contentlayer/generated'

export async function getStaticProps() {
  return {
    props: {
      posts: allBlogPosts,
    },
  }
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {posts.map(post => (
          <li key={post._id}>
            <Link href={`/blog/${post._id.replace(/\.md$/, '')}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}
```

### Step 7: Start Your Application

Start your application to see the blog already working:

```bash
npm run dev
```

Now, open [`http://localhost:3000/blog`](http://localhost:3000/blog) and see a list of your blog posts. Click on one to see its content.

---

These are the steps I personally followed for setting up the bog of my AI Interviewing app project, Recroo AI. *You may* [***read the article here***](https://tech.recrooai.com/why-we-used-content-layer-with-nextjs-for-recroo-ais-blog-section) *about why we decided to use Content Layer for the blog section of* [***recrooai.com***](https://recrooai.com)