Belajar Next.js dengan Headless CMS

Dalam kelas "Belajar Next.js dengan Headless CMS," kamu akan menguasai teknik pengembangan situs web modern dengan menggunakan Next.js dan Headless CMS. Ikuti kelas ini untuk mempelajari cara membuat situs web yang dinamis, responsif, dan mudah dikelola.

BEGINNER1 penilaian0 peserta

Tentang Kelas

Kelas online "Belajar Next.js dengan Headless CMS" mengajak kamu untuk mengeksplorasi teknologi pengembangan web terkini dengan menggabungkan kekuatan Next.js dengan Headless CMS. Dalam kelas ini, kamu akan mempelajari cara mengembangkan situs web yang dinamis dan responsif, sambil memanfaatkan fleksibilitas dan kemudahan pengelolaan yang ditawarkan oleh Headless CMS.

Tujuan Umum dan Khusus Pelatihan

Memahami konsep dasar Next.js dan Headless CMS.
Menguasai teknik integrasi antara Next.js dan Headless CMS.
Mampu mengembangkan situs web yang dinamis dan mudah dikelola.

Silabus

Pengenalan Next.js dan Headless CMS: Konsep dasar dan pentingnya kedua teknologi tersebut.
Integrasi Next.js dengan Headless CMS: Langkah-langkah untuk menghubungkan Next.js dengan Headless CMS populer seperti Strapi, Contentful, atau WordPress.
Pengembangan Situs Web dengan Next.js: Menerapkan Next.js untuk membuat situs web yang responsif dan dinamis.
Pengelolaan Konten dengan Headless CMS: Memanfaatkan Headless CMS untuk mengelola konten situs web tanpa batasan.

Metode Ajar

Pembelajaran Mandiri Online: Kamu dapat menentukan sendiri waktu belajarmu.
Materi Berupa Video: Materi pembelajaran disajikan dalam bentuk video yang mudah dipahami.
Forum Tanya Jawab: Fasilitas untuk berdiskusi dan bertanya mengenai materi pelajaran.

Peralatan Belajar Peserta

Komputer dengan Akses Internet: Pastikan kamu memiliki komputer dan koneksi internet yang stabil.
Software: Browser terkini untuk mengakses materi pembelajaran dan software editor teks untuk mengembangkan situs web.

Kelas ini cocok untuk siapa saja yang tertarik dalam mempelajari teknologi pengembangan web terkini. Dengan mengikuti kelas ini, kamu akan memperoleh keterampilan yang diperlukan untuk mengembangkan situs web modern dengan menggunakan Next.js dan Headless CMS.

Daftar Materi

	Pengenalan Next.Js Beserta Jenisnya	06:14
	Apa Saja Yang Akan Dipelajari Dan Pengenalan Project	06:30
	Cara Setup Project Next.Js Dari Awal	09:05
	Cara Membuat Halaman Web	05:40
	Cara Menggunakan Typescript Di Project Next.Js	05:21
	Cara Membuat Url Atau Memetakan Route Halaman	05:12
	Latihan Menambahkan Route Halaman	04:16
	Fitur Nested Layout Pada App Router	04:36
	Mengenal Server Rendering Di Next.Js	06:06
	Perbedaan Server Component Dan Client Component	05:24
	Menjalankan Project Next.Js Mode Production	06:16
	Menggunakan Component Link Untuk Tautan	05:11
	Mengenal Prefetch Di Next.Js	04:59
	Latihan Navigasi Dan Fungsi Layout	04:15
	Teknik Styling Di Next.Js	07:01
	Install Tailwindcss Dan Konfigurasinya	05:36
	Latihan Styling Layout	07:36
	Memanfaatkan Color Pallete Tailwindcss	05:01
	Membuat Component Reusable Di Next.Js	04:40
	Memanfaatkan Import Alias Untuk Perpendek Path	04:06
	Menggunakan Static Assets	04:32
	Membuat Card Post List	05:46
	Mengubah Post Card List Menjadi Component	04:09
	Cara Terbaik Menggunakan Font Di Next.Js	05:30
	Menggunakan Font Variable Dengan Tailwindcss	04:50
	Cara Membaca File Markdown Di Next.Js	04:52
	Menampilkan Data Markdown Pada Component	04:10
	Menampilkan Style Markdown Yang Sesuai Dengan Tailwindcss	03:50
	Mengenal Data Meta Dari Markdown - Front-Matter	04:55
	Memisahkan Layer Data Dengan Layer Ui	04:58
	Membuat Route Dinamis Untuk Post	04:06
	Membuat Fungsi Untuk Mendapatkan List Content Post	06:02
	Menampilkan Data Post Pada Halaman Blog	03:40
	Menambahkan Data Deskripsi Dan Cara Mendapatkan Link Sebuah Post	02:54
	Cara Menggunakan Meta Data Untuk Seo Di Next.Js	05:51
	Template Meta Data Agar Title Menjadi Dinamis Setiap Halaman	03:57
	Membuat Metadata Lebih Dinamis Untuk Seo Friendly	03:18
	Menambahkan Favicon Dan Metadata Lainnya	04:19
	Membuat Component Client Untuk Share Link	06:16
	Membuat Fungsi Copy Link Dengan Client Component	05:59
	Percantik Halaman Web Dengan Icon Berbasis Tailwindcss	03:35
	Persiapan Deploy Project Next.Js	04:23
	Deploy Project Next.Js Di Vercel	04:25
	Persiapan Deploy Static Page Next.Js	04:10
	Deploy Project Static Page Next.Js Di Self Hosting	04:33
	Mengenal Teknologi Headless Cms	04:15
	Persiapan Headless Cms Untuk Membuat Konten	08:19
	Cara Mendapatkan Data Dari Strapi Di Next.Js	07:02
	Menentukan Data Response Dari Strapi Dengan Parameter	06:02
	Persiapan Menampilkan Data List Post Dari Strapi	04:22
	Mendapatkan Gambar Dan Data Lainnya Dari Strapi	04:21
	Cara Mendapatkan Satu Data Dari Strapi Berdasarkan Slug	04:07
	Menampilkan Single Post Dari Strapi	04:25
	Refactor Kode Fetch Data Post Dari Strapi	06:19
	Mendapatkand Data Slug Untuk Digenerate Static Page	05:23
	Setup Eslint Untuk Menjaga Kualitas Kode Program	05:37
	Menggunakan Image Component Dari Next	05:00
	Proses Konversi File Gambar Dengan Component Image	04:29
	Mengenal Fungsi Dynamic Parameter	05:26
	Mengenal Fungsi Force Dynamic Pada Component	04:34
	Menampilkan Halaman Not Found	03:49
	Mengenal Fungsi Revalidate Untuk Fetch Data	04:16
	Menggunakan Force Update Dan Revalidate Di Fetch	04:36
	Menyiapkan Jalan Untuk Webhook Konten Dari Cms	07:16
	Menggunakan On Demand Revalidation	05:33
	Mendapatkan Data Dari Query Parameter Untuk Pagination	07:29
	Menggunakan Parameter Pagination Strapi	04:24
	Mendapatkan Nilai Total Halaman Dari Pagination	03:54
	Memisahkan Component Pagination Dan Logic Batas Page	06:21