Membuat Blog dengan NextJs TypeScript dan TailwindCSS

Pada beberapa post sebelumnya, saya telah membahas CodeIgniter 3 dan CMS Joomla dalam membuat aplikasi website. Kali ini, kita akan membangun sebuah blog menggunakan NextJs, TypeScript, dan TailwindCSS.

Sebelum memulai, mari kita kenali tiga teknologi utama yang akan digunakan:

🚀 NextJs

NextJs adalah framework React berbasis Node.js yang memungkinkan server-side rendering (SSR) dan pembuatan situs web statis.

💡 TypeScript

TypeScript adalah superset dari JavaScript yang dikembangkan oleh Microsoft. Dengan typing statis, TypeScript membantu pengembangan aplikasi besar lebih aman dan mudah dipelihara.

🎨 TailwindCSS

TailwindCSS adalah framework CSS berbasis utility-first yang memungkinkan desain yang fleksibel dan mudah dikustomisasi tanpa perlu menulis banyak CSS manual.

🔧 Persiapan

Sebelum mulai coding, pastikan Anda memiliki software berikut:

  • NodeJs v16.14.12
  • Yarn v1.22.15
  • VSCode v1.66.0

Cek versi yang terinstal dengan perintah berikut:

node --version
yarn --version

Jika belum terinstal, silakan unduh melalui tautan yang tersedia di bagian akhir artikel.

⚡ Instalasi

Kita akan menggunakan VSCode dan terminal bawaan untuk proses instalasi.

🏗️ Instalasi NextJs dan TypeScript

Buat proyek NextJs dengan perintah berikut:

yarn create next-app --typescript

Masukkan nama proyek, misalnya my-blog.

📸 Instalasi NextJs

Setelah instalasi selesai, masuk ke direktori proyek:

cd my-blog

🎨 Instalasi TailwindCSS

Tambahkan TailwindCSS ke proyek dengan perintah:

yarn add -D tailwindcss postcss autoprefixer

📸 Struktur Project

Inisialisasi TailwindCSS:

yarn tailwindcss init -p

Konfigurasi tailwind.config.js dengan menambahkan:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambahkan TailwindCSS ke styles/global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

📝 Membuat Halaman “Hello World”

Edit pages/index.tsx:

import type { NextPage } from 'next'

const Home: NextPage = () => {
  return (
    <div className="container">
      <p className="text-3xl text-red-600">Hello World!</p>
      <p>Tanpa kelas TailwindCSS</p>
    </div>
  )
}

export default Home

Jalankan server pengembangan:

yarn dev

Buka browser di localhost:3000.

📸 Tampilan Hello World

📄 Contoh Artikel

Buatlah direktori posts/ pada root directory proyek Anda. Lalu, salin artikel di bawah ini dan simpan ke posts/contoh-1.md:

---
title: "Contoh Artikel"
date: "2022-06-01"
---

Ini adalah contoh pertama sebuah artikel blog yang disimpan dalam format **markdown**.

Salin juga artikel berikut ke posts/contoh-2.md:

---
title: "Artikel Kedua"
date: "2022-05-22"
---

### 🔗 Link Terkait
- [NextJs](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)

🔧 Persiapan

Selanjutnya, kita akan mengubah file pages/index.tsx untuk:

  • Melakukan parsing setiap file markdown dan mendapatkan title, date, serta nama file (sebagai id untuk URL artikel).
  • Membuat daftar artikel di halaman index dan mengurutkannya berdasarkan date.

Untuk itu, kita akan mengimplementasikan getStaticProps.

📌 Instalasi Dependensi

Kita perlu menginstal beberapa package:

yarn add gray-matter remark remark-html
  • gray-matter → Untuk melakukan parsing metadata dari markdown.
  • remark dan remark-html → Untuk mengonversi konten markdown menjadi HTML.

📚 Membuat Library

Buat direktori lib/ pada root proyek dan tambahkan file lib/posts.tsx dengan isi 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(count?: number) {
  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 as { date: string; title: string }) };
  });

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

Fungsi utama:

  • getSortedPostsData: Mengambil dan mengurutkan daftar artikel berdasarkan date.
  • getAllPostIds: Mendapatkan semua id dari file markdown.
  • getPostData: Mengambil data post berdasarkan id dan mengonversi markdown menjadi HTML.

🏠 Mengubah pages/index.tsx

Perbarui pages/index.tsx dengan kode berikut:

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

export default function Home({ allPostsData }) {
  return (
    <main>
      <h1 className="text-3xl font-bold">My Blog</h1>
      <ul>
        {allPostsData.map(({ id, date, title }) => (
          <li key={id}>
            <Link href={`/posts/${id}`}>{title}</Link>
            <br />
            <small>{date}</small>
          </li>
        ))}
      </ul>
    </main>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const allPostsData = getSortedPostsData();
  return { props: { allPostsData } };
};

Untuk menjalankan proyek:

yarn dev

Akses di browser: http://localhost:3000/

📝 Membuat Laman Post

Buat direktori pages/posts/ dan tambahkan file pages/posts/[id].tsx dengan isi berikut:

import { getAllPostIds, getPostData } from '../../lib/posts';
import { GetStaticProps, GetStaticPaths } from 'next';
import Link from 'next/link';

export default function Post({ postData }) {
  return (
    <main>
      <h1>{postData.title}</h1>
      <small>{postData.date}</small>
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      <Link href="/">← Back to home</Link>
    </main>
  );
}

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

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const postData = await getPostData(params?.id as string);
  return { props: { postData } };
};

Kode ini:

  • getStaticPaths: Menghasilkan path untuk setiap post berdasarkan id.
  • getStaticProps: Mengambil data post berdasarkan id untuk halaman statis.
  • Komponen Post: Merender halaman post dengan judul, tanggal, dan konten markdown yang sudah dikonversi ke HTML.

🎯 Penutup

Sampai di sini, kita telah berhasil membuat blog dengan fitur dasar: ✅ Menulis dan membaca artikel dalam format Markdown ✅ Menampilkan daftar artikel di homepage ✅ Menggunakan Next.js dan TailwindCSS untuk styling ✅ Menampilkan konten post dengan halaman dinamis

Selanjutnya, kita akan membahas cara mendeploy blog ke hosting dalam artikel berikutnya. 🚀

🔗 Link Terkait

🚀 Selamat mencoba! Jika ada pertanyaan, jangan ragu untuk reach out. 🎉

✍️ Written by Wendy