Pondasi & Desain Awal | Proyek: Membangun Blog Profesional dengan Next.js & MDX | Mahir.dev | Mahir.dev Academy

Bab 1: Pondasi Kokoh & Desain yang Keren

Selamat datang di bab pertama pembangunan! Di sini kita akan meletakkan fondasi yang kuat untuk blog kita. Kita akan mengubah sebuah "tanah kosong" (folder baru) menjadi kerangka aplikasi yang siap dikembangkan, lengkap dengan tampilan dasar dan fitur modern.

1. Menyiapkan Proyek Next.js & Tailwind CSS

Kita akan memulai dengan membuat proyek Next.js baru, lalu mengintegrasikan Tailwind CSS v4.0 secara manual untuk kontrol penuh.

Langkah 1: Inisialisasi Proyek Next.js

Buka terminalmu, navigasi ke folder tempat kamu ingin menyimpan proyek, dan jalankan perintah ini:

bash

npx create-next-app@latest

Saat ditanya, gunakan jawaban berikut. Perhatikan, kita pilih No untuk Tailwind CSS karena kita akan menginstalnya dengan cara v4.0 yang lebih modern.

What is your project named? blog-profesional-nextjs
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? No 👈 Penting!
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 (@/*)? No

Setelah selesai, masuk ke direktori proyekmu: cd blog-profesional-nextjs.

Langkah 2: Instalasi Tailwind CSS v4.0

Sekarang, mari kita pasang "mesin" styling kita:

bash

npm install tailwindcss @tailwindcss/postcss postcss

tailwindcss: Inti dari framework Tailwind.
@tailwindcss/postcss: Plugin PostCSS khusus untuk v4.
postcss: Alat yang dibutuhkan Next.js untuk memproses CSS kita.

Langkah 3: Konfigurasi PostCSS

Buat file baru di root proyekmu bernama postcss.config.mjs. Ini adalah file konfigurasi minimalis yang memberitahu Next.js untuk menggunakan Tailwind.

javascript

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
 
export default config;

Langkah 4: Impor Tailwind ke CSS Global

Buka file src/app/globals.css, hapus semua isinya, dan ganti dengan satu baris sakti ini:

css

/* src/app/globals.css */
@import "tailwindcss";

Ini adalah cara baru dan bersih untuk memasukkan semua keajaiban Tailwind ke dalam proyekmu.

2. Membersihkan dan Menstrukturkan Proyek

Mari kita rapikan proyek awal kita sebelum mulai membangun.

Sederhanakan Halaman Utama: Buka src/app/page.tsx. Hapus semua JSX di dalam return dan ganti dengan ini:

tsx

// src/app/page.tsx
export default function Home() {
  return (
    <div>
      <h1>Selamat Datang di Blog Saya!</h1>
    </div>
  );
}

Buat Folder components: Di dalam folder src/, buat folder baru bernama components. Di sinilah kita akan menyimpan semua komponen UI reusable kita.

Layout utama adalah "bungkus" (header dan footer) yang akan konsisten di setiap halaman.

A. Membuat Komponen Navbar

Buat file baru di src/components/Navbar.tsx:

tsx

// src/components/Navbar.tsx
import Link from 'next/link';
 
export default function Navbar() {
  return (
    <nav className="w-full p-4 border-b border-zinc-200 dark:border-zinc-800">
      <div

B. Membuat Komponen Footer

Buat file baru di src/components/Footer.tsx:

tsx

// src/components/Footer.tsx
export default function Footer() {
  const currentYear = new Date().getFullYear();
  return (
    <footer className="w-full p-4 text-center border-t border-zinc-200 dark:border-zinc-800">
      <p className=

C. Mengintegrasikan ke Layout Utama

Buka src/app/layout.tsx dan gunakan komponen-komponen yang baru kita buat.

tsx

// src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/Navbar";
import

Jalankan npm run dev. Kamu sekarang sudah punya kerangka aplikasi yang solid!

4. Fitur Keren: Mode Terang & Gelap (Light/Dark Mode)

Mari tambahkan fitur modern ini menggunakan library next-themes.

Instalasi: Hentikan server (Ctrl + C) dan jalankan:
bash
```
npm install next-themes lucide-react
```
lucide-react adalah untuk ikon-ikon keren yang akan kita pakai.
Membuat Theme Provider: Buat file baru di src/components/ThemeProvider.tsx. Komponen ini bertugas mengelola state tema.
tsx
```
// src/components/ThemeProvider.tsx
"use client";
 
import
```

Jalankan kembali npm run dev. Sekarang blog-mu punya tombol fungsional untuk berganti tema!

Rangkuman & Langkah Selanjutnya

Luar biasa! Di bab ini, kita telah: ✅ Menginisialisasi proyek Next.js dan mengintegrasikan Tailwind CSS v4.0. ✅ Membangun struktur layout utama yang solid dengan Navbar dan Footer. ✅ Mengimplementasikan fitur Light & Dark mode yang profesional.

Kita telah berhasil membangun "panggung" yang kokoh. Di bab selanjutnya, kita akan mulai mengisi panggung tersebut dengan konten, yaitu belajar cara membuat file artikel MDX pertama kita dan menampilkannya di halaman blog.

Membuat Tombol Switcher: Buat file di src/components/ThemeSwitcher.tsx untuk tombol pengubah tema.

tsx

// src/components/ThemeSwitcher.tsx
"use client";
 
import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import { Sun, Moon } from "lucide-react";
 
export default function ThemeSwitcher() {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();
 
  useEffect(() => setMounted(true), []);
 
  if (!mounted) return null;
 
  return (
    <button
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      className="p-2 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-700"
    >
      {theme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
    </button>
  );
}

Mengintegrasikan Semuanya:

Tambahkan Switcher ke Navbar: Di src/components/Navbar.tsx, impor dan tambahkan ThemeSwitcher.
Bungkus Aplikasi dengan Provider: Di src/app/layout.tsx, impor ThemeProvider dan gunakan untuk membungkus seluruh aplikasi. Ini penting agar semua komponen bisa mengakses state tema.

Perbarui src/app/layout.tsx menjadi seperti ini:

tsx

// src/app/layout.tsx
// ... (impor-impor lainnya)
import { ThemeProvider } from "@/components/ThemeProvider";
 
// ... (metadata)
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
        >
          <div className="flex flex-col min-h-screen bg-white dark:bg-zinc-950 text-black dark:text-white">
            <Navbar />
            <main className="flex-grow container mx-auto p-4">
              {children}
            </main>
            <Footer />
          </div>
        </ThemeProvider>
      </body>
    </html>
  );
}

suppressHydrationWarning pada tag <html> diperlukan karena tema bisa berbeda antara render server dan klien, ini cara aman untuk menanganinya.

Pondasi & Desain Awal

Kuis Pondasi & Desain Awal

Diskusi Pelajaran