Bundan 6-7 ay öncesinde bir arkadaş tavsiyesi üzerine Next js ile tanıştım ve artık tüm projelerimi bu alt yapı ile yapmaya başladım. Ama ben bunun bu kadar popüler olduğunu bilmiyordum. Geçen şans eseri ikas sitelerini kontrol edeyim dedim bir tüm alt yapıyı next js ile yapmışlar. Kendi sitelerine baktığımda sağlam siteler var
https://nextjs.org/showcase . Bugünde amazon cdn araştırması yaparken bir baktım
https://supercell.com/ bu site bile next js. Hani büyük sitelerin referans olmasını geçtim. Bir çok next ile yapılmış gerçek manada emek harcanmış siteler seo açısından da çok iyi yerde.
Nedir bunu bu kadar özel kılan?
Seo açısından avantajı var derken? Bu kesin bir durum mudur?
Next.js'i neredeyse ilk çıktığı günden beri kullanıyorum ve o zamandan bu yana inanılmaz gelişti, çok daha hızlı ve olgun bir hale geldi.
Kısaca
Next.js nedir, ondan bahsedeyim: Next.js, popüler JavaScript kütüphanesi React üzerine kurulu, web siteleri ve uygulamaları geliştirmeyi kolaylaştıran açık kaynaklı bir framework (çatı). Vercel tarafından geliştiriliyor. Düz React ile proje yaparken kendin uğraşman gereken kurulum, yönlendirme (routing) ve optimizasyon gibi işleri hazır olarak sunduğu için süreci ciddi şekilde hızlandırıyor.
SEO konusunda avantajlı, ama şunu da belirtmek lazım: Google gibi arama motorları "bu site Next.js ile yapılmış" diye siteni öne çıkarmıyor. Asıl avantaj, sayfanın açılış hızı ve içeriğin nasıl render edildiği.
Mesela bir projeyi düz React ile de rahatlıkla yazabiliriz. Ancak React varsayılan olarak
client side rendering (istemci tarafında render) yaptığı için tarayıcıya önce neredeyse boş bir HTML gelir, içerik ise JavaScript yüklendikten sonra oluşturulur. Sayfada sağ tıklayıp "Sayfa kaynağını görüntüle" dediğinizde sadece şuna benzer boş bir div görürsünüz:
<div id="root"></div>
Google'ın botu JavaScript'i çalıştırıp içeriği görebiliyor ama bu işlem gecikmeli yapılıyor ve her zaman sorunsuz olmuyor. Bazı arama motorları ve sosyal medya önizleme botları ise JavaScript'i hiç çalıştırmadığı için içeriği göremiyor.
Next.js ise burada devreye giriyor çünkü
SSR (server side rendering) destekliyor.
Peki server side rendering nedir?
Sayfa sunucuda render edilir ve tarayıcıya ya da bota içeriği hazır, dolu bir HTML olarak gönderilir. Yani bot sitene girdiğinde tüm içeriği direkt görür. Sayfa daha hızlı açıldığı için hem kullanıcı deneyimi iyileşir hem de site daha sağlıklı indexlenir.
Bunun dışında
SSG (static site generation) ile sayfaları build sırasında statik olarak üretebiliyor,
ISR (incremental static regeneration) ile de bu statik sayfaları belirli aralıklarla arka planda güncelleyebiliyorsunuz. Yani ister client, ister server tarafında render yapabiliyorsunuz; ihtiyaca göre sayfa bazında seçim yapmak mümkün. Üstüne bir de oldukça gelişmiş cache mekanizmaları var.
Ek olarak robots.txt, sitemap ve meta etiketlerini kod üzerinden kolayca oluşturmanızı sağlayan
Metadata API var. Görselleri otomatik optimize eden
next/image ve fontları performanslı şekilde yükleyen
next/font da çok işe yarıyor.
Bir de şunu söylemeden geçmeyeyim: Next.js ile ayrı bir backend projesi kurmadan, proje içinde API yazıp (
Route Handlers) doğrudan veritabanına bağlanabiliyorsunuz. Yeni App Router ile gelen
Server Components ve
Server Actions sayesinde de birçok işlemi ayrı bir API yazmadan direkt sunucu tarafında halledebiliyorsunuz.
Kısacası özelliklerini saymakla bitmez, React biliyorsanız kesinlikle denemenizi tavsiye ederim.