Pondasi & Desain Awal

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

npx create-next-app@latest

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.

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 className="container mx-auto flex justify-between items-center">
        <Link href="/" className="text-xl font-bold">
          MyDevBlog
        </Link>
        <div className="flex items-center gap-4">
          <Link href="/" className="hover:text-zinc-600 dark:hover:text-zinc-300">
            Home
          </Link>
          <Link href="/blog" className="hover:text-zinc-600 dark:hover:text-zinc-300">
            Blog
          </Link>
        </div>
      </div>
    </nav>
  );
}

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="text-sm text-zinc-600 dark:text-zinc-400">
        © {currentYear} MyDevBlog. Dibuat dengan Next.js.
      </p>
    </footer>
  );
}

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 Footer from "@/components/Footer";
 
const inter = Inter({ subsets: ["latin"] });
 
export const metadata: Metadata = {
  title: "MyDevBlog",
  description: "Blog pribadi yang dibuat dengan Next.js",
};
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="flex flex-col min-h-screen">
          <Navbar />
          <main className="flex-grow container mx-auto p-4">
            {children}
          </main>
          <Footer />
        </div>
      </body>
    </html>
  );
}

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 { ThemeProvider as NextThemesProvider } from "next-themes";
import type { ThemeProviderProps } from "next-themes/dist/types";
 
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

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

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
```

Bab 1: Pondasi Kokoh & Desain yang Keren

1. Menyiapkan Proyek Next.js & Tailwind CSS

Langkah 1: Inisialisasi Proyek Next.js

Langkah 2: Instalasi Tailwind CSS v4.0

Langkah 3: Konfigurasi PostCSS

Langkah 4: Impor Tailwind ke CSS Global

2. Membersihkan dan Menstrukturkan Proyek

3. Membangun Layout Utama: Navbar & Footer

A. Membuat Komponen Navbar

B. Membuat Komponen Footer

C. Mengintegrasikan ke Layout Utama

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

Rangkuman & Langkah Selanjutnya

Kuis Pondasi & Desain Awal

Diskusi Pelajaran