Blog

Nextra Docs Kullanımı ve Vercel'e Yayınlama: Adım Adım Rehber

Ashley Goolam

Ashley Goolam

12 June 2025

Nextra Docs Kullanımı ve Vercel'e Yayınlama: Adım Adım Rehber

Kolayca şık, modern bir dokümantasyon web sitesi oluşturmak isterseniz, Nextra Docs mevcut en iyi araçlardan biridir. Next.js üzerine inşa edilen Nextra, dokümantasyonunuzu Markdown veya MDX formatında yazmanıza, görünümünü ve hissiyatını özelleştirmenize ve özellikle Vercel üzerinde zahmetsizce dağıtmanıza olanak tanır. Bu makalede, sıfırdan bir Nextra Docs sitesi kurmayı ve bunu ücretsiz olarak Vercel'e dağıtmayı adım adım anlatacağız.

💡
Güzel API Dokümantasyonu oluşturan harika bir API Test aracı mı arıyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılar ve Postman'ın yerini çok daha uygun fiyata alır!
button

Nextra Docs Nedir? Belge Oluşturma Dostunuz

Nextra docs, dokümantasyon siteleri oluşturmayı çocuk oyuncağı haline getiren Next.js tabanlı bir framework'tür. Tamamen Markdown (veya MDX) içeriğiyle ilgilidir ve kutudan çıktığı gibi navigasyon, arama ve içindekiler tablosu içeren önceden oluşturulmuş bir Docs Teması sunar. İşte nextra docs'un harika olmasının nedenleri:

Kullanıcılar, "sıfır yapılandırma parlaklığı" ve Vercel dağıtımları nedeniyle nextra docs hakkında övgüler yağdırıyor. Sitenizi oluşturmaya hazır mısınız? Hadi başlayalım!

Neden Nextra Docs'u Vercel ile Kullanmalısınız?

Nextra docs, profesyonel düzeyde dokümantasyona hızlıca ihtiyaç duyan geliştiriciler, startup'lar veya açık kaynak projeleri için mükemmeldir. Bunu Next.js'in ana sahası olan Vercel ile eşleştirmek şu anlama gelir:

Bir test sitesini Vercel'e dağıttım ve 5 dakikadan kısa sürede yayındaydı; tereyağı gibi akıcıydı!

Nextra Docs Nasıl Kurulur: Adım Adım Kılavuz

Next.js'in uygulama yönlendiricisini kullanarak sıfırdan bir nextra docs sitesi oluşturalım. Adımları takip edin ve yaklaşık 20 dakika içinde yerel bir site çalışır durumda olacak!

1. Yeni Bir Next.js Projesi Oluşturun

npx create-next-app my-nextra-docs
next js proje seçenekleri
cd my-nextra-docs

2. Nextra Docs Bağımlılıklarını Yükleyin

nextra docs için temel paketleri yükleyin:

npm install next react react-dom nextra nextra-theme-docs

3. package.json Scriptlerini Güncelleyin

package.json dosyasının bu scriptleri içerdiğinden emin olun (genellikle create-next-app tarafından eklenirler):

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

"dev": "next --turbopack"
package.json
npm run dev

Next.js uygulamasının çalıştığını doğrulamak için http://localhost:3000 adresini ziyaret edin.

next js ana sayfası

Çirkin:( Ama neyse ki çalışıyor! Şimdi bunu düzeltmeye çalışalım.

4. Nextra Docs'u Yapılandırın

import nextra from 'nextra'

const withNextra = nextra({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.js'
})

export default withNextra({
  async redirects() {
    return [
      {
        source: '/',
        destination: '/resources',
        permanent: true
      }
    ]
  }
})

"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.mjs", ".next/types/**/*.ts"]

5. MDX Bileşenlerini Kurun

import { useMDXComponents as getThemeComponents } from 'nextra-theme-docs'

const themeComponents = getThemeComponents()

export function useMDXComponents(components) {
  return {
    ...themeComponents,
    ...components
  }
}

6. Uygulama Düzenini Güncelleyin

import { Footer, Layout, Navbar } from 'nextra-theme-docs'
import { Banner, Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-docs/style.css'
 
export const metadata = {
  // Metadata'nızı burada tanımlayın
  // Metadata API hakkında daha fazla bilgi için: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
}
 
const banner = <Banner storageKey="some-key">Nextra 4.0 yayınlandı 🎉</Banner>
const navbar = (
  <Navbar
    logo={<b>Nextra</b>}
    // ... Ek navbar seçenekleriniz
  />
)
const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>
 
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      // Gerekli değil, ancak SEO için iyi
      lang="en"
      // Ayarlanması zorunlu
      dir="ltr"
      // `next-themes` paketi tarafından önerilir https://github.com/pacocoursey/next-themes#with-app
      suppressHydrationWarning
    >
      <Head
      // ... Ek head seçenekleriniz
      >
        {/* Ek etiketleriniz `` elementinin `children` olarak geçirilmelidir */}
      </Head>
      <body>
        <Layout
          banner={banner}
          navbar={navbar}
          pageMap={await getPageMap()}
          docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
          footer={footer}
          // ... Ek layout seçenekleriniz
        </Layout>
      </body>
    </html>
  )
}

7. Dokümantasyon Sayfaları Ekleyin

ana sayfa 404 hata mesajı
/app/resources
  /page.mdx

Test amacıyla şunları ekledim:

# Kaynaklar

Çeşitli konular ve alanlarla ilgili kaynaklar.

## Öğrenme
- [Build Your Own X](https://github.com/codecrafters-io/build-your-own-x): En sevdiğiniz teknolojileri sıfırdan yeniden oluşturarak programlamada ustalaşın.

## Faydalı Makaleler
- [CSR vs SSR vs SSG vs ISR: Modern Web Geliştirme İçin Derinlemesine Bir Bakış](csr-vs-ssr-vs-ssg-vs-isr-a-deep-dive-for-modern-web-development-33kl#:~:text=Here's%20a%20quick%20summary%3A,as%20SPAs%2C%20CSR%20is%20perfect.)
- [The Art of Comand Line](https://github.co./jlevy/the-art-of-command-line)

Ancak içeriğin karmaşık olması gerekmez ve şu kadar basit olabilir:

# Başlarken

Merhaba <Adınız>! **nextra docs** sitenize hoş geldiniz :)

- Kolay Markdown düzenleme
- Otomatik navigasyon
- Dahili arama ve içindekiler tablosu
nextra ana sayfası

Devam edin - bu sayfayı düzenleyin, daha fazla sayfa ekleyin ve koyu/açık mod gibi tüm özellikleri deneyin. Güç sizin ellerinizde ve seçenekler sonsuz!

açık ve koyu mod

Nextra Docs'u Vercel'e Dağıtma

Şimdi, nextra docs sitenizi Vercel'de canlı hale getirelim—Vercel Next.js için tasarlandığından süper kolaydır.

8. Kodunuzu GitHub'a Gönderin

git init
git add .
git commit -m "İlk nextra docs"
git remote add origin https://github.com/kullanıcıadınız/deponuz.git
git push -u origin main

9. Vercel'e Dağıtın

varcel

Nextra Docs Sitenizi Özelleştirme

nextra docs sitenizi dikkat çekici hale getirmek mi istiyorsunuz? Bunları deneyin:

Belgelerime özel bir çağrı bileşeni ekledim—10 dakikada profesyonel göründü!

Nextra Docs İçin Sorun Giderme ve İpuçları

özel nextra dokümantasyon örneği

Nextra Docs ve Vercel Neden Mükemmel Bir Çift?

Nextra docs, Markdown basitliği ve Next.js hızıyla dokümantasyonu eğlenceli hale getirir. Vercel'in tek tıklamayla dağıtımları ve ücretsiz barındırması anlaşmayı tamamlar. Elbette, uygulama yönlendiricisi Next.js'e yeni başlayanları biraz zorlayabilir, ancak Nextra dokümantasyonu sağlamdır. Docusaurus ile karşılaştırıldığında, nextra docs daha hafif ve daha modern hissettirir.

Belgelerinizi yayınlamaya hazır mısınız? nextra docs sitenizi oluşturun ve Vercel'e dağıtın—yarattığınızı görmek için sabırsızlanıyorum! Ve kesinlikle Apidog'a göz atmayı unutmayın.

💡
Güzel API Dokümantasyonu oluşturan harika bir API Test aracı mı arıyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılar ve Postman'ın yerini çok daha uygun fiyata alır!
button

API Tasarım-Öncelikli Yaklaşımı Apidog'da Uygulayın

API'leri oluşturmanın ve kullanmanın daha kolay yolunu keşfedin

Ücretsiz Kaydolİndir