Part 19: Enhancing Your Next.js Blog with Front Matter

[Pages] Loading Data

If you're building a blog or content-driven website with Next.js, using Markdown for your posts can streamline content management. But Markdown alone doesn't support metadata like titles or dates. This is where "front matter" comes in handy. In this post, we'll walk through how to incorporate front matter into your Markdown files and use it in your Next.js application to manage metadata effectively.

What is Front Matter?

Front matter is a block of metadata placed at the beginning of a file, usually in YAML format, enclosed by triple dashes (---). It's a common feature in static site generators and allows you to define properties such as title, date, and more.

Step-by-Step Guide to Using Front Matter

Update Your Markdown File
First, ensure your Markdown file includes a front matter block. For example:
```
// content/posts/first-post.md
---
date: "2021-04-21"
title: "First Post"
---
This is my first post, written in Markdown.

Here's some __bold text__.
```
The front matter here includes a date and title, allowing us to separate metadata from the main content.

Install the gray-matter Library

We'll use the gray-matter library to parse the front matter in our Markdown files. Install it by running:

npm install gray-matter

Update your package.json to include this new dependency:

// package.json
{
  "dependencies": {
    "gray-matter": "^4.0.3",
    "marked": "^9.1.3",
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Update the Data Fetching Logic

Modify your getPost function to parse the front matter and Markdown content:

// lib/posts.js
import { readFile } from 'fs/promises';
import matter from 'gray-matter';
import { marked } from 'marked';

export async function getPost(slug) {
  const source = await readFile(`content/posts/${slug}.md`, 'utf8');
  const { data: { date, title }, content } = matter(source);
  const body = marked(content);
  return { date, title, body };
}

Here, gray-matter separates the data (front matter) and content (Markdown), allowing us to process them individually.

Adjust the Page Component

Update your page component to display the metadata and content:

// pages/posts/first-post.js
import Head from 'next/head';
import { getPost } from '../../lib/posts';

export async function getStaticProps() {
  const post = await getPost('first-post');
  return {
    props: { post },
  };
}

function FirstPostPage({ post }) {
  return (
    <>
      <Head>
        <title>{`${post.title} - My Blog`}</title>
      </Head>
      <main>
        <p>{post.date}</p>
        <h1>{post.title}</h1>
        <article dangerouslySetInnerHTML={{ __html: post.body }} />
      </main>
    </>
  );
}

export default FirstPostPage;

This setup ensures the title and date are displayed alongside the main content, enhancing the page's SEO and readability.

Test and Refactor
After implementing these changes, restart your Next.js server and verify that your page displays the metadata correctly. You can refactor your code to be more concise by destructuring properties and using shorthand syntax where applicable.

Conclusion

Incorporating front matter into your Next.js Markdown files provides a powerful way to manage metadata, making your content more organized and easier to handle. By using gray-matter alongside marked, you can seamlessly parse and display both metadata and content, paving the way for a more dynamic and informative blogging experience. As you continue to develop your site, consider what other metadata might be useful and expand your front matter to include things like tags, categories, or even custom fields.

PreviousPart 18: Transitioning from JSON to Markdown in Next.js: An Easy Guide NextPart 20: Creating a Dynamic Blog with Next.js

Last updated 12 months ago