e
sv

Next.js'de yönlendirmeler nasıl uygulanır?

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Arama motorları ve kullanıcılar, var olmayan veya eksik olan bir sayfayı bulmak istemezler. Bir geliştirici olarak, sitenize yapılan tekrar ziyaretlerin sayısını azaltabileceği ve arama motorları tarafından nasıl dizine eklendiğini etkileyebileceği için bundan da kaçınmalısınız.

Next.js, React kitaplığının üzerine inşa edilmiş popüler bir çerçevedir ve bir dizi kullanışlı yerleşik özellik ile birlikte gelir, bunlardan biri bu tür durumlardan kaçınmak için yönlendirmeleri işler.

Bu yazıda, bir uygulama kuracağız ve Next.js projelerinizde yönlendirmeleri uygulayabileceğiniz farklı yollara daha yakından bakacağız. Ayrıca hem yapılandırma dosyaları hem de rotalar için kod parçacıkları sağlayacağım ve bunların Next.js'de nasıl çalıştığını açıklayacağım.

Başlayalım.

Yönlendirmeler nelerdir?

Yönlendirmeler, kullanıcıların yürütülen bir URL'yi yeni bir URL'ye aktarmasına veya başka bir deyişle, gelen bir isteği bir yoldan diğerine yeniden yönlendirmesine olanak tanır.

Bunlar genellikle sunucu tarafından, web tarayıcıları tarafından da anlaşılabilen HTTP yeniden yönlendirme durum kodları (3xx) aracılığıyla işlenir.

Yönlendirmeler, sitenin bir bölümünün olmadığı veya yapım aşamasında olduğu, içeriğin farklı bir URL'ye taşındığı, yönlendirme sisteminin değiştiği, erişim kısıtlamaları nedeniyle kullanıcıların yeniden yönlendirildiği veya daha birçok durumda sıklıkla kullanılır.

Next.js projesini kurma

Yönlendirme örneklerimizi test etmek için kullanacağımız geliştirme sunucusunu kurmak için Next.js tarafından resmi olarak desteklenen bir yol olan create-next-app kullanacağız.

İlk önce terminalinizi açın ve npx create-next-app test-app komutunu çalıştırın. Bu, uygulamanın tüm mantığının yaşayacağı yeni bir proje klasörü oluşturacaktır.

Ardından, çalışma dizinini cd test-app ile yeni oluşturulan klasöre değiştirin ve ardından geliştirme sunucusunu başlatmak için npm run dev .

Ardından, tarayıcınızı açın ve uygulamanın canlı önizlemesini görüntülemek için https://localhost:3000 gidin.

Tanımlanmış rotalar

Next.js'de yönlendirmeler oluşturmanın en yaygın yolu, ürün yapınızın kök düzeyinde bulunması gereken next.config.js dosyasını kullanmaktır. Değilse, bir tane oluşturun ve aşağıdaki kodu ekleyin:

modül.exports = {
  zaman uyumsuz yönlendirmeler() {
    dönüş [
      {
        kaynak: '/',
        hedef: '/hoşgeldiniz',
        kalıcı: doğru,
      },
    ]
  },
}

Yukarıdaki snippet'te source özelliği istenen rotadır, destination kullanıcıyı yönlendirmek istediğimiz rotadır ve yönlendirme yolunun istemci makine ve arama motorları için önbelleğe alınmasını isteyip istemediğimizi permanent kontrol eder.

Yapılandırmada kullandığımız /welcome için yeni bir rota oluşturalım. pages klasörünün kök düzeyinde, welcome.js yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:

varsayılan işlevi dışa aktar Hoş Geldiniz() {
  <h1>Hoş geldiniz sayfasına</h1> geri dön;
}

Şimdi klavyenizde Ctrl+C tuşlarına basarak geliştirme sunucusunu yeniden başlatın ve ardından çalıştırın; npm run dev . next.config.js yaptığımız değişikliklerin geçerli olması için bu gereklidir. Makaledeki daha fazla örnek için bunu yapmayı unutmayın.

Yönlendirmeyi test etmek için tarayıcınızı açın ve tekrar https://localhost:3000 gidin. Artık otomatik olarak https://localhost:3000/welcome adresine yönlendirileceksiniz.

sümüklü böcek eşleştirme

Next.js, URL'nin sümüklü böceklerine erişmeyi ve onlar için yönlendirmeleri yapılandırmayı destekler. Bu örnek için next.config.js şekilde düzenleyelim:

modül.exports = {
  zaman uyumsuz yönlendirmeler() {
    dönüş [
      {
        kaynak: '/taslak/:slug',
        hedef: '/blog/:slug',
        kalıcı: doğru,
      },
    ]
  },
}

Rotaları ayarlamak için pages klasörünün içine gidin ve draft ve blog adlı iki yeni klasör oluşturun ve ardından her ikisinin içinde article.js dosyasını oluşturun.

draft/article.js dosyasına aşağıdaki kodu ekleyin:

varsayılan işlevi dışa aktar Makale() {
  <h1>Kaynak rotasını</h1> döndür;
}

blog/article.js aşağıdaki kodu ekleyin:

varsayılan işlevi dışa aktar Makale() {
  dönüş <h1>Hedef rota</h1>;
}

Geliştirici sunucusunu yeniden başlattıktan sonra, https://localhost:3000/draft/article erişmeyi deneyin; https://localhost:3000/blog/article adresine yönlendirileceksiniz. Bilgi, onun için bir rota oluşturmadığınız ve birden çok düzeyde yuvalamadığınız sürece, URL'de desteklenen herhangi bir değer olabilir.

joker karakterler

Yuvalanmış rotaları yeniden yönlendirmek için joker karakterleri kullanabilirsiniz; bu, esas olarak bilinen son seviyeden sonraki tüm yolları alacak ve yeni rotaya yönlendirecektir. URL'de hedeflediğiniz slug'a * karakteri eklemek kadar basittir.

next.config.js geri dönün ve şu şekilde değiştirin:

modül.exports = {
  zaman uyumsuz yönlendirmeler() {
    dönüş [
      {
        kaynak: '/taslak/:slug*',
        hedef: '/blog/:slug*',
        kalıcı: doğru,
      },
    ]
  },
}

Yuvalanmış rotalar oluşturmak için draft ve blog klasörlerinin içinde birkaç alt klasör oluşturmamız gerekecek. Makaleleri teknolojiler aracılığıyla kategorize etmek istediğimizi varsayalım, bu nedenle her iki klasöre de react diyeceğiz. Yeni oluşturulan her iki klasörün içine de tutorial.js dosyasını ekleyin.

draft/react/tutorial.js aşağıdaki kodu ekleyin:

varsayılan işlevi dışa aktar Eğitimi() {
  <h1>İç içe kaynak yolu</h1> döndür;
}

blog/react/tutorial.js aşağıdaki kodu ekleyin:

varsayılan işlevi dışa aktar Eğitimi() {
  <h1>İç içe hedef rota</h1> döndür;
}

Şimdi dev sunucusunu yeniden başlatın ve https://localhost:3000/draft/react/tutorial erişin. Hemen https://localhost:3000/blog/react/tutorial adresine yönlendirilmelisiniz. Tüm iç içe yolun yeniden yönlendirildiğine dikkat edin.

Normal ifade sorguları

Regex, URL yolunun farklı bölümlerine daha etkin bir şekilde erişmek için kullanabileceğiniz güçlü bir araçtır. Yönlendirme davranışı üzerinde daha fazla kontrole sahip olacaksınız ve yönlendirmeler için özel kurallar oluşturmanıza izin verilecek.

next.config.js aşağıdaki kodla değiştirin:

modül.exports = {
  zaman uyumsuz yönlendirmeler() {
    dönüş [
      {
        kaynak: '/draft/:slug(^[az]+)',
        hedef: '/blog/makale',
        kalıcı: yanlış,
      },
    ]
  },
}

Yukarıdaki kod parçacığında, daha önce oluşturduğumuz /blog/article yoluna yönlendirilen sadece a z karakterlerden oluşan rotaları yapılandırdık.

Proje yapınızdaki draft klasörüne gidin ve içinde aşağıdaki kodu içeren yeni bir dosya, article123.js oluşturun:

varsayılan işlevi dışa aktar Makale123() {
  <h1>Kaynak rotasını</h1> döndür;
}

Normal ifade sorgusunu test etmek için dev sunucusunu yeniden başlatın ve https://localhost:3000/draft/article erişmeyi deneyin. Yol sadece harflerden oluştuğu için https://localhost:3000/blog/article adresine yönlendirileceksiniz.

Şimdi https://localhost:3000/draft/article123 'e erişmeyi deneyin. Girdiğiniz URL'nin içeriği görüntülenecek ve rotada sayılar olduğu için yeniden yönlendirilmeyeceksiniz.

Burada, regex sorguları yazmanıza yardımcı olacak birkaç faydalı site bulunmaktadır: regex101 ve regexr .

Temel yol desteği

Next.js, URL'deki temel yolun önekini de destekler. Bu, birden çok yönlendirme ayarlamanız gerekiyorsa ve tüm rotalarınız için temel yolu art arda yazmak istemiyorsanız yararlı olabilir.

next.config.js aşağıdaki kodla değiştirin:

modül.exports = {
  basePath: '/içerik',

  zaman uyumsuz yönlendirmeler() {
    dönüş [
      {
        kaynak: '/taslak/makale',
        hedef: '/blog/makale',
        kalıcı: doğru,
      },
      {
        kaynak: '/taslak/react/tutorial',
        hedef: '/blog/react/tutorial',
        temelYol: yanlış,
        kalıcı: doğru,
      },
    ]
  },
}

İlk yönlendirme nesnesinde kaynak /content/draft/article ve hedef /content/blog/article olurken, ikinci yönlendirme nesnesinde basePath değerini false olarak ayarladığımız için temel yol yok sayıldı.

İstek parametreleri

Next.js ile ana bilgisayar, üstbilgi, tanımlama bilgisi ve sorgu değerlerine erişerek yönlendirmeler üzerinde daha da fazla kontrol sahibi olabilirsiniz. Has alanını kullanarak has yönlendirmenin farklı durumlarda gerçekleştirilip gerçekleştirilmeyeceğini kontrol etmek için özel kurallar yazabilirsiniz.

next.config.js aşağıdaki kodla değiştirin:

modül.exports = {
  zaman uyumsuz yönlendirmeler() {
    dönüş [
      {
        kaynak: '/',
        sahip olmak: [
          {
            tür: 'başlık',
            anahtar: 'ana bilgisayar',
            değer: 'localhost:3000',
          },
        ],
        kalıcı: yanlış,
        hedef: '/hoş geldiniz',
      },
    ];
  },
}

type , header , cookie veya query olmalıdır. key , eşleşmesi için seçilen türden bir dize olmalıdır. value isteğe bağlıdır ve tanımsızsa, key herhangi bir değeri eşleştirilecektir.

Yukarıdaki kod parçacığında, header kullandık ve localhost:3000 değerine sahip olmak için host anahtarına göre kontrol ettik. İstekte bu değerler karşılanırsa yönlendirme yapılacaktır.

Geliştirme sunucusunu yeniden başlatın ve https://localhost:3000 'e erişmeyi deneyin. host değeri eşleştiğinden https://localhost:3000/welcome adresine yönlendirileceksiniz.

Şimdi dev sunucusunu Ctrl+C ile kapatın ve npm run dev -- -p 8000 . Bu, uygulamanızı farklı bir bağlantı noktasında başlatacaktır. Şimdi uygulamanıza https://localhost:8000 erişin. host değeri, yönlendirme yapılandırmanızla eşleşmediğinden bu sefer yeniden yönlendirilmeyeceksiniz.

API yönlendirmeleri

Next.js, API çağrılarını işlemenin yerleşik bir yolu ile birlikte gelir. Belirli bir yanıt başarılı olursa, yeniden yönlendirme yapmak için yeniden redirect yöntemini kullanabilirsiniz. Bu, kullanıcılarda oturum açarken, form gönderirken ve diğer kullanım durumlarında gerçekten kullanışlı olabilir.

Yeni bir API yolu oluşturmak için pages içindeki api klasörüne gidin ve aşağıdaki kodla data.js adlı yeni bir dosya oluşturun:

varsayılan zaman uyumsuz işlev işleyicisini dışa aktar (req, res) {
  console.log(`Ad: ${gereksinim.body.name}`);
  denemek {
    // bazıları burada bir şeyler bekliyor
    res.redirect(307, '/hoşgeldiniz');
  } yakalama (hata) {
    res.status(500).send({ error: 'Veri alınırken hata oluştu' });
  }
}

Ardından, pages klasörünün kök düzeyine gidin ve formun kendisini oluşturmak için yeni bir dosya, form.js oluşturun. Yeni oluşturulan dosyaya aşağıdaki kodu ekleyin:

varsayılan işlevi dışa aktar Form() {
  dönüş (
    <form action='/api/data' method='post'>
      <label htmlFor='name'>Adınız:</label>
      <input type='text' id='name' name='name' />
      <button type='submit'>Gönder</button>
    </form>
  );
}

Şimdi tarayıcınızı açın ve https://localhost:3000/form gidin. Adınızı girmek için giriş alanı ve değeri API'ye göndermek için gönder düğmesi ile karşılaşacaksınız. Herhangi bir değer girin, gönderin ve https://localhost:3000/welcome adresine yönlendirileceksiniz.

API'nin girdiğiniz değeri aldığından emin olmak için terminale geri dönün ve yazdırılan günlükleri kontrol edin. Değer orada gösterilmelidir.

getStaticProps ve getServerSideProps

Next.js'nin yerleşik ön işleme yöntemleri aracılığıyla yönlendirmeler ayarlamak istiyorsanız, bunları getStaticProps veya getServerSideProps içine dahil edebilirsiniz.

getStaticProps kullanılarak, sayfa oluşturma zamanında (statik site oluşturma) önceden oluşturulacaktır.

Bir örnek oluşturmak için pages klasörünün kök düzeyine gidin ve index.js dosyasını düzenleyin:

varsayılan işlevi dışa aktar Home() {
  <h1>Ana sayfaya</h1> geri dön;
}

zaman uyumsuz işlevi dışa aktar getStaticProps() {
  const içerik = boş;

  if (!içerik) {
    dönüş {
      yönlendirme: {
        kalıcı: yanlış,
        hedef: '/hoş geldiniz',
      },
    };
  }

  dönüş {
    aksesuarlar: {},
  };
}

Benzer şekilde, sunucu tarafı oluşturma (SSG) için getServerSideProps kullanırsınız, bu da Next.js'nin her istekte sayfayı önceden oluşturmasını sağlar.

SSG örneğini ayarlamak için index.js dosyasını aşağıda gösterildiği gibi düzenleyin:

varsayılan işlevi dışa aktar Home() {
  <h1>Ana sayfaya</h1> geri dön;
}

zaman uyumsuz işlevi dışa aktar getServerSideProps() {
  const içerik = boş;

  if (!içerik) {
    dönüş {
      yönlendirme: {
        kalıcı: yanlış,
        hedef: '/hoş geldiniz',
      },
    };
  }

  dönüş {
    aksesuarlar: {},
  };
}

İki durumdan birini test etmek için https://localhost:3000 'a erişmeyi deneyin ve getStaticProps veya getServerSideProps içindeki yönlendirme kuralları yürütüldüğünden otomatik olarak https://localhost:3000/welcome adresine yönlendirileceksiniz.

Çözüm

Bu makalede, Next.js'de yönlendirmeleri nasıl uygulayabileceğinizin birkaç yolunu inceledik. İlk olarak next.config.js kullandık ve önceden tanımlanmış rotalar için özel konfigürasyonlar yazdık, tek seviyeli ve iç içe rotalara eriştik ve yönlendirmelerin kontrolünü artırmak için regex kullandık.

Ardından, alınan istek parametrelerine dayalı olarak nasıl yönlendirmeler oluşturabileceğinizi de yakından inceledik. Son olarak, sunucu tarafı işlemeye karşı API yolları ve statik site oluşturma kullanarak yeniden yönlendirmelerin nasıl uygulanacağına baktık.

Umarım bu makale ile yeni bir şeyler öğrenmişsinizdir ve bu noktadan itibaren, gelecekteki Next.js uygulamalarınızdaki tüm kullanım durumlarınız için yönlendirmeler oluşturabileceksiniz.

Next.js'de yönlendirmeler nasıl uygulanır yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Next.js'de yönlendirmeler nasıl uygulanır?