Cara Membuat Website dengan Next.js dan Tailwind CSS untuk Pemula

Persiapan

Dalam tutorial ini, kita akan membuat website sederhana menggunakan Next.js dan Tailwind CSS. Pastikan Anda telah menginstal Node.js versi 18 atau lebih baru di komputer Anda.

Langkah 1: Membuat Proyek Next.js

Buka terminal dan jalankan perintah berikut:

npx create-next-app@latest my-website
cd my-website

Pilih opsi berikut saat diminta: TypeScript (Ya), ESLint (Ya), Tailwind CSS (Ya), App Router (Ya).

Langkah 2: Struktur Folder

Setelah proyek dibuat, struktur folder akan terlihat seperti ini:

my-website/
├── src/
│   ├── app/
│   │   ├── page.tsx
│   │   ├── layout.tsx
│   │   └── globals.css
│   └── ...
├── public/
├── package.json
└── ...

Langkah 3: Membuat Halaman Sederhana

Buka src/app/page.tsx dan ganti dengan kode berikut:

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Halo, Dunia!</h1>
      <p className="mt-4 text-lg">Website pertamaku dengan Next.js</p>
    </main>
  );
}

Langkah 4: Menjalankan Server

Jalankan perintah berikut di terminal:

npm run dev

Buka http://localhost:3000 di browser Anda untuk melihat hasilnya.