🌀Cara Buat Static Post Blog di Next.js dengan Markdown File

Halo teman-teman dev, dikesempatan kali ini saya mau share cara buat static post blog di Next.js dengan markdown file.

Dengan menggunakan markdown file atau .md, kita bisa membuat static blog tanpa bantuan pihak ketiga. Secara SEO juga lebih bagus karena postingan yang kita buat langsung di render dari web host utama.

Oke, sebelum masuk ke tutorial, apa aja sih yang kita butuhkan?

• Project Next.js
• Library FS, Matter dan Markdown-it

Tidak perlu bingung bagaimana cara install nya, kita langsung ke tkp.

Buat Project Next.js

Buat Project Next.js (skip jika sudah ada)

Buka project Next.js , jika belum ada silahkan buat project dulu

Sebagai contoh:

npx create-next-app@latest

What is your project named? nextjs-post-blog
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? Yes
What import alias would you like configured? @/*

Buat Folder Post

Selanjutnya buat folder post, tempat dimana kita menyimpan kumpulan post, terserah mau dikasih nama, post, blog, meme, pokoknya bebas.

Sebagai contoh, buat saja dengan nama meme, jadi saya postingan meme di dalam folder meme.

Buat File .md

Selanjutnya kita membuat file .md di dalam folder meme, dengan format nama-file.md dan didalam file .md, kita bisa isi dengan nilai dari properti yang kita butuhkan saat postingan di render, seperti judul, tag, thumbnail, date, dan lain-lain.

Berikut contoh isi file .md:

---
title: "Isi dengan title"
description: "Isi dengan deskripsi"
author: "Ferry Ganteng"
category: "Blog"
date: "2023-05-15"
bannerImage: "https://LINK-BANNER-DENGAN-FORMAT-GAMBAR"
tags:
  - tag1
  - tag2
---

## Judul
Isi konten
###sub judul
isi konten

Buat Pages Post

Setelah itu kita buat pages baru di folder pages, karena kita menyimpan postingan di dalam folder meme, maka saya buat file baru di dalam pages dengan nama meme.js.

meme.js

File ini kita gunakan untuk menampilkan daftar file markdown yang kita buat di dalam folder meme, bagian ini bisa disesuaikan sesuai selera.

/* eslint no-use-before-define: 0 */ // --> OFF
import fs from "fs";
import matter from "gray-matter";
import Link from "next/link";
import "../app/layout";

// The Meme Page Content
export default function Meme({ meme }) {
  return (
    <div>
      <div className="text-center sticky top-0 bg-neutral-900 pb-2 border-b-2">
        <h1 className="mb-2">Blog</h1>
        <span>Kumpulan meme</span>
      </div>
      {meme.map((post, index) => {
        //extract slug and frontmatter
        const { slug, frontmatter } = post;
        //extract frontmatter properties
        const { title, author, category, date, bannerImage, tags } =
          frontmatter;
        //JSX for individual meme listing
        return (
          <div key={index} className="bg-neutral-900">
            <div className="px-60 md:px-2">
              <Link href={`/meme/${slug}`}>
                <article
                  key={title}
                  className="p-4 border-b-2 hover:bg-neutral-800 "
                >
                  <p>{title}</p>
                  <p>{date}</p>
                </article>
              </Link>
            </div>
          </div>
        );
      })}

      <div className="container sticky bottom-0 h-16 text-center bg-neutral-900 border-t-2 flex items-center justify-center">
        <Link
          href={"/"}
          className="bg-neutral-800 p-2 rounded-xl hover:bg-neutral-700"
        >
          &#127968;Home
        </Link>
      </div>
    </div>
  );
}

//Generating the Static Props for the Blog Page

export async function getStaticProps() {
  // get list of files from the meme folder
  const files = fs.readdirSync("meme");
  // get frontmatter & slug from each post
  const meme = files.map((fileName) => {
    const slug = fileName.replace(".md", "");
    const readFile = fs.readFileSync(`meme/${fileName}`, "utf-8");
    const { data: frontmatter } = matter(readFile);
    return {
      slug,
      frontmatter,
    };
  });

  // Return the pages static props
  return {
    props: {
      meme,
    },
  };
}

Dengan cara ini, setiap kali halaman blog diakses, Next.js akan menggunakan fungsi getStaticProps() untuk menghasilkan daftar post atau dalam kontek ini "meme" yang akan ditampilkan di halaman tersebut. Cara ini memungkinkan konten blog dihasilkan sebelumnya (pada saat build) dan disajikan dengan cepat kepada pengguna tanpa perlu mengakses berkas atau resource lain setiap mengirim request.

Buat Folder Meme

Selanjutnya kita buat folder meme, di dalam folder ini juga akan kita buat file [slug].js, fungsi nya untuk menampilkan postingan-postingan yang tadi kita buat daftarnya di file meme.js.

Generate Static Props

Selanjutnya kita masuk ke dalam file [slug].js di dalam folder meme, kita memanfaatkan fungsi generate static props.

import fs from "fs";
import matter from "gray-matter";
import md from "markdown-it";
import Image from "next/image";
import Link from "next/link";
import "../../app/layout";

// The page for each meme
export default function Meme({ frontmatter, content }) {
  const { id, title, description, tags } = frontmatter;
  return (
    <div>
      <div
        data-theme="dark"
        className="flex justify-center flex-col items-center h-screen md:p-4"
      >
        <h1 className="text-2xl">{title}</h1>
        <p>{description}</p>
        <div className="flex gap-4 justify-center p-4 border-t-2 mt-4">
          <Link
            href={"/meme"}
            className="bg-neutral-800 p-4 rounded-xl hover:bg-neutral-700 active:bg-neutral-800"
          >
            Kembali
          </Link>
          <Link
            href={"/"}
            className="bg-neutral-800 p-4 rounded-xl hover:bg-neutral-700 active:bg-neutral-800"
          >
            Home
          </Link>
        </div>
      </div>
    </div>
  );
}

// Generating the paths for each post
export async function getStaticPaths() {
  // Get list of all files from our meme directory
  const files = fs.readdirSync("meme");
  // Generate a path for each one
  const paths = files.map((fileName) => ({
    params: {
      slug: fileName.replace(".md", ""),
    },
  }));
  // return list of paths
  return {
    paths,
    fallback: false,
  };
}

// Generate the static props for the page
export async function getStaticProps({ params: { slug } }) {
  const fileName = fs.readFileSync(`meme/${slug}.md`, "utf-8");
  const { data: frontmatter, content } = matter(fileName);
  return {
    props: {
      frontmatter,
      content,
    },
  };
}

Dengan memanfaatkan fitur statis yang disediakan oleh Next.js, halaman-halaman ini dapat di-generate terlebih dahulu dan disajikan secara cepat kepada pengguna tanpa harus di-generate ulang setiap kali ada permintaan.

Oke, demikian tutorial singkat cara buat static post blog di Next.js dengan markdown file. Semoga bermanfaat.

Preview