Create A Markdown Blog With Next Js No Experience Needed

Are you looking to create a simple and efficient blog with Next.js but feel overwhelmed by the technical terms and coding involved? Fret not! In this guide, we will walk you through the process step by step, and no prior experience is needed!

Next.js is a popular React framework that simplifies the process of building web applications. Markdown, on the other hand, is a lightweight markup language that is easy to read and write. By combining the two, you can create a user-friendly blog with ease.

To get started, make sure you have Node.js installed on your computer. Node.js will allow you to run JavaScript outside of a browser. You can download and install Node.js from the official website, and once installed, you will have access to the Node Package Manager (npm).

Open your terminal and create a new Next.js project by running the following commands:

Plaintext

npx create-next-app my-blog
cd my-blog
npm install gray-matter remark remark-html

Next, create a new directory called `posts` inside the `pages` directory in your project. This is where you will store your Markdown files that will be converted into blog posts. Each file should have a `.md` extension.

Let's create a sample Markdown file to test our setup. Inside the `posts` directory, create a file named `first-post.md` and add the following content:

Plaintext

---
title: My First Post
---

# Hello World!

This is my first blog post using Markdown and Next.js!

Now, we need to parse the Markdown files and display them on our blog. Open the `pages/posts/[id].js` file in your project and add the following code:

Jsx

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

const Posts = ({ post }) =&gt; (
  <div />
);

export async function getStaticProps({ params }) {
  const filePath = path.join(process.cwd(), 'posts', `${params.id}.md`);
  const fileContents = fs.readFileSync(filePath, 'utf-8');
  const { content, data } = matter(fileContents);

  const processedContent = await remark().use(html).process(content);
  const contentHtml = processedContent.toString();

  return {
    props: {
      post: {
        content: contentHtml
      }
    },
  };
}

export async function getStaticPaths() {
  const postsDirectory = path.join(process.cwd(), 'posts');
  const fileNames = fs.readdirSync(postsDirectory);

  const paths = fileNames.map((fileName) =&gt; ({
    params: { id: fileName.replace(/.md$/, '') },
  }));

  return {
    paths,
    fallback: false,
  };
}

export default Posts;

With this setup, you can now run your Next.js project by executing `npm run dev` in your terminal and navigate to `http://localhost:3000/posts/first-post` in your browser to see your first blog post in action!

Congratulations! You have successfully created a Markdown blog with Next.js without requiring any prior experience. Feel free to customize and enhance your blog further by exploring more features and functionalities offered by Next.js and Markdown. Happy blogging!

Related posts:

Contact Info