v2.5.2
Giriş yap

Next.js ile SEO için kullanılan link ile yönlendirme

ebykdrms
775 defa görüntülendi

Next.js ile varsayılan olarak routing olayı klasörler altına dosyalar eklenerek yapılıyor.
site.com/list/product/page/1234
gibi bir linkle list klasörü altındaki product klasörü altındaki page klasörü altındaki [id].js adlı dosyaya erişmiş oluyorum.

Ben istiyorum ki
site.com/sayfaya-ozel-link
dediğimde bu "sayfaya-ozel-link" ifadesini alıp daha önceden hazırlanmış bir json üzerinde arayayım.
Arama sonucunda şu sonuca ulaşayım:

{ 
    "seoLink": "sayfaya-ozel-link",
    "target": "list/product/page/1234"
}

Sonra target değeriyle hedef sayfamı yükleyeyim.

  • Mümkünse bu arada sayfa da refresh olmasın.
  • Gerekiyorsa bu sayfa cache'lenmiş dosyalardan okunsun.

Kısacası Next.js'nin url'den gelen veriyi işleme şekline, yani Next.js'in routing sistemine müdahale etmek istiyorum.

Next.js ile bunu en sade şekilde nasıl yapabilirim?

Cevap yaz
Cevaplar (1)
ebykdrms
800 gün önce

Sorumun cevabını Next.js dokümantasyonunda buldum.

Custom Server

Varsayılan olarak next.js, next start ile kendi sunucusunu başlatır.
Eğer sizin kendi backend'iniz varsa bunu Next.js ile kullanmaya devam edebilirsiniz.
Özel bir Next.js sunucusu, özel sunucu kalıplarını kullanabileceğiniz bir server başlatmanıza olanak verir.
Çoğunlukla buna ihtiyacınız omaz ama bu tam bir özelleştirme yapmanıza olanak verir.

Lütfen yalnızca Next.js'in routing yapısı sizin ihtiyaçlarınızı karşılayamıyorsa bir custom server kullanmanız gerektiğini unutmayın.
Bir custom server önemli performans optimizasyonlarını kaldıracaktır. Mesela serverless fonksiyonlar ve Automatic Static Optimization.

Aşağıdaki custom server örneğine bir göz atın:

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// middleware kullanırken `hostname` ve `port` aşapıdaki şekilde sağlanmalıdır.
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // `url.parse` için ikinci parametre olarak true vermeyi unutmayın.
      // Bu, URL'nin query bölümünü ayrıştırmasını söyler.
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl

      if (pathname === '/a') await app.render(req, res, '/a', query)
      else if (pathname === '/b') await app.render(req, res, '/b', query)
      else await handle(req, res, parsedUrl)
    } 
    catch (err) {
      console.error('İşlem sırasında hata oluştu', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Sunucu Hazır: http://${hostname}:${port}`)
  })
})

server.js, babel veya webpack'ten geçmez.
Bu dosyanın gerektirdiği syntax ve import'ların, çalıştırdığınız geçerli node sürümüyle uyumlu olduğundan emin olun.

Custom server'ı çalıştırmak için package.json içindeki script komutlarını şu şekilde güncellemeniz gerekir:

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

Custom server, sunucuyu Next.js uygulamasına bağlamak için aşağıdaki içe aktarmayı kullanır:

const next = require('next')
const app = next({})

İlk satırdaki next, aşağıdaki parametreleri alabilen bir objeyi parametre olarak alan bir fonksiyon döndürür:

  • dev: [Boolean] - Next.js'in geliştirici modunda başlayıp başlamayacağı. Varsayılan: false
  • dir: [String] - Next.js projesinin konumu. Varsayılan: "."
  • quiet: [Boolean] - Sunucu bilgilerini içeren hata mesajlarını gizlemek istiyor musun? Varsayılan: false
  • conf: [object] - next.config.js dosyası için kullanacağınız object'in aynısı. Varsayılan: {}
    İkinci satırdaki next fonksiyonunun sonucu atanmış olan app, Next.js'in istekleri gerektiği gibi kullanmasını sağlamak için kullanılabilir.
Dosya Sistemine Göre Yapılan Routing'i Kaldırmak

Varsayılan olaran Next.js, pages klasörü altına yerleştirilen dosya-klasör yapısına göre bir routing kullanır.
Eğer Custom Server kullanarak aynı sayfayı iki farklı link'in render etmesi sağlanıyorsa bu durum SEO ve UX açısından sorunlara yol açabilir.
Bu davranışı devre dışı bırakmak ve sayfalardaki dosyalara dayalı yönlendirmeyi önlemek için next.config.js dosyasını açın ve useFileSystemPublicRoutes yapılandırmasını devre dışı bırakın:

module.exports = {
  useFileSystemPublicRoutes: false,
}

useFileSystemPublicRoutes öğesinin SSR'den dosya adı yollarını devre dışı bıraktığını unutmayın.
İstemci tarafı yönlendirme hala bu yollara erişebilir.
Bu seçeneği kullanırken, programatik olarak istemediğiniz rotalara navigasyona karşı önlem almalısınız.

İstemci tarafı yönlendiricisini, dosya adı yollarına istemci tarafı yönlendirmelerine izin vermeyecek şekilde de yapılandırmak isteyebilirsiniz. Bunun için router.beforePopState'e bakın.