Alat kode rendah seperti WordPress menyederhanakan proses pembuatan blog. Anda dapat menggunakan tema yang sudah jadi dan mulai menulis posting blog dalam hitungan jam. Jika Anda ingin lebih mengontrol kode Anda dan memiliki waktu luang, lebih baik membangun blog Anda dari awal. Anda bahkan dapat menggunakan framework seperti Next.js untuk menyederhanakan prosesnya.

Pelajari cara membuat blog Next.js sederhana yang merender postingan penurunan harga.

Membuat Proyek Next.js

Next.js adalah framework React yang menyederhanakan cara Anda membangun aplikasi. Ini menyediakan banyak alat dan konfigurasi di luar kotak, memungkinkan Anda untuk mulai menulis kode segera setelah menginstalnya.

Cara termudah untuk memulai Next.js adalah dengan menjalankan perintah create-next-app di terminal:

npx membuat-Berikutnya-penurunan harga aplikasi-blog

Perintah ini membuat proyek Next.js yang berisi semua file yang diperlukan untuk memulai.

Hal pertama yang pertama, bersihkan index.js file menjadi seperti ini:

impor Kepala dari 'berikutnya/kepala'
impor gaya dari '../styles/Home.module.css'





instagram viewer

eksporbawaanfungsiRumah() {
kembali (
<div className={styles.container}>
<Kepala>
<judul>Buat Aplikasi Selanjutnya</title>
<nama meta="keterangan" konten="Dihasilkan oleh buat aplikasi berikutnya" />
<link rel="ikon" href="/favicon.ico" />
</Head>
</div>
 )
}

Buat Posting Blog Markdown

Blog akan merender file penurunan harga disimpan secara lokal di folder proyek. Jadi, buat folder baru di root bernama isi untuk menyimpan file. Di folder ini, buat file baru bernama buat-aktif-tautan-nextjs.md dan tambahkan yang berikut ini:


judul: Cara membuat aktif tautandi dalam Nextjs
deskripsi: Menyesuaikan tautan aktif menggunakan useRouter()
Diterbitkan: BENAR
Tanggal diterbitkan: 22/07/2022
tag:
 - Berikutnya

## Isi utama

Nama file markdown akan menjadi bagian dari URL posting, jadi pastikan itu bagus. Perhatikan juga isi di antara tanda hubung. Ini adalah metadata postingan dan disebut front matter.

Parsing File Markdown

Untuk setiap posting blog, Anda harus mengurai konten penurunan harga dan materi depan. Untuk Markdown, gunakan react-markdown dan untuk data materi depan, gunakan materi abu-abu.

React-markdown adalah komponen React yang dibuat berdasarkan komentar yang dengan aman mengubah penurunan harga menjadi HTML. Pustaka materi abu-abu mem-parsing materi depan dan mengonversi YAML menjadi objek.

Jalankan perintah berikut di terminal untuk menginstal react-markdown dan gray-matter.

npm Install materi abu-abu dengan markdown reaksi

Di folder baru bernama utils, buat file baru bernama md.js. Anda akan membuat fungsi pembantu yang mengembalikan konten posting blog dalam file ini.

Dapatkan Semua Postingan yang Dipublikasikan

Di md.js, tambahkan kode berikut untuk mengembalikan semua postingan di folder konten.

impor fs dari "fs";
impor jalur dari "jalur";
impor urusan dari "materi abu-abu";
eksporconst getPath = (folder: string) => {
kembali path.bergabung (proses.cwd(), `/${folder}`); // Dapatkan path lengkap 
}


eksporconst getFileContent = (nama file: string, map: tali) => {
const POSTS_PATH = getPath (folder)
 kembalikan fs.readFileSync (path.join (POSTS_PATH, nama file), "utf8");
};


eksporconst getAllPosts = (folder: string) => {
const POSTS_PATH = getPath (folder)
kembali fs
 .readdirSync (POSTS_PATH) // dapatkan file di direktori
 .filter((jalur) => /\\.md?$/.tes (jalur)) // hanya file .md
 .map((namaberkas) => { // memetakan setiap file
const sumber = getFileContent (namafile, folder); // mengambil isi file
const siput = namaberkas.ganti(/\\.md?$/, ""); // dapatkan slug dari nama file
const { data } = materi (sumber); // ekstrak materi depan
kembali {
 frontmater: data,
 siput: siput,
 };
 });
};

Dalam fungsi getAllPosts() :

  • Dapatkan path lengkap ke folder konten menggunakan modul path.
  • Dapatkan file di folder konten menggunakan metode fs.readdirSync().
  • Filter file agar hanya menyertakan file dengan ekstensi .md.
  • Ambil isi setiap file, termasuk materi depan menggunakan metode peta.
  • Kembalikan array yang berisi materi depan dan slug (nama file tanpa ekstensi .md) dari setiap file.

Untuk mendapatkan postingan yang dipublikasikan saja, Anda dapat memfilter semua postingan dan hanya mengembalikan postingan yang kunci isPublished-nya di bagian depan disetel ke true.

eksporconst getAllPublished = (folder: string) => {
const posting = getAllPosts (folder)
const diterbitkan = posting.filter((posting) => {
kembali post.frontmatter.isPublished BENAR
 })
kembali diterbitkan
 }

Di md.js, tambahkan fungsi getSinglePost() untuk mengambil konten dari satu posting.

eksporconst getSinglePost = (siput: string, map: tali) => {
const sumber = getFileContent(`${slug}.md`, map);
const { data: frontmatter, konten } = materi (sumber);
kembali {
 depan,
 isi,
 };
};

Fungsi ini memanggil fungsi getFileContent() untuk mendapatkan konten dari setiap file. Kemudian menggunakan paket materi abu-abu, fungsi mengambil materi depan dan konten penurunan harga.

Tampilkan Semua Posting Blog

Next.js menyediakan opsi rendering yang berbeda, salah satunya adalah pembuatan statis. Pembuatan statis adalah jenis pra-perenderan di mana Next.js menghasilkan semua halaman HTML selama waktu pembuatan. Anda menggunakannya untuk membuat halaman statis cepat.

Lihat dokumentasi resmi Nextjs untuk informasi lebih lanjut tentang rendering.

Next.js akan melakukan pra-render halaman pada waktu pembuatan menggunakan alat peraga yang dikembalikan oleh fungsi getStaticProps. Dalam hal ini, props akan berupa susunan postingan yang dipublikasikan.

eksporconst getStaticProps = asinkron () => {
 postingan const = getAllPublished("posting");
kembali {
 alat peraga: {postingan},
 };
};

Ubah file index.js untuk menampilkan daftar postingan blog.

impor Kepala dari "berikutnya/kepala";
impor Tautan dari "berikutnya/tautan";
impor { getAllPublished } dari "../utils/md";
fungsiRumah({ posting }) {
kembali (
<div className={styles.container}>
<Kepala>
<judul>Buat Aplikasi Selanjutnya</title>
<nama meta="keterangan" konten="Dihasilkan oleh buat aplikasi berikutnya" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<div>
 {posts.map((posting) => (
<kunci artikel={post.slug}>
<P>[ {post.frontmatter.tags.join(", ")} ]</P>
`postingan/${post.slug}`}>
<A>{post.frontmatter.title}</A>
</Link>{""}
<P>{post.frontmatter.description}</P>
</article>
 ))}
</div>
</div>
 );
}


eksporconst getStaticProps = asinkron () => {
 postingan const = getAllPublished("isi");


kembali {
 alat peraga: {postingan},
 };
};
eksporbawaan Rumah;

Komponen Beranda menggunakan postingan yang dikembalikan oleh getStaticProps. Itu mengulanginya menggunakan fungsi peta, dan untuk setiap posting, ini menampilkan judul, tautan ke posting lengkap, dan deskripsi.

Tampilkan Posting Blog

Seperti yang disebutkan, nama file kiriman akan digunakan sebagai jalur URL. Jalur ini juga dinamis, jadi Anda perlu membuatnya selama waktu pembuatan. Next.js memungkinkan Anda melakukan ini menggunakan fungsi getStaticPaths() .

Misalnya, dalam kode ini, jalur dibuat dari nama file markdown.

eksporconst getStaticPath = asinkron () => {
 jalur const = getAllPublished("posting".peta(({ siput }) => ({ parameter: { siput } }));
kembali {
 jalur,
 mundur: PALSU,
 };
};

Perhatikan bahwa Anda menggunakan data postingan yang dikembalikan oleh fungsi helper getAllPublished() yang Anda buat sebelumnya.

Anda juga menyetel fallback ke false, yang mengembalikan a 404 kesalahan untuk jalur yang tidak ada.

getStaticPaths() biasanya digunakan dengan getStaticProps() yang mengambil konten setiap posting berdasarkan params.

eksporconst getStaticProps = asinkron ({ parameter }) => {
const posting = menunggu getSinglePost (params.slug, "postingan");
kembali {
 alat peraga: { ...posting },
 };
};

Untuk merender markdown ke HTML, gunakan react-markdown.

impor ReactMarkdown dari 'penurunan reaksi'
impor { getAllPosts, getSinglePost } dari "../../utils/md";
const Postingan = ({ konten, frontmatter }) => {
kembali (
<div>
<P>{frontmatter.tags.bergabung(', ')}</P>
<h2>{frontmatter.title}</h2>
<menjangkau>{frontmatter.publishedDate}</span>
<ReactMarkdown>{isi}</ReactMarkdown>
</div>
 );
};

Komponen ini akan merender konten setiap posting blog dan URL yang sesuai.

Jika membuat blog pengembang, Anda bisa tambahkan penyorotan sintaks kemampuan masing-masing komponen.

Menata Blog Markdown Next.js

Sejauh ini, Anda telah membuat blog penurunan harga Next.js yang menampilkan daftar postingan blog dan merender konten postingan tersebut. Untuk membuat blog terlihat lebih bagus, Anda harus menambahkan gaya CSS.

Next.js memiliki dukungan CSS yang baik, dan Anda dapat memilih untuk menggunakan pustaka CSS-in-JS seperti komponen bergaya. Jika Anda lebih suka memisahkan CSS dari JS, Anda dapat menggunakan modul CSS.