Membina blog dengan Next.js

Artikel ini akan membimbing anda untuk membina kerangka blog statik menggunakan Next.js, dengan reka bentuk dan struktur yang diilhamkan oleh Jekyll. Jekyll terkenal dengan kemudahan akses dan kawalan yang tinggi, dan artikel ini bertujuan untuk memanfaatkan Next.js dan bertindak balas untuk menyediakan penyelesaian bangunan blog statik yang baru. Next.js didasarkan pada sistem fail dan memudahkan proses pembinaan laman web statik.

Struktur direktori blog Jekyll biasa adalah seperti berikut:

 <code>. ├─── _posts/      ...Markdown 格式的博文├─── _layouts/     ...不同页面的布局├─── _includes/    ...可复用的组件├─── index.md     ...主页└─── config.yml    ...博客配置</code>

Rangka kerja kami akan mengikuti struktur direktori ini sebanyak mungkin untuk memudahkan penghijrahan blog dari Jekyll, hanya menggunakan semula jawatan dan konfigurasi.

Jika anda tidak biasa dengan Jekyll, ia adalah penjana tapak statik yang menukarkan teks biasa ke dalam laman web dan blog statik. Sila rujuk Panduan Mula Pantas Jekyll untuk maklumat lanjut.

Artikel ini mengandaikan bahawa anda mempunyai asas -asas React. Jika tidak, rujuk kepada Panduan Bermula Bermula.

Pasang

Next.js didasarkan pada React dan ditulis dalam Node.js. Oleh itu, anda perlu memasang NPM sebelum menambah Next.js, React, dan React-dom.

 <code>mkdir nextjs-blog && cd $_ npm init -y npm install next react react-dom --save</code>

Untuk menjalankan skrip Seterusnya.js pada baris arahan, kita perlu menambah arahan seterusnya ke bahagian skrip pakej.json.

 <code>"scripts": { "dev": "next" }</code>

Sekarang, jalankan perintah npm run dev untuk kali pertama dan lihat apa yang berlaku.

 <code>$ npm run dev > [email protected] dev /~user/nextjs-blog > next ready - started server on https://www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2f90 Error: > Couldn't find a `pages` directory. Please create one under the project root</code>

Penyusun meminta agar direktori halaman di bawah direktori root projek hilang. Kami akan belajar tentang konsep halaman di bahagian seterusnya.

Konsep halaman

Next.js dibina berdasarkan konsep halaman. Setiap halaman adalah komponen React (.js atau .jsx) yang dipetakan ke laluan berdasarkan nama fail. Contohnya:

<code>               路由----               ----- /pages/about.js         /about /pages/projects/work1.js     /projects/work1 /pages/index.js         /</code>

Mari buat direktori halaman dalam direktori root projek dan isi halaman indeks pertama dengan komponen React Basic.

 <code>// pages/index.js export default function Blog() { return</code> Selamat Datang ke Blog Next.js
}

Jalankan npm run dev sekali lagi untuk memulakan pelayan dan lawati https://www.php.cn/link/4A914E5C38172AE9B61780FFBD0B2F90 dalam penyemak imbas anda untuk melihat blog anda.

Keluar dari kotak, kami mendapat:

• Tambah nilai panas, tidak perlu menyegarkan penyemak imbas untuk setiap perubahan kod.
• /halaman/** Generasi statik semua halaman dalam direktori.
• /awam/** Perkhidmatan fail statik untuk sumber dalam direktori.
• 404 halaman ralat.

Lawati mana -mana jalan di localhost untuk melihat kesan sebenar halaman 404. Jika anda perlu menyesuaikan halaman 404, sila rujuk dokumentasi Next.js.

Halaman dinamik

Halaman penghalaan statik digunakan untuk membina halaman rumah, mengenai halaman, dan lain -lain. Walau bagaimanapun, untuk membina semua catatan blog secara dinamik, kami akan menggunakan fungsi penghalaan dinamik seterusnya. Contohnya:

<code>             路由----             ----- /pages/posts/[slug].js    /posts/1              /posts/abc              /posts/hello-world</code>

Mana -mana laluan, seperti /pos /1, /jawatan /ABC, dan lain -lain, akan sepadan /posts/ [[ombak £, dan parameter slug akan dihantar ke halaman sebagai parameter pertanyaan. Ini amat berguna untuk catatan blog kami, kerana kami tidak mahu membuat fail untuk setiap catatan blog; Sebaliknya, kita boleh lulus slug secara dinamik untuk menjadikan catatan blog yang sepadan.

(Kandungan berikut ditinggalkan. Kerana panjang artikel terlalu panjang, teks asal akan tetap tidak berubah, dan bahagian yang tinggal akan dipermudahkan dan gambar akan dikekalkan)

API blog, termasuk, susun atur, laman utama, halaman blog, penggunaan persekitaran pengeluaran, cadangan peningkatan

Bahagian berikutnya artikel terperinci bagaimana untuk membina API blog (dapatkan semua catatan blog, dapatkan jawatan blog individu, dan konfigurasi parsing), membuat komponen yang boleh digunakan semula (termasuk), susun atur halaman reka bentuk (susun atur), melaksanakan senarai posting blog dan laman web, dan juga. Butiran pelaksanaan bahagian -bahagian ini adalah berdasarkan ciri -ciri dan fungsi Next.js dan memanfaatkan sepenuhnya keupayaan penjanaan tapak statiknya.

Atas ialah kandungan terperinci Membina blog dengan Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!