23 Oct 2020·3 min read

Netlify CMS & Next.js Series - Adding markdown content

#netlify #nextjs #headless-cms #react

We're going to be using markdown to create our pages so lets add a markdown loader:

yarn add frontmatter-markdown-loader -D

Add markdown content

Create a content folder and some sample content:

filename: content/index.md

  title: Software development for modern businesses - devfair
  description: devfair is your full stack software development experience
  logo: /images/logo.svg
  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 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:

filename: next.config.js

module.exports = {
    webpack: (cfg) => {
                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:

filename: index.tsx

import Head from "next/head";
import { attributes } from "../content/index.md";

export default function Index() {
  const { header, hero } = attributes;

  return (
    <div className="p-4">
        <meta name="description" content={header.description} />
        <link rel="icon" href="/favicon.ico" />

        <h1 className="text-6xl">{hero.heading}</h1>

        <p className="mt-0 mb-4 text-gray-600">{hero.detail}</p>

NOTE at this point you may see a typescript error around the markdown input:

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:

filename: next - env.d.ts;

/// <reference types="next" />
/// <reference types="next/types/global" />
declare module '*.md';

Rendered markdown

You should now see the markdown from content/index.md rendered on the index page: