# Netlify CMS & Next.js Series - Adding markdown content
We're going to be using markdown to create our pages so lets add a markdown loader:
```bash
yarn add frontmatter-markdown-loader -D
```
## Add markdown content
Create a content folder and some sample content:
```bash
filename: content/index.md
---
header:
title: Software development for modern businesses - devfair
description: devfair is your full stack software development experience
logo: /images/devfair-logo.svg
hero:
detail: Work with professional software developers and scrum masters to make your
project a reality. Minimise risk, cost and time compared to traditional
development. Have complete control and insight into your development process, just
like the best tech companies in the world.
heading: Build software like the world's top tech companies do
image: /images/hero.svg
---
```
## next.config.js
Next we need to tell `next.js` how to handle markdown files and where to find them. We do this by creating a `next.config.js` file and adding the following code:
```bash
filename: next.config.js
module.exports = {
webpack: (cfg) => {
cfg.module.rules.push(
{
test: /\.md$/,
loader: 'frontmatter-markdown-loader',
options: { mode: ['react-component'] }
}
)
return cfg;
}
}
```
## Add markdown content to the home page
We can now import the markdown content into the `index.tsx` file:
```xml
filename: index.tsx
import Head from "next/head";
import { attributes } from "../content/index.md";
export default function Index() {
const { header, hero } = attributes;
return (
{header.title}
{hero.heading}
{hero.detail}
);
}
```
**NOTE** at this point you may see a typescript error around the markdown input:
```bash
TS2307: Cannot find module '../content/index.md' or its corresponding type declarations.
```
To fix this error you need to add a declaration to the next-env.d.ts:
```tsx
filename: next-env.d.ts
///
///
declare module "*.md";
```
## Rendered markdown
You should now see the markdown from `content/index.md` rendered on the index page:
