Cara Menambahkan Markdown ke Proyek Next.js: Panduan Lengkap

Markdown adalah bahasa markup ringan yang menggunakan sintaks pemformatan teks biasa. Ini populer karena kemudahan penggunaannya dan kemampuan untuk dikonversi ke HTML. Dalam proyek Next.js, Markdown dapat digunakan untuk menulis konten seperti posting blog, dokumentasi, dan halaman statis lainnya. Artikel ini akan memandu Anda melalui proses menambahkan Markdown ke proyek Next.js Anda, langkah demi langkah.

Mengapa Menggunakan Markdown di Proyek Next.js?

Berikut adalah beberapa alasan mengapa Anda harus mempertimbangkan penggunaan Markdown di proyek Next.js Anda:

• Kemudahan Penulisan: Markdown jauh lebih mudah dibaca dan ditulis daripada HTML, terutama untuk konten yang padat teks.
• Portabilitas: File Markdown adalah file teks biasa, yang mudah dipindahkan dan diedit di berbagai editor teks dan platform.
• Kontrol Versi: File Markdown mudah dilacak perubahannya menggunakan sistem kontrol versi seperti Git.
• Pemeliharaan: Lebih mudah memelihara konten yang ditulis dalam Markdown karena strukturnya yang sederhana dan mudah dipahami.
• SEO-Friendly: Markdown dapat diubah menjadi HTML yang dioptimalkan untuk SEO.

Prasyarat

Sebelum memulai, pastikan Anda memiliki hal berikut:

• Node.js dan npm (atau Yarn): Pastikan Node.js dan npm (atau Yarn) terinstal di sistem Anda.
• Proyek Next.js: Anda sudah memiliki proyek Next.js yang berfungsi. Jika belum, Anda dapat membuatnya dengan perintah berikut:

npx create-next-app@latest my-nextjs-markdown-project

Langkah 1: Instal Paket yang Diperlukan

Untuk memproses file Markdown di Next.js, kita memerlukan beberapa paket:

• gray-matter: Untuk mem-parse metadata frontmatter dari file Markdown.
• remark: Untuk mengonversi Markdown ke HTML.
• remark-html: Plugin untuk remark untuk menghasilkan HTML.

Instal paket-paket ini menggunakan npm atau Yarn:

Dengan npm:

npm install gray-matter remark remark-html

Dengan Yarn:

yarn add gray-matter remark remark-html

Langkah 2: Membuat Direktori untuk File Markdown

Buat direktori di proyek Next.js Anda untuk menyimpan file Markdown Anda. Misalnya, Anda dapat membuat direktori bernama posts di root proyek Anda:

mkdir posts

Selanjutnya, buat beberapa file Markdown contoh di dalam direktori posts. Misalnya, buat file bernama hello-world.md dan my-first-post.md.

Contoh hello-world.md:

---
title: Hello, World!
date: 2023-10-27
---

# Hello, World!

Selamat datang di posting blog pertama saya yang ditulis dalam Markdown!

Contoh my-first-post.md:

---
title: Posting Blog Pertama Saya
date: 2023-10-28
---

# Ini adalah posting blog pertama saya!

Saya sangat senang menggunakan Markdown di proyek Next.js saya.

Langkah 3: Membaca File Markdown

Buat file utilitas (misalnya, lib/posts.js) untuk membaca dan memproses file Markdown.

mkdir lib
touch lib/posts.js

Buka lib/posts.js dan tambahkan kode berikut:

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() {
  // Get file names under /posts
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // Remove ".md" from file name to get id
    const id = fileName.replace(/\.md$/, '');

    // Read markdown file as string
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');

    // Use gray-matter to parse the post metadata section
    const matterResult = matter(fileContents);

    // Combine the data with the id
    return {
      id,
      ...matterResult.data,
    };
  });
  // Sort posts by date
  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
}

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);

  // Returns an array that looks like this:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ''),
      },
    };
  });
}

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

Berikut adalah penjelasan tentang kode di atas:

• getSortedPostsData(): Membaca semua file Markdown di direktori posts, mem-parse metadata menggunakan gray-matter, dan mengembalikan array posting yang diurutkan berdasarkan tanggal.
• getAllPostIds(): Mengembalikan array ID posting (nama file tanpa ekstensi .md), yang akan digunakan untuk perutean dinamis.
• getPostData(id): Membaca file Markdown berdasarkan ID yang diberikan, mem-parse metadata, mengonversi konten Markdown ke HTML menggunakan remark dan remark-html, dan mengembalikan data posting termasuk konten HTML.

Langkah 4: Menampilkan Daftar Posting

Modifikasi halaman indeks (pages/index.js) untuk menampilkan daftar posting blog.

import Head from 'next/head';
import Link from 'next/link';
import { getSortedPostsData } from '../lib/posts';

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

export default function Home({ allPostsData }) {
  return (
    <div>
      <Head>
        <title>Blog Next.js Saya</title>
      </Head>
      <h1>Blog</h1>
      <ul>
        {allPostsData.map(({ id, date, title }) => (
          <li key={id}>
            <Link href={`/posts/${id}`}>
              <a>{title}</a>
            </Link>
            <br />
            <small>
              {date}
            </small>
          </li>
        ))}
      </ul>
    </div>
  );
}

Kode ini mengambil data posting yang diurutkan menggunakan getSortedPostsData() dan menampilkannya dalam daftar tautan ke halaman posting individual.

Langkah 5: Membuat Halaman Posting Dinamis

Buat direktori pages/posts dan file [id].js di dalamnya untuk menangani rute posting dinamis.

mkdir pages/posts
touch pages/posts/[id].js

Buka pages/posts/[id].js dan tambahkan kode berikut:

import Head from 'next/head';
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,
    },
  };
}

export default function Post({ postData }) {
  return (
    <div>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <h1>{postData.title}</h1>
      <small>
        {postData.date}
      </small>
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </div>
  );
}

Berikut adalah penjelasan tentang kode di atas:

• getStaticPaths(): Menentukan semua kemungkinan jalur dinamis untuk posting, menggunakan getAllPostIds().
• getStaticProps(): Mengambil data posting individual berdasarkan ID yang diberikan, menggunakan getPostData().
• Post(): Menampilkan konten posting, termasuk metadata (judul dan tanggal) dan konten HTML yang dikonversi dari Markdown. Perhatikan penggunaan dangerouslySetInnerHTML. Ini diperlukan karena kita memasukkan HTML langsung ke dalam DOM. Pastikan Anda mempercayai sumber HTML ini.

Langkah 6: Jalankan Server Pengembangan

Jalankan server pengembangan Next.js untuk melihat hasilnya:

npm run dev
# or
yarn dev

Buka browser Anda dan kunjungi http://localhost:3000. Anda akan melihat daftar posting blog. Klik salah satu tautan untuk melihat halaman posting individual.

Opsional: Styling Tambahan

Anda dapat menambahkan styling CSS ke komponen Anda untuk membuat tampilan blog lebih menarik. Anda dapat menggunakan CSS Modules, Styled Components, atau pendekatan styling lainnya yang Anda sukai.

Misalnya, Anda dapat membuat file CSS Module bernama components/Post.module.css:

mkdir components
touch components/Post.module.css

Tambahkan beberapa gaya dasar ke components/Post.module.css:

.post {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.post h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.post small {
  color: #888;
}

.postContent {
  margin-top: 20px;
}

Kemudian, modifikasi komponen Post (pages/posts/[id].js) untuk menggunakan CSS Module:

import Head from 'next/head';
import { getAllPostIds, getPostData } from '../../lib/posts';
import styles from '../../components/Post.module.css'; // Import CSS Module

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,
    },
  };
}

export default function Post({ postData }) {
  return (
    <div className={styles.post}> {/* Apply the style */}
      <Head>
        <title>{postData.title}</title>
      </Head>
      <h1>{postData.title}</h1>
      <small>
        {postData.date}
      </small>
      <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: postData.contentHtml }} /> {/* Apply the style */}
    </div>
  );
}

Praktik Terbaik SEO untuk Posting Blog Markdown Next.js

Mengoptimalkan konten Markdown Anda untuk SEO sangat penting untuk menarik lalu lintas organik ke situs web Anda. Berikut adalah beberapa praktik terbaik untuk diikuti:

1. Riset Kata Kunci: Sebelum menulis posting, lakukan riset kata kunci untuk mengidentifikasi kata kunci dan frasa yang relevan yang dicari oleh audiens target Anda. Gunakan alat seperti Google Keyword Planner, SEMrush, atau Ahrefs untuk menemukan kata kunci bervolume tinggi dan persaingan rendah.
2. Judul dan Meta Deskripsi: Buat judul yang menarik dan deskriptif yang menyertakan kata kunci target Anda. Optimalkan meta deskripsi Anda untuk memberikan ringkasan konten yang ringkas dan meyakinkan. Ini ditampilkan dalam hasil pencarian dan dapat memengaruhi rasio klik-tayang.
3. Judul: Gunakan judul (h1, h2, h3, dll.) untuk menyusun konten Anda secara logis dan menyoroti poin-poin penting. Sertakan kata kunci target Anda secara alami di judul saat relevan. Pastikan hanya ada satu tag h1 per halaman.
4. Teks Alt Gambar: Tambahkan teks alternatif deskriptif ke semua gambar yang Anda gunakan dalam posting Markdown Anda. Teks alt membantu mesin pencari memahami konten gambar dan meningkatkan aksesibilitas.
5. Tautan Internal dan Eksternal: Tautkan ke sumber daya yang relevan, baik internal maupun eksternal. Tautan internal membantu mesin pencari menjelajahi situs web Anda dan memahami struktur konten Anda. Tautan eksternal ke situs web otoritatif dapat meningkatkan kredibilitas dan nilai konten Anda.
6. Konten Berkualitas: Buat konten berkualitas tinggi, informatif, dan menarik yang memberikan nilai bagi audiens Anda. Konten yang ditulis dengan baik lebih mungkin dibagikan, ditautkan, dan diberi peringkat lebih tinggi dalam hasil pencarian.
7. Responsif Seluler: Pastikan situs web Next.js Anda responsif seluler dan memberikan pengalaman pengguna yang luar biasa di semua perangkat. Google memprioritaskan situs web ramah seluler dalam peringkat pencarian.
8. Kecepatan Halaman: Optimalkan kecepatan halaman Anda dengan meminimalkan ukuran gambar, memanfaatkan caching browser, dan menggunakan jaringan pengiriman konten (CDN). Kecepatan halaman adalah faktor peringkat yang signifikan.
9. Schema Markup: Terapkan schema markup untuk memberikan informasi tambahan tentang konten Anda ke mesin pencari. Schema markup dapat meningkatkan visibilitas konten Anda dalam hasil pencarian dan meningkatkan rasio klik-tayang. Next.js memungkinkan Anda untuk menambahkan tag schema ke dalam tag <Head> dari komponen Anda.
10. URL Ramah SEO: Gunakan URL ramah SEO yang deskriptif, ringkas, dan menyertakan kata kunci target Anda. Hindari menggunakan karakter atau angka yang tidak perlu di URL Anda. Dalam konteks Next.js, nama file markdown Anda (tanpa ekstensi .md) secara efektif menjadi URL untuk posting blog Anda jika Anda mengikuti struktur di atas.
11. Peta Situs XML: Kirimkan peta situs XML ke mesin pencari untuk membantu mereka menjelajahi dan mengindeks situs web Anda secara efisien. Next.js menyediakan cara untuk menghasilkan peta situs secara dinamis menggunakan paket seperti next-sitemap.
12. Analitik: Gunakan alat analitik seperti Google Analytics untuk melacak kinerja SEO Anda dan memantau lalu lintas, peringkat, dan metrik keterlibatan Anda. Gunakan data ini untuk mengoptimalkan konten dan strategi SEO Anda secara berkelanjutan.

Kesimpulan

Menambahkan Markdown ke proyek Next.js Anda adalah cara yang bagus untuk menyederhanakan proses penulisan konten Anda dan meningkatkan pemeliharaan. Dengan mengikuti langkah-langkah dalam tutorial ini, Anda dapat dengan mudah mengintegrasikan Markdown ke dalam proyek Next.js Anda dan mulai membuat posting blog dan konten lainnya dengan mudah.