Petunjuk Menulis Blog

Selamat datang di panduan menulis blog! Di sini, Anda akan menemukan petunjuk lengkap tentang cara menulis artikel yang menarik dan efektif menggunakan format MDX.

MDX memungkinkan Anda untuk menulis Markdown dengan kemampuan untuk menyisipkan komponen React. Jika Anda belum familiar dengan Markdown, silakan baca panduan Cara Menulis Markdown terlebih dahulu. Berikut adalah struktur dasar yang harus Anda ikuti:

mdx

1---
2title: 'Judul Artikel'
3date: '2025-07-15'
4author: 'Nama Penulis'
5summary: 'Ringkasan singkat artikel.'
6categories:
7  - Kategori 1
8  - Kategori 2
9image: '/path/to/image.webp'
10tags:
11  - Tag 1
12  - Tag 2
13excerpt: 'Ekstrak artikel yang akan ditampilkan di daftar artikel.'
14layout: Post
15---
16
17# Judul Artikel
18
19Ini adalah konten artikel Anda. Anda dapat menggunakan Markdown untuk format teks, seperti **tebal**, _miring_, dan [tautan](https://example.com).

Untuk panduan lebih lengkap tentang format penulisan, lihat artikel Format Penulisan Markdown.

Menyisipkan Komponen

Anda dapat menyisipkan komponen React di dalam artikel MDX Anda. Berikut adalah beberapa contoh:

Link

Hindari menggunakan tautan dengan prop showExternalIcon langsung di MDX. Gunakan komponen Button atau Link custom agar prop tidak bocor ke DOM.

mdx

1<Button as="a" href="https://nextjs.org" target="_blank" showExternalIcon>
2  Kunjungi Next.js
3</Button>

contoh output:

Kunjungi Next.js

Button

mdx

1<Button as="a" href="/contact">
2  Hubungi Saya
3</Button>

contoh output:

Hubungi Saya

Gambar

mdx

1<Image
2  src="/bg/1.webp"
3  alt="Contoh Gambar"
4  title="Sky Day"
5  width={600}
6  height={300}
7/>

contoh output:

Video

Pastikan hanya salah satu prop yang diberikan: src (untuk video lokal) atau youtubeId (untuk YouTube). Jangan biarkan keduanya undefined!

Video Internal

mdx

1<Video src="/videos/sample.mp4" />

contoh output:

Video

Video YouTube

mdx

1<Video src="https://www.youtube.com/watch?v=OAdmRmkTCTY" />

contoh output:

YouTube

Package Manager Tab

mdx

1<PackageManager command="install my-package" />

contoh output:

npm install my-package

Tip Jar

mdx

1<TipJar />

contoh output:

Quote

mdx

1<Quote author="Steve Jobs">
2  Puncak dari kreativitas adalah kemampuan untuk melihat hubungan antara hal-hal
3  yang tampaknya tidak terkait.
4</Quote>

contoh output:

“
Puncak dari kreativitas adalah kemampuan untuk melihat hubungan antara hal-hal
yang tampaknya tidak terkait.
”

— Steve Jobs

Code Block

`mdx

function helloWorld() { console.log('Hello, World!'); }

plaintext

Tips untuk Menulis Artikel

Gunakan judul yang jelas dan deskriptif.
Sertakan ringkasan yang menarik untuk menarik perhatian pembaca.
Gunakan gambar dan video untuk memperkaya konten.
Pastikan tautan berfungsi dan relevan dengan konten.
Gunakan tag yang sesuai untuk membantu pembaca menemukan artikel Anda.
Periksa ejaan dan tata bahasa sebelum mempublikasikan artikel.
Gunakan komponen yang telah disediakan untuk menjaga konsistensi desain.

Dengan mengikuti panduan ini, Anda akan dapat menulis artikel blog yang menarik dan mudah dibaca. Jangan ragu untuk bereksperimen dengan berbagai komponen dan format yang tersedia. Selamat menulis!

Tabel Data

Framework	Language	Year	Popularity
React	JavaScript	2013	⭐⭐⭐⭐⭐
Vue.js	JavaScript	2014	⭐⭐⭐⭐
Angular	TypeScript	2010	⭐⭐⭐
Svelte	JavaScript	2016	⭐⭐⭐

Table belum dirender sebagaimana mestinya, namun Anda dapat menggunakan komponen Table yang telah disediakan untuk menampilkan tabel dengan format yang konsisten. Jika Anda mengalami masalah dengan rendering tabel MDX, baca panduan MDX Tables Not Rendering in Next.js? Here's How to Solve It!.

mdx

1<Table>
2  <thead>
3    <tr>
4      <th>Header 1</th>
5      <th>Header 2</th>
6      <th>Header 3</th>
7    </tr>
8  </thead>
9  <tbody>
10    <tr>
11      <td>Cell 1</td>
12      <td>Cell 2</td>
13      <td>Cell 3</td>
14    </tr>
15    <tr>
16      <td>Cell 4</td>
17      <td>Cell 5</td>
18      <td>Cell 6</td>
19    </tr>
20  </tbody>
21</Table>

Menu

Latest posts

Petunjuk Menulis Blog