Membangun Website Modern dengan NextJS, Studi Kasus 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.
BEGINNER4 penilaian1 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 |
Penyusun Materi
Ahmad Hakim
Founder & Mentor IDStack | CTO di Nusabot | Software Engineer di GovTech Edu | Former Software Engineer di Track&ROLL
Testimoni Oleh Siswa
5.0
(4 reviews)
5 Bintang
100%
4 Bintang
0%
3 Bintang
0%
2 Bintang
0%
1 Bintang
0%
Muhammad Irfan Bakhtiar
Materi cocok untuk yang mau belajar dasar framework Next.js dan untuk menambah wawasan mengenai fundamental Next.js.
Argian Ardi Prasetya
Lebih bagus lagi jika dilengkapi dengan fetching untuk method Post, Put dan delete. Beserta cara hosting ke vps atau cpanel
Gede Dewo Wahyu M.W
Pokoknya THE BEST!... Sangat mantap dan mudah dipahami, pembelajarannya sangat terstruktur. Mentornya juga sangat baik dalam menjelaskan materi, serta mengenalkan dan menggunakan Headless CMS Strapi, sehingga saya mendapatkan pengetahuan baru.
irfan juliana winandar
biarpun materinya banyak tapi mudah di pahami dan mungkin penambahan link repositorinya untuk memudahkan pembelajaran
Lihat Rekaman