Create a Blogging Website with Markdown and Next.js

Hello and welcome to my first post! In this tutorial, I'll walk you through the steps to create a blogging website using Markdown and Next.js. Whether you're a seasoned developer or just starting out, this guide is designed to help you get up and running quickly.

Why Choose Next.js?

Next.js is a powerful React framework that offers features like server-side rendering, static site generation, and an easy setup for API routes. It's perfect for building a blogging platform because it combines the best of both worlds: speed and SEO optimization.

Setting Up Your Next.js Project

1. Create a New Next.js Application:

npx create-next-app my-blog
cd my-blog

2. Install Markdown Support: To handle Markdown files, you'll need a library like remark and remark-html. Install them with:

npm install remark remark-html

3. Create a Directory for Your Posts: Organize your blog posts by creating a posts directory:

mkdir posts

4. Add a Sample Markdown File: Create a new Markdown file in the posts directory:

---
title: "My First Blog Post"
date: "2024-10-16"
---

# Welcome to My Blog!

This is my first post using Markdown. I hope you enjoy it!

Fetching Markdown Files

Next, you'll need to fetch the Markdown files and convert them to HTML. Create a utility function in a new file, lib/posts.js:

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';

const postsDirectory = path.join(process.cwd(), '_posts');

export function getSortedPostsData() {
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map(fileName => {
    const id = fileName.replace(/\.md$/, '');
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
    const matterResult = matter(fileContents);

    return {
      id,
      ...matterResult.data,
    };
  });

  return allPostsData.sort((a, b) => (a.date < b.date ? 1 : -1));
}

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const matterResult = matter(fileContents);
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

Creating the Blog Pages

1. List Your Blog Posts: Update pages/index.js to display a list of posts.
2. Dynamic Routing: Create a new file [id].js inside the pages/posts directory to handle individual post pages.

import { getAllPostIds, getPostData } from '../../lib/posts';

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

// In your component
const Post = ({ postData }) => {
  return (
    <article>
      <h1>{postData.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </article>
  );
};

export default Post;

Conclusion

Now you have a basic blogging website set up with Next.js and Markdown! Feel free to expand on this foundation by adding features like pagination, tags, or even comments.

I hope you found this guide helpful. If you have any questions, feel free to reach out. Happy blogging!