Cara Membuat Blog Dengan Next Dan MDX

Next.js adalah framework React yang memungkinkan Anda membangun aplikasi statis dan dinamis dengan cepat. Ini siap produksi dan mendukung rendering sisi server dan pembuatan situs statis di luar kotak, membuat aplikasi Next.js cepat dan ramah SEO.

Dalam tutorial ini, pertama-tama saya akan menjelaskan apa sebenarnya Next.js dan mengapa Anda menggunakannya daripada Create React App atau Gatsby. Kemudian, saya akan menunjukkan cara membuat blog tempat Anda dapat menulis dan merender postingan menggunakan Next.js dan MDX.

Untuk memulai, Anda memerlukan beberapa pengalaman dengan React. Pengetahuan tentang Next.js akan berguna tetapi tidak wajib. Tutorial ini akan bermanfaat bagi mereka yang ingin membuat blog (pribadi atau organisasi) menggunakan Next.js atau masih mencari apa yang akan digunakan.

Mari selami.

Apa itu Next.js?

Next.js adalah framework React yang dibuat dan dikelola oleh Vercel. Itu dibangun dengan React, Node.js, Babel, dan Webpack. Ini siap produksi karena dilengkapi dengan banyak fitur hebat yang biasanya diatur dalam aplikasi React “vanilla”.

Kerangka kerja Next.js dapat merender aplikasi di server atau mengekspornya secara statis. Itu tidak menunggu browser memuat JavaScript untuk menampilkan konten, yang membuat aplikasi Next.js ramah SEO dan sangat cepat.

Mengapa Menggunakan Next.js Daripada Membuat Aplikasi React?

Create React App adalah alat praktis yang menawarkan pengaturan build modern tanpa konfigurasi dan tanpa kerumitan harus mengatur Webpack, Babel, dan sebagainya atau harus mempertahankan dependensinya. Ini adalah cara yang disarankan untuk membuat aplikasi React saat ini. Ini memiliki template untuk TypeScript dan juga dilengkapi dengan Pustaka Pengujian Bereaksi.

Namun, jika Anda ingin membangun aplikasi multi-halaman, maka Anda harus menginstal pustaka tambahan, seolah-olah Anda sedang merender aplikasi React di server. Penyiapan tambahan dapat menjadi masalah, dan paket apa pun yang diinstal dapat meningkatkan ukuran bundel akhir aplikasi Anda.

Inilah masalah yang ingin dipecahkan oleh Next.js. Ini menawarkan pengalaman pengembang terbaik, dengan semua hal yang Anda butuhkan untuk produksi. Muncul dengan beberapa fitur keren:

• Ekspor statis (pra-rendering)
  Next.js memungkinkan Anda mengekspor aplikasi Next.js pada waktu pembuatan ke HTML statis yang berjalan tanpa server. Ini adalah cara yang disarankan untuk membuat situs web Anda karena dilakukan pada waktu pembuatan dan bukan pada setiap permintaan.
• Render sisi server (pra-rendering)
  Ini pra-render halaman ke HTML di server pada setiap permintaan.
• Pemisahan kode otomatis
  Tidak seperti React, Next.js membagi kode secara otomatis dan hanya memuat JavaScript yang diperlukan, yang membuat aplikasi menjadi cepat.
• Perutean berbasis sistem file
  Next.js menggunakan sistem file untuk mengaktifkan perutean di aplikasi, artinya setiap file di bawah direktori pages akan diperlakukan secara otomatis sebagai rute.
• Pemuatan ulang kode yang panas
  Next.js mengandalkan React Fast Refresh untuk memuat ulang kode Anda, menawarkan pengalaman pengembang yang hebat.
• Opsi gaya
  Kerangka kerja Next.js memiliki dukungan bawaan untuk Styled JSX, modul CSS, Sass, KURANG, dan banyak lagi.

Next.js Versus Gatsby

Gatsby adalah generator situs statis yang dibangun di atas React dan GraphQL. Ini populer dan memiliki ekosistem besar yang menyediakan tema, plugin, resep, dan sebagainya.

Situs web Gatsby dan Next.js sangat cepat karena keduanya dirender di server atau secara statis, artinya kode JavaScript tidak menunggu browser dimuat. Mari kita bandingkan menurut pengalaman pengembang.

Gatsby mudah untuk memulai, terutama jika Anda sudah tahu React. Namun, Gatsby menggunakan GraphQL untuk menanyakan data dan halaman lokal. Menggunakan Gatsby untuk membangun blog sederhana ini mungkin berlebihan karena GraphQL memiliki kurva belajar, dan waktu pembuatan kueri dan pembuatan halaman statis akan sedikit lebih lama. Jika Anda membuat blog yang sama ini dua kali, pertama dengan Gatsby dan kemudian dengan Next.js, yang dibangun dengan Next.js akan jauh lebih cepat pada waktu pembuatan karena menggunakan JavaScript biasa untuk mengkueri data dan halaman lokal.

Saya harap Anda memanfaatkan kekuatan kerangka kerja Next.js dan melihat mengapa itu jauh lebih mudah daripada beberapa alternatif. Ini juga merupakan pilihan yang bagus jika situs web Anda sangat bergantung pada SEO karena aplikasi Anda akan cepat dan mudah dirayapi robot Google. Itulah alasan mengapa kami akan menggunakan Next.js dalam artikel ini untuk membangun blog dengan library MDX.

Mari kita mulai dengan menyiapkan aplikasi Next.js baru.

Pengaturan

Ada dua cara untuk membuat aplikasi Next.js. Kita dapat mengatur aplikasi baru secara manual atau menggunakan Create Next App. Kami akan memilih yang terakhir karena ini adalah cara yang disarankan, dan itu akan mengatur semuanya secara otomatis untuk kami.

Untuk memulai aplikasi baru, jalankan perintah berikut di antarmuka baris perintah (CLI):

 npx create-next-app

Setelah proyek diinisialisasi, mari buat struktur aplikasi Next.js sebagai berikut:

 src ├── components | ├── BlogPost.js | ├── Header.js | ├── HeadPost.js | ├── Layout.js | └── Post.js ├── pages | ├── blog | | ├── post-1 | | | └── index.mdx | | ├── post-2 | | | └── index.mdx | | └── post-3 | | └── index.mdx | ├── index.js | └── \_app.js ├── getAllPosts.js ├── next.config.js ├── package.json ├── README.md └── yarn.lock

Seperti yang Anda lihat, proyek kami memiliki struktur file sederhana. Ada tiga hal yang perlu diperhatikan:

• _app.js memungkinkan kita untuk menambahkan beberapa konten ke komponen App.js untuk menjadikannya global.
• getAllPosts.js membantu kita untuk mengambil posting blog dari folder pages/blog . Omong-omong, Anda dapat memberi nama file apa pun yang Anda inginkan.
• next.config.js adalah file konfigurasi untuk aplikasi Next.js kami.

Saya akan kembali ke setiap file nanti dan menjelaskan fungsinya. Untuk saat ini, mari kita lihat paket MDX.

Menginstal Perpustakaan MDX

MDX adalah format yang memungkinkan kita menulis JSX dengan mulus dan mengimpor komponen ke dalam file Penurunan harga. Ini memungkinkan kita untuk menulis Markdown reguler dan menyematkan komponen React di file kita juga.

Untuk mengaktifkan MDX di aplikasi, kita perlu menginstal perpustakaan @mdx-js/loader . Untuk melakukannya, pertama-tama mari kita menavigasi ke root proyek dan kemudian jalankan perintah ini di CLI:

 yarn add @mdx-js/loader

Atau, jika Anda menggunakan npm:

 npm install @mdx-js/loader

Selanjutnya, instal @next/mdx , yang merupakan library khusus untuk Next.js. Jalankan perintah ini di CLI:

 yarn add @next/mdx

Atau, untuk npm:

 npm install @next/mdx

Besar! Kami selesai mengatur. Mari kita mengotori tangan kita dan membuat kode sesuatu yang berarti.

Mengkonfigurasi File next.config.js

 const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ }); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"] });

Sebelumnya dalam tutorial ini, saya mengatakan bahwa file di bawah folder pages akan diperlakukan sebagai halaman/rute oleh Next.js pada waktu pembuatan. Secara default, Next.js hanya akan memilih file dengan ekstensi .js atau .jsx . Itu sebabnya kami membutuhkan file konfigurasi, untuk menambahkan beberapa penyesuaian ke perilaku default Next.js.

File next.config.js memberi tahu kerangka kerja bahwa file dengan ekstensi .md atau .mdx juga harus diperlakukan sebagai halaman/rute pada waktu pembuatan karena folder blog yang berisi artikel berada di direktori pages .

Karena itu, kita dapat mulai mengambil posting blog di bagian selanjutnya.

Mengambil Postingan Blog

Salah satu alasan mengapa membangun blog dengan Next.js mudah dan sederhana adalah karena Anda tidak memerlukan GraphQL atau sejenisnya untuk mengambil postingan lokal. Anda bisa menggunakan JavaScript biasa untuk mendapatkan datanya.

Di getAllPosts.js :

 function importAll(r) { return r.keys().map((fileName) => ({ link: fileName.substr(1).replace(/\/index\.mdx$/, ""), module: r(fileName) })); } export const posts = importAll( require.context("./pages/blog/", true, /\.mdx$/) );

File ini dapat mengintimidasi pada awalnya. Ini adalah fungsi yang mengimpor semua file MDX dari folder pages/blog , dan untuk setiap posting mengembalikan objek dengan jalur file, tanpa ekstensi ( /post-1 ), dan data posting blog.

Dengan itu, kita sekarang dapat membangun komponen untuk menata dan menampilkan data di aplikasi Next.js kita.

Membangun Komponen

Dalam components/Layout.js :

 import Head from "next/head"; import Header from "./Header"; export default function Layout({ children, pageTitle, description }) { return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" /> <meta name="Description" content={description}></meta> <title>{pageTitle}</title> </Head> <main> <Header /> <div className="content">{children}</div> </main> </> ); }

Di sini, kita memiliki komponen Layout , yang akan kita gunakan sebagai pembungkus untuk blog. Ini menerima data meta untuk ditampilkan di kepala halaman dan komponen yang akan ditampilkan.

Dalam components/Post.js :

 import Link from 'next/link' import { HeadPost } from './HeadPost' export const Post = ({ post }) => { const { link, module: { meta }, } = post return ( <article> <HeadPost meta={meta} /> <Link href={'/blog' + link}> <a>Read more →</a> </Link> </article> ) }

Komponen ini bertanggung jawab untuk menampilkan pratinjau posting blog. Ia menerima objek post untuk ditampilkan sebagai alat peraga. Selanjutnya, kami menggunakan destructuring untuk menarik link postingan dan meta untuk ditampilkan dari objek. Dengan itu, kita sekarang dapat meneruskan data ke komponen dan menangani perutean dengan komponen Link .

Dalam components/BlogPost.js :

 import { HeadPost } from './HeadPost' export default function BlogPost({ children, meta}) { return ( <> <HeadPost meta={meta} isBlogPost /> <article>{children}</article> </> ) }

Komponen BlogPost membantu kami merender satu artikel. Ia menerima pos untuk ditampilkan dan objek meta .

Sejauh ini, kami telah membahas banyak hal — tetapi kami tidak memiliki artikel untuk ditampilkan. Mari kita perbaiki itu di bagian selanjutnya.

Menulis Postingan Dengan MDX

 import BlogPost from '../../../components/BlogPost' export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2 } export default ({ children }) => <BlogPost meta={meta}>{children}</BlogPost>; ## My Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

Seperti yang Anda lihat, kami mengimpor komponen BlogPost , yang menerima meta dan badan postingan.

Anak- children parameter adalah badan posting blog atau, tepatnya, segala sesuatu yang muncul setelah objek meta . Ini adalah fungsi yang bertanggung jawab untuk merender posting.

Dengan perubahan itu, kita bisa pindah ke file index.js dan menampilkan postingan di halaman beranda.

Menampilkan Posting

 import { Post } from "../components/Post"; import { posts } from "../getAllPosts"; export default function IndexPage() { return ( <> {posts.map((post) => ( <Post key={post.link} post={post} /> ))} </> ); }

Di sini, kita mulai dengan mengimpor komponen Post dan posting diambil dari folder blog . Selanjutnya, kita mengulang array artikel, dan untuk setiap posting, kita menggunakan komponen Post untuk menampilkannya. Setelah selesai, kami sekarang dapat mengambil kiriman dan menampilkannya di halaman.

Kami hampir selesai. Namun, komponen Layout masih belum digunakan. Kita dapat menggunakannya di sini dan membungkus komponen kita dengannya. Tapi itu tidak akan mempengaruhi halaman artikel. Di situlah file _app.js berperan. Mari kita gunakan itu di bagian selanjutnya.

Menggunakan File _app.js

Di sini, simbol garis bawah ( _ ) sangat penting. Jika Anda menghilangkannya, Next.js akan memperlakukan file sebagai halaman/rute.

 import Layout from "../components/Layout"; export default function App({ Component, pageProps }) { return ( <Layout pageTitle="Blog" description="My Personal Blog"> <Component {...pageProps} /> </Layout> ); }

Next.js menggunakan komponen App untuk menginisialisasi halaman. Tujuan file ini adalah untuk menimpanya dan menambahkan beberapa gaya global ke proyek. Jika Anda memiliki gaya atau data yang perlu dibagikan di seluruh proyek, letakkan di sini.

Kami sekarang dapat menelusuri folder proyek di CLI dan menjalankan perintah berikut untuk melihat pratinjau blog di browser:

 yarn dev

Atau, di npm:

 npm run dev

Jika Anda membuka https://localhost:3000 di browser, Anda akan dapat melihat ini:

Besar! Blog kita terlihat bagus. Kami selesai membangun aplikasi blog dengan Next.js dan MDX.

Kesimpulan

Dalam tutorial ini, kami menelusuri Next.js dengan membangun blog menggunakan perpustakaan MDX. Kerangka kerja Next.js adalah alat praktis yang membuat aplikasi React ramah SEO dan cepat. Ini dapat digunakan untuk membangun situs web JAMstack statis dan dinamis dalam waktu singkat, karena siap produksi dan dilengkapi dengan beberapa fitur bagus. Next.js digunakan secara luas oleh perusahaan besar, dan kinerjanya terus meningkat. Ini pasti sesuatu untuk diperiksa untuk proyek Anda berikutnya.

Anda dapat melihat pratinjau proyek yang telah selesai di CodeSandbox.

Terima kasih sudah membaca!

Sumber daya

Sumber daya yang berguna ini akan membawa Anda melampaui cakupan tutorial ini.

• Dokumentasi next.js
• Dokumentasi Next.js dan MDX
• “Buat Aplikasi Next.js”, Next.js