Tutorial Next.js 14

Pengenalan

• Pembicara: Tajudin
• Video ini melanjutkan tutorial Next.js dari proses instalasi
• Versi yang digunakan: Next.js 14
• Proyek yang akan dibuat: Website "Baca Web"

Persiapan Proyek

• Software yang dibutuhkan:
  • Next.js
  • Tailwind CSS
  • React Icons
• Aset:
  • Gambar untuk website dapat diunduh dari link di deskripsi

Fitur Website "Baca Web"

• Mencari buku
• Best sellers
• Kategori blog
• Kontak
• Section Hero
• Daftar buku populer dan terbaru
• Formulir untuk mengirimkan buku favorit
• Testimoni pengguna

Proses Instalasi

1. Buka folder untuk proyek (misalnya "nextj")
2. Cek versi Node.js: harus versi 18.17 atau lebih baru
   • Jika belum, unduh dari situs resmi Node.js
3. Instalasi Next.js:
   • Jalankan perintah di CMD
   • Tentukan nama aplikasi (misalnya "book web")
   • Pilih tidak menggunakan TypeScript (pilih "no")
   • Pilih untuk menggunakan Tailwind CSS (pilih "yes")
   • Gunakan directory folder untuk struktur rapi (pilih "yes")
4. Instalasi Visual Studio Code dan buka folder proyek
5. Instalasi ekstensi:
   • Install "ES7+ React/Redux" dan "Tailwind CSS IntelliSense"
6. Instalasi React Icons:
   • Jalankan perintah di terminal untuk menginstalnya
7. Mulai proyek: jalankan aplikasi dengan perintah npm run

Mengedit Halaman

• Edit file index.js di dalam src/pages
• Hapus konten awal dan simpan perubahan
• Tambah folder baru di dalam src bernama "components"
• Di dalam "components", buat beberapa file JS untuk komponen (Hero, Navbar, dll.)
• Import semua komponen di index.js

Menambahkan Font dan Gaya

• Gunakan Google Fonts untuk menambahkan font
• Pastikan untuk mengimpor Head dari Next.js
• Atur font untuk semua teks dalam elemen body

Pembuatan Navbar

• Impor aset yang diperlukan
• Buat file index.js di dalam folder public
• Struktur navigasi dan area pencarian untuk UI

Catatan Tambahan

• Proses pembuatan komponen dan styling dilakukan selama tutorial
• Semua komponen dipanggil dari file index.js
• Jika ada error, pastikan semua versi yang digunakan konsisten

Penutup

• Jangan lupa untuk subscribe dan share video
• Website pribadi dan portofolio sedang dalam proses pembuatan
• Terima kasih telah menonton, sampai jumpa di video berikutnya!