Catatan Tutorial Next.js

Pengenalan

• Menggunakan Next.js versi 14.4
• Membuat website bernama BacaWeb:
  • Menampilkan navbar untuk mencari buku
  • Menyediakan kategori, blog, dan kontak
  • Menampilkan section hero, buku populer, buku terbaru, testimoni, dan footer

Persiapan

• Siapkan:
  • Next.js
  • Tailwind CSS
  • React Icons
• Download aset gambar dari link di deskripsi

Proses Instalasi

1. Buat Folder:
   • Misalnya next.js
2. Cek Node.js:
   • Disarankan versi 18.17 atau terbaru
   • Jika perlu, download dari website resmi Node.js
3. Instal Visual Studio Code
4. Install Next.js:
   • Buka terminal dan jalankan perintah untuk membuat aplikasi baru
   • Pilih untuk tidak menggunakan TypeScript pada tahap awal
   • Pilih untuk menggunakan Tailwind CSS otomatis
5. Install React Icons:
   • Jalankan perintah install di terminal
6. Jalankan Aplikasi:
   • Gunakan perintah npm run dev untuk menjalankan aplikasi

Membuat Komponen

• Buat folder components di dalam direktori src
• Tambahkan komponen:
  • Navbar
  • Hero
  • Buku Populer
  • Buku Terbaru
  • Subscribe
  • Testimoni
  • Footer

Mengatur Global Styles

• Hapus konten default di index.js dan global.css
• Tambahkan font dari Google Fonts dan atur global styles

Penanganan Komponen

• Import semua komponen yang telah dibuat di index.js
• Susun komponen dalam urutan yang logis
• Tambahkan Head untuk metadata dan title

Menguji Tailwind CSS

• Cek apakah class Tailwind berfungsi dengan baik di komponen

Catatan Tambahan

• Masih ada beberapa komponen yang perlu ditambahkan di update mendatang
• Memastikan untuk menggunakan komponen secara modular agar kode lebih bersih

Penutup

• Jangan lupa untuk berlangganan dan follow di media sosial untuk mendapatkan update terbaru dan tutorial selanjutnya.
• Jika ada pertanyaan, silakan tinggalkan komentar.