Dari component architecture ke Personal Blog berbasis SSG, routing, dan MDX.
Bab ini membangun mental model baru: UI bukan lagi kumpulan halaman statis, tetapi komposisi komponen dan strategi rendering.
Di akhir bab, Anda punya frontend-only application yang terstruktur dan siap menjadi basis aplikasi full-stack di Bab 8.
Mental model web, HTML, CSS, dan JavaScript manual.
Prompting, debugging, dan audit kualitas kode.
Masuk ke ekosistem React dan Next.js sebagai standar industri modern.
Bukan lagi memasang jendela satu per satu di tiap ruangan, tetapi membuat satu komponen jendela yang dipakai ulang di seluruh bangunan.
Build time, cepat, aman, dan SEO-friendly.
Request time, data fresh, cocok untuk personalization.
Client-side, interaktif, cocok untuk dashboard dan live updates.
Next.js memberi kebebasan memilih strategi per halaman berdasarkan speed, freshness, dan personalization.
Deskripsikan apa yang ditampilkan, bukan langkah manipulasi DOM.
Data mengalir dari parent ke child melalui props.
State dan side-effect dikelola secara eksplisit.
React membandingkan UI lama dan baru sebelum update DOM nyata.
AI kini boleh menjadi co-pilot untuk komponen lengkap, tetapi semua output tetap wajib melewati code review 7 dimensi.
Edge case dan hasil harus tepat.
Waspadai XSS, secret leak, dan input tak tervalidasi.
Perhatikan re-render dan komputasi berat.
Nama, struktur, dan kejelasan logika.
HTML semantik dan keyboard support.
Apakah pola tetap sehat saat data bertambah.
Ikuti best practices React dan Next.js.
// Vanilla JS
function renderTasks(tasks) {
container.innerHTML = '';
tasks.forEach(task => {
const el = document.createElement('div');
el.innerHTML = `...`;
container.appendChild(el);
});
}
// Imperative
const el = document.createElement('div');
el.className = 'task';
el.textContent = 'My Task';
container.appendChild(el);// Declarative
function Task({ title, completed }) {
return (
<div className="task">
<span>{title}</span>
</div>
);
}Imperative memberi instruksi langkah demi langkah. Declarative menyatakan seperti apa UI berdasarkan state saat ini.
Data mengalir dari parent ke child melalui props. Setiap node adalah unit reusable dan dapat dikomposisi ulang.
Satu-satunya cara mengubah UI di React adalah mengubah state. React yang mengurus diffing dan update DOM yang diperlukan.
const element = <h1>Hello</h1>;
const element = React.createElement( 'h1', null, 'Hello' );
HTML, CSS, dan JS dipisah berdasarkan teknologi.
Concern dipisah per fitur, bukan per file teknologi.
Colocation, reusability, dan encapsulation meningkat.
npx create-next-app@latest personal-blog cd personal-blog npm run dev
app/ ├── layout.js ├── page.js ├── about/page.js └── blog/[slug]/page.js
Folder dan file di dalam `app/` langsung menjadi route. Tidak perlu konfigurasi router manual.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Header />
<main>{children}</main>
</body>
</html>
);
}
Navigation bar dan footer tetap persisten saat user berpindah halaman. Hanya area `children` yang berganti.
{posts.map((post) => (
<article key={post.id}>
<h4>{post.title}</h4>
<p>{post.excerpt}</p>
</article>
))}
Post cards dipisah menjadi komponen reusable.
Tampilkan `New` atau `Popular` berdasarkan data.
Gunakan props sebagai API untuk mengubah styling.
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>
Increment
</button>
'use client';
const [query, setQuery] = useState('');
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
`value` dan `onChange` membentuk controlled component. Single source of truth berpindah ke state React, bukan DOM.
Aman untuk client-only search.
Nama komponen dan fungsi jelas.
Fine untuk dataset kecil, hati-hati saat skala naik.
Struktur modular mudah dikembangkan.
app/ ├── page.js → / ├── about/page.js → /about └── blog/[slug]/page.js
export default async function BlogPostPage({ params }) {
const { slug } = await params;
return <h1>Blog Post: {slug}</h1>;
}
`/blog/getting-started-nextjs` dan `/blog/react-components` memakai template halaman yang sama, hanya parameter slug yang berubah.
Build → generate HTML → serve instantly.
Request → fetch data → render HTML → send.
Request → load JS → fetch data → render di browser.
npm install next-mdx-remote gray-matter content/posts/ ├── getting-started-nextjs.mdx └── understanding-react-components.mdx
Frontmatter memisahkan metadata seperti title, date, excerpt, dan author dari konten markdown utama.
const fileContents = fs.readFileSync(fullPath, 'utf8');
const { data, content } = matter(fileContents);
return {
slug,
content,
...data,
};
`fs` dan `path` hanya berjalan di server. Ini alasan kuat mengapa pembacaan MDX cocok dilakukan di Server Component atau build process.
Strategi nyata jarang one-size-fits-all. Satu aplikasi bisa menggabungkan SSG, SSR, dan CSR pada area yang berbeda.
Table of Contents component untuk halaman blog post adalah latihan yang tepat untuk menguji AI sebagai co-pilot.
Anda bukan sekadar pengguna AI. Anda adalah reviewer yang bertanggung jawab atas arsitektur, keamanan, dan kualitas seluruh aplikasi.