Skip to main content
Kursus gratis · 11 pelajaran

Skill Web App: Pelajaran Next.js dari Situs Produksi Nyata

Pelajaran Next.js dari situs nyata: server dan client component, routing i18n, metadata SEO, dan API route, dengan kode nyata dan dicek ke dokumentasi.

Oleh Matthews WongDitinjau pada

Poin utama

Next.js adalah framework React yang merender halaman di server, memetakan route lewat folder, dan menghasilkan satu build untuk banyak bahasa. Pelajaran ini mengajarkan bagian yang dipakai situs produksi, masing-masing lewat file nyata dari portofolio ini dan dicek ke dokumentasi resmi pada tanggal reviu.

Gratis, tanpa daftar, tanpa sertifikat. Dibangun dari setup yang menjalankan situs ini.

Mulai kursus

Yang akan bisa Anda lakukan

  • Memutuskan apa yang berjalan di server dan apa yang dikirim ke browser.
  • Membangun halaman dua bahasa yang ramah mesin pencari dengan metadata yang benar.
  • Merancang API route yang memvalidasi input dan gagal dengan error yang berguna.

Untuk siapa

Developer yang paham dasar React dan ingin membangun serta menjalankan situs Next.js produksi.

Sebelum mulai

  • Dasar React dan TypeScript, serta Node.js sudah terpasang.
Pelajaran

Skill web app

  1. Belajar Server dan Client Component Next.js dari Kode NyataBelajar server dan client component Next.js dengan kode nyata: apa yang berjalan di mana, batas use client, pola children, dan apa yang dikirim ke browser.13 menit
  2. Belajar Routing i18n next-intl di Next.js untuk PemulaBelajar routing i18n next-intl di Next.js: prefix locale, middleware, getTranslations vs useTranslations, Link terlokalisasi, static params, dan hreflang.14 menit
  3. Tutorial SEO Metadata Next.js: generateMetadata sampai JSON-LDTutorial SEO metadata Next.js dari situs dua bahasa nyata: generateMetadata, canonical dan hreflang, Open Graph, sitemap.ts, robots.ts, dan JSON-LD.14 menit
  4. Belajar API Route Next.js: Validasi, Rate Limit, VersioningBelajar API route Next.js dari situs nyata: validasi input, rate limit per klien, satu bentuk error JSON, versioning /api/v1, dan kirim email dari server.14 menit
  5. Rendering Statis vs Dinamis di Next.js: Caching DijelaskanPelajari rendering statis vs dinamis Next.js: generateStaticParams, revalidate, cache fetch dan route, default Next 15, cache header, dan kode nyata.14 menit
  6. Dasar Core Web Vitals Next.js: next/image dan next/fontPelajari dasar performa web di Next.js: LCP, CLS, dan INP, sizes dan srcset next/image, priority, serta next/font, dengan file nyata dari situs ini.14 menit
  7. Tutorial Middleware Next.js: Matcher, Rewrite, dan AcceptBelajar middleware Next.js lewat file nyata: matcher, rewrite vs redirect, dan content negotiation header Accept yang melayani Markdown di URL yang sama.14 menit
  8. Tes Situs Next.js dengan node:test dan Build GateTes situs Next.js tanpa Jest: contract test node:test, prebuild gate seperti assertBlogParity, dan cara memutuskan apa yang dijaga tes dan gate.14 menit
  9. Dasar Aksesibilitas Web untuk Pemula di Situs Next.jsBelajar dasar aksesibilitas web dari situs Next.js nyata: HTML semantik, fokus keyboard, nama aksesibel, ambang kontras, dan reduced motion, dengan kode.14 menit
  10. Self-Host Next.js: Output Standalone, Docker, dan Env VarBelajar self-host Next.js: output standalone, isi image runner Docker, env var saat build vs runtime, NEXT_PUBLIC, dan health check, dari file nyata.14 menit
  11. Smoke Test Playwright di GitHub Actions: Serve, Tunggu, GagalTambahkan smoke test Playwright ke GitHub Actions: jalankan app Next.js hasil build, tunggu sampai merespons, pasang Chromium headless, cetak log gagal.13 menit