Next.js URL Yapısını "/" yerine "-" ile nasıl düzenlenir?

Lordwarge · 14 Eylül 2024

Merhaba arkadaşlar, genelde Next.js projelerinde URL yapıları / karakteri kullanılarak yapılandırılıyor, örneğin url/abc/cba. ancak, ben URL yapısında / yerine - karakterini kullanmak istiyorum. Yani, aşağıdaki gibi. [slug] kısmı dinamik.

[slug]-fiyatlari
[slug]-yemekler
[slug]-malzemeleri

Bu tür dinamik URL yapısına geçebilir miyim? Şimdiden teşekkürler

brkdnmz · 15 Eylül 2024

Çözüm araştırırken şu issue'ya denk geldim:

Dynamic Routes with suffix · Issue #12051 · vercel/next.js

Feature request Dynamic Routes with suffix Is your feature request related to a problem? Please describe. Currently it is possible to have dynamic routes defined as: pages/post/[pid].js I am not ab...

github.com

NextJS config'indeki rewrites seçeneğini kullanmayı önermişler. Başka bir çözüm bulamadım, aklıma da gelmedi.

En kolay örneklerden biri olarak şunu göstereyim:

JavaScript:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/:urun-fiyat",
        destination: "/:urun/fiyat",
      },
    ];
  },
};

export default nextConfig;

Basit olması için direkt root'ta olduğunu varsaydım sayfanın. Sizdeki URL yapısına göre çözüm üretmek mümkün olmalı.

Bu örneğin sağladığı şey şu: /:urun-fiyat URL'ine gittiğinde /:urun/fiyat sayfasını göster.

Yani source'a kullanıcının göreceği URL formatını yazıyorsunuz, gözükense destination dizinindeki dosyanız.

Tabii bu örnekte /:urun/fiyat URL'i devre dışı kalmıyor. İki URL de kullanılabiliyor.

Lordwarge · 15 Eylül 2024

brkdnmz dedi:
Çözüm araştırırken şu issue'ya denk geldim:

Dynamic Routes with suffix · Issue #12051 · vercel/next.js

Feature request Dynamic Routes with suffix Is your feature request related to a problem? Please describe. Currently it is possible to have dynamic routes defined as: pages/post/[pid].js I am not ab...

github.com

NextJS config'indeki rewrites seçeneğini kullanmayı önermişler. Başka bir çözüm bulamadım, aklıma da gelmedi.

En kolay örneklerden biri olarak şunu göstereyim:

JavaScript:

/** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: "/:urun-fiyat", destination: "/:urun/fiyat", }, ]; }, }; export default nextConfig;

Basit olması için direkt root'ta olduğunu varsaydım sayfanın. Sizdeki URL yapısına göre çözüm üretmek mümkün olmalı.

Bu örneğin sağladığı şey şu: /:urun-fiyat URL'ine gittiğinde /:urun/fiyat sayfasını göster.

Yani source'a kullanıcının göreceği URL formatını yazıyorsunuz, gözükense destination dizinindeki dosyanız.

Tabii bu örnekte /:urun/fiyat URL'i devre dışı kalmıyor. İki URL de kullanılabiliyor.

Cevabınız için teşekkür ederim hocam yöntemi denediğim zaman güncelleyeceğim

Denedim çalıştı hocam teşekkürler ilerde sorun çıkartırsa tekrar düzenlerim

Next.js URL Yapısını "/" yerine "-" ile nasıl düzenlenir?

Ayrıntılı düzenleme

Lordwarge

Centipat

brkdnmz

Megapat

Dynamic Routes with suffix · Issue #12051 · vercel/next.js

Lordwarge

Centipat

Dynamic Routes with suffix · Issue #12051 · vercel/next.js

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz