Nextra Kullanarak Next.js İle Doküman Sitesi Oluşturun

Next.js'ye aşina iseniz, onu kolaylıkla bir dokümantasyon sitesi geliştirmek için kullanabilirsiniz. Nextra çerçevesi sizin için ince ayrıntıları halleder; tek yapmanız gereken Markdown veya HTML içeriği ve YAML veya JSON verileri eklemek.

Next.js tabanlı bir statik site oluşturucu olan Nextra'yı kullanarak bir belge sitesi oluşturmak için bu adımları izleyin. Gerekli bağımlılıkları kurup ayarlayacak, ardından yeni dokümanlar ve sayfalar eklemeyi, Markdown yazmayı ve React bileşenlerini dahil etmeyi öğreneceksiniz.

Nextra ile Doküman Sitesi Oluşturma Gereksinimleri

Henüz yapmadıysanız, Node.js'yi yükleyerek başlayın. bu en son Node.js sürümü bu proje için bağımlılıkları kurmanız gereken düğüm paketi yöneticisi npm ile birlikte gelir.

Node.js'nin yanı sıra yüklemeniz gerekecek git. Siteyi GitHub sayfalarına, Netlify'a veya başka bir barındırma sağlayıcısına dağıtmak için Git'e ihtiyacınız var. Ayrıca VS Code gibi gelişmiş bir kod düzenleyiciye de ihtiyacınız olacak.

Nextra'yı Yükleme

kullanabilirsiniz nextra dokümanlar şablonu bir dokümantasyon sitesini önyüklemek için. Bir komut istemi başlatın ve projenizi kurmak istediğiniz dizine gidin. Ardından, dokümantasyon sitesini önyüklemek için aşağıdaki komutu çalıştırın:

git klonu https://github.com/shuding/nextra-docs-template

Bu komut, geçerli dizindeki bir uygulamayı iskele edecektir. Ardından, bağımlılıkları yüklemek için aşağıdaki komutu çalıştırın:

cd nextra-docs-template
npm kurulum

Kurulum tamamlandıktan sonra uygulamayı başlatın. Terminalinizde aşağıdaki komutu çalıştırarak bunu yapın:

npm geliştiriciyi çalıştır

Bu komut, localhost: 3000'de bir geliştirme sunucusu başlatır. Dokümantasyon sitesini görüntülemek için terminalinizdeki bağlantıyı takip edin. Ana sayfa şöyle görünmelidir:

Sayfanın sol tarafına bakarsanız, adlı sayfaları bulacaksınız. giriiş Ve Başka sayfa. Bu sayfa bağlantılarının altında Satori adında bir sayfa bulacaksınız. Gelişmiş (Bir Klasör) dizin. Son olarak, gezinme alanında şuraya bağlantılar bulacaksınız: Hakkında Ve Temas etmek sayfalar.

Bu sayfaların nasıl çalıştığını anlamak için önce anlamanız gerekir Next.js sayfaları nasıl işler?.

Dizin Yapısını Anlamak

Nextra, Next.js çerçevesini kullandığından, her dosyayı sayfalar/ klasörünü ayrı bir sayfa olarak

İçinde sayfalar dizininde dört şablon dosyası bulacaksınız: hakkında.mdx, gelişmiş.mdx, başka.mdx, Ve dizin.mdx. Bu dosyaların her biri web sitesindeki bir sayfaya karşılık gelir; Örneğin, dizin.mdx ana sayfaya karşılık gelir. URL yerel ana bilgisayar: 3000/yaklaşık karşılık gelir hakkında.mdx, ve benzeri.

İçeri sayfalaradlı bir klasör de vardır. gelişmişadlı tek bir dosya barındıran satori.mdx. Bu dosyanın URL'si şu şekilde olacaktır: yerel ana bilgisayar: 3000/gelişmiş/satori.

Bu dosyaların her birinin nasıl bittiğine dikkat edin. .mdx eklenti.

MDX Nedir?

eğer varsa React ile deneyim, JSX hakkında bilgi sahibi olmalısınız. Bu, React bileşenlerinin kullanıcı arayüzünü tanımlamak için kullanabileceğiniz HTML benzeri bir dildir.

MDX, JSX'i bir Markdown belgesinde yükler, ayrıştırır ve işler. MDX sayesinde React bileşenleri yazabilir ve gerektiğinde bunları Markdown belgelerinize aktarabilirsiniz. MDX dosyaları .mdx uzantısıyla biter ve hem Markdown hem de JSX'i içerebilir.

MDX, yeniden kullanılabilir bileşenler oluşturmak için Markdown bilginizi React ile birleştirmenizi sağlar. Yapabilirsiniz CSS modülleri oluştur bileşenleri biçimlendirmek için. Bu, okunabilirliği ve sürdürülebilirliği iyileştirmek için bileşenlerinizi düzenlemenize yardımcı olur.

Dokümantasyon Sitesindeki Mevcut Sayfaları Düzenleme

Mevcut bir sayfayı düzenlemek için ilgili dosyayı açmanız ve üzerinde değişiklikler yapmanız yeterlidir. Desteklenen diller Markdown ve JSX'tir.

Örneğin, dizin.mdx dosyasını açın ve içeriği şununla değiştirin:

# Belgelerime Hoş Geldiniz
seni burada gördüğüme sevindim Teşekkürler
## Sosyallerim
Beni takip et [twitter](https://twitter.com/kingchuuks) Ve [LinkedIn](https://linkedin.com/in/kingchuks)

Bu örnek, içeriği biçimlendirmek için Markdown'ı kullanır. Birinci düzey bir başlık, ikinci düzey bir başlık ve iki sosyal medya bağlantısı içerir.

Dosyayı kaydedin ve dokümantasyon sitenizin ana sayfasını ziyaret edin. Sayfa şimdi şöyle görünmelidir:

Sayfanın alt kısmında belgenin son güncellenme tarihini de bulabilirsiniz.

Yeni Sayfa Ekleme

Yeni bir sayfa eklemeden önce, sayfanın listede olup olmayacağına karar vermelisiniz. sayfalar/ dizinde veya içindeki bir klasörün içinde. Sayfalarınızı kategorilere ayırmak veya bir hiyerarşi geliştirmek istiyorsanız klasörleri kullanın.

Bu durumda, en üst düzeyde bağımsız bir sayfa oluşturun. adlı bir dosyayı açın. kurulum.mdx kod düzenleyicinizde ve içine aşağıdaki Markdown kodunu yapıştırın:

# Yükleme Rehberi
Paketimi projenize yüklemek için bu kılavuzu izleyin
## 1. Node.js'yi yükleyin
Node.js'yi yüklemek için şu adresi ziyaret edin:
[Node.js dokümantasyon sitesi](https://nodejs.org/en/download)

Dosyayı kaydedin ve tarayıcıyı kontrol edin. Kurulum etiketini yan menüde bulacaksınız. Linke tıkladığınızda içeriği kurulum.mdx sayfada işler:

Sayfa dizini içindeki _meta.json dosyasında etiketi değiştirebilir ve diğer yapılandırmaları gerçekleştirebilirsiniz. Bu konuda daha fazla bilgi edinmek için bkz. Dosyaları Organize Et bölümü Nextra'nın belgeleri.

React Bileşenlerini Kullanma

MDX dosyaları, React'in kullandığı dil olan JSX'i içerebilir. Bileşenler klasörünün içinde bir bileşen oluşturabilir ve bunu sitenizdeki herhangi bir belgeye aktarabilirsiniz.

Bileşenleri Markdown'a nasıl gömebileceğinize dair bir örneği şu sayfada görebilirsiniz: başka.mdx dosya:

## Bileşen
{useState}'i 'tepki'den içe aktar
'../components/counters.module.css' dosyasından stilleri içe aktarın
ihracat const Sayacı = () => { 
 const [count, setCount] = useState (0); 
 geri dönmek( 

 setCount (count+1)} className={styles.counter}> 
 {count} kez tıklandı