Developing a Personal Blog with Next.js

Introduction

Creating a personal blog is a wonderful way to share your thoughts, experiences, and expertise with the world. In this tutorial, we will provide an overview of building a simple personal blog using Next.js. This example will cover project setup, creating blog posts, and displaying content on the website.

Setting Up the Project

Ensure you have Node.js and npm installed on your system. If not, you can download and install them from the official website.

Create a new Next.js project using the following commands:

        npx create-next-app personal-blog
cd personal-blog
            

Creating Blog Posts

Blog posts are at the heart of any blog. We'll start by creating a directory for your blog posts and individual Markdown files for each post.

        <!-- pages/posts/my-first-post.md -->
---
title: My First Blog Post
date: 2023-10-01
---
Welcome to my blog! This is my first post.
            

Displaying Blog Posts

To display your blog posts, you'll need to parse the Markdown files and render them on your website. Next.js makes it easy to fetch and render Markdown content using the `gray-matter` and `remark` libraries.

        // pages/index.js
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import remark from 'remark';
import html from 'remark-html';
export async function getStaticProps() {
    const postsDirectory = path.join(process.cwd(), 'pages/posts');
    const fileNames = fs.readdirSync(postsDirectory);
    const posts = fileNames.map(fileName => {
        const fullPath = path.join(postsDirectory, fileName);
        const fileContents = fs.readFileSync(fullPath, 'utf8');
        const { data, content } = matter(fileContents);
        return {
            fileName,
            ...data,
            content
        };
    });
    return {
        props: {
            posts
        }
    };
}
export default function Home({ posts }) {
    return (
        <div>
            <h2>My Blog</h2>
            <ul>
                {posts.map((post, index) => (
                    <li key={index}>
                        <h3>{post.title}</h3>
                        <p>{post.date}</p>
                        <div dangerouslySetInnerHTML={{ __html: remark().use(html).processSync(post.content).toString() }} />
                    </li>
                ))}
            </ul>
        </div>
    );
}
            

Conclusion

You've learned how to create a basic personal blog with Next.js, including project setup, writing and rendering blog posts. In a real-world scenario, you would typically use a database for content management, add user authentication, and include features like comments and categories. You can customize and expand upon this foundation based on your specific blogging needs.