React ile SSR: Next.js İncelemesi
Next.js; Universal React uygulamalarını oluşturmak için harika bir framework. 😇
Eğer uygulamamızı bir takım nedenlerden dolayı, Server Side çalıştırmanız gerekiyorsa Next.js bizim için en iyi hazır seçeneklerden bir tanesi.
Eğer bu yapılandırmayı(SSR) kendiniz yapmayı tercih ederseniz, biraz uğraşmanız gerekiyor ve tecrübeye göre değişkenlik gösterse de, hiç tecrübesi olmayanlar için sancılı sayılabilecek bir süreç sizi bekliyor olacak. Next.js vakit kazanmak için ideal bir araç oluyor.
Next.js çalışır ve stabil bir durumda bir framework olarak, yazacağımız uygulamayı server tarafında çalıştırmak için hazır hale getiriyor. Ben de çok tekniğe girmeden sade bir şekilde kendisini size tanıtacağım.
Keşif
Next.js kütüphanesini öncesinden duymama rağmen, Universal Vue.js uygulamalar geliştirmeye yarayan, Nuxt.js yayınlandığında inceleme fırsatı yakalamıştım. (Nuxt; Vue ile SSR uygulamalar geliştirmek için kullanılan bir framework)
Çünkü Nuxt direkt Next.js’i örnek alarak geliştirilmiş bir framework ve Next.js’i örnek aldıklarını her alanda belirtip, zeit ekibine şükranlarını sunuyorlar.
Nuxt.js ile ilgili 1 sene önce şöyle bir yazı yazmıştım.
Doğan Güven Nomak ile geçtiğimiz aylarda yaptığımız eğlenceli canlı yayında, muhabbet arası React kullanmaya başladığımdan bahsetmiştim.
React ilk çıktığında veya benim ilk duyduğum zamanlarda, kurcalayıp ufak şeyler geliştirip hayranlık duymuşum. Fakat yolum çok fazla kesişmemişti.
Biraz değişiklik aramam ve biraz da Oğuz Kılıç ve Cem Arguvanlı’nın sürekli bahsetmelerine maruz kalarak, sadece merakım nedeniyle şirkette yapmam gereken ve ileride yapacağım projeleri React ile yapmaya kararı aldım.
Bu süre zarfında takıldığım noktalarda destek oldukları için, onlara da teşekkür ederim. 👋
Bu süre içerisinde Hobium’da, şirket içerisinde kullanmayı planladığımız ve ileride ürünleştirmeyi düşündüğümüz, orta ölçekli bir pazarlama uygulamasını Next.js, Node.js ve Neo4j kullanarak 2 hafta içerisinde yazdık. Coşku ile beraber projeyi baştan sona tasarlayıp, hızlıca bir prototip çıkarttık. Benim için oldukça güzel bir deneyim oldu.
Diğer JavaScript frameworklerini/kütüphanelerini (Backbone.js, Angular 1, Vue) tecrübe eden bir biladeriniz olarak tavsiye verecek olursam, hype dolu ‘Framework’ dünyasında çok fazla boğulmamanız. Bu konuyu tartışan yazılımcılar genelde fanatik davranabiliyor. Bugün övdüğümüz bir kütüphaneye, 1 sene sonra büyük ihtimalle sövüyor olacağız.
React ile uygulama geliştirmeye başladıktan sonra, gerçekten bir mühendislik ürünü olduğunu size hissettiriyor. Sadece kütüphanenin kendisi değil, ekosisteminde geliştirilen kütüphaneler de aynı tadı size veriyor.
Giriş
Next.js, uygulamalarınızı oluşturmak için dizin yapınıza ve bileşenlerinizi nasıl yapılandırdığınıza dair bazı kurallar koyarak bunlara uymanızı istiyor.
Bu başlangıçta korkunç görünse de, aslında uygulamanızın mimari olarak yapılandırılmasına yardımcı olmaktadır. Kendisini Framework olarak tanımlayan Next’i CRA gibi Boilerplate olarak düşünebilirsiniz.
Next.js İle Gelen Özellikler
Başlangıç için konfigrasyonlar ile uğraşmaya gerek kalmadığından bahsetmiştim. Elbette kendi yolumuzu çizerken bazı ek şeylere ihtiyacımız olacak ve konfigrasyona bulaşacağız. Ama ilk aşamada Next.js, birçok özellik ile birlikte geliyor. Babel ve Webpack ile gelen bu yapıyı next.config.js dosyası ile özelleştirmenize de olanak sağlıyor.
- Automatic code splitting
- Built-in CSS support (styled-jsx)
- Css-in-JS (Styled components, Glamor, Glamorous, Stlentron)
- Static file serving
- Routing
- Custom server and routing
- Prefetching Pages
- Dynamic Import
- Custom error handling
- Custom configuration (webpack, babel)
- Static HTML export
Neden Tercih Etmeliyim?
- Kolay Kullanım: Webpack konfigürasyonları, react router, react and react-dom ile uğraşmayı unutun. Next size bunların sunduğu çoğu şeyi hazır olarak sağlıyor.
- Code splitting ile uğraşmanıza gerek yok. Otomatik olarak geliyor.
- Performans olarak ilk sayfa yüklemeleri daha hızlı.
- SEO ile ilgili tüm problemleri çözüyor.
Client side rendering ve server side rendering arasında ne tür farklar var?
Client side rendering —Normalde React’i kullanırken tarayıcımız en az bir HTML sayfası indirir ve ardından içerik JavaScript ile doldurulur. Bu JavaScript çalışırken bembeyaz bir sayfa ile karşılaşırız. JavaScript çalıştıktan sonra uygulamamız kullanıma hazır hale gelir.
Server side rendering, ile içerik sunucuda oluşturulur ve böylece tarayıcımız hali hazırda oluşturulmuş HTML içeriği olan bir sayfayı indirir. Bu fark sebebiyle ilk ekran görüntüsü daha hızlı gelir.
Proje Yapısı
Next.js dediğimizde öğrenmemiz gereken ilk şey, kendine has olan proje yapısıdır. Bu sebeple kurulumunu ve sahip olduğu özellikleri anlatmadan önce klasörleme yapısını anlatacağım.
Uygulamamızı pages ve components klasörleri ile ikiye ayırmamız gerekiyor. Bu ayrım bize çok güzel kolaylıklar sağlıyor. Projeyi yönetmek oldukça basit oluyor. Buna bağlı kalmak iyi ya da kötü tartışılır, ama bir süre sonra alışıyorsunuz.
Pages ve Component Klasörleri
pages, kullanıcılarınızın gidebileceği gerçek sayfalar olarak düşünülür ve components dizininizin içindeki bileşenlerden oluşabilir.
Pages klasörü aynı zamanda uygulamanıza, dosyalar aracılığıyla URL ve routing yapısı hakkında bilgi vermektedir.
Peki pages klasörü nasıl URL yapımız üzerinde söz sahibi oluyor?
Pages ve Router İlişkisi
Eğer pages klasöründe index.js, about.js, contact.js gibi dosyalar barındırdığımızı varsayarsak, bunların her birini ayrı bir rota olarak düşünür.
index.js => (domain.com)
about.js => (domain.com/about)
contact.js => (domain.com/contact)
Bilmemiz gereken en önemli konu bu olmalı diye düşünüyorum. Özellikle basit uygulamalar geliştiriyorsanız hızlıca işinizi halledebiliyorsunuz.
Bu sistemi aşağıdaki konfigürasyon koduyla kapatabilme imkanınız da bulunuyormuş. Yazıyı yazarken öğrendim bunu.
Eğer büyük bir uygulama yazıyor ve buna bağlı kalmak istemiyorsaınz, router konusunda özelleştirmelere ihtiyaç duyabilirsiniz. Express ile Custom Routes yazabiliyorsunuz.
Aynı zamanda Routing başlığı altında açık bir şekilde neler yapabileceğimiz yazılı.
onRouteChangeStart(url)- Router değişince çalışıronRouteChangeComplete(url)- Router değişimi tamamlandığında çalışıronRouteChangeError(err, url)- Router değişirken hata oluşursa tetiklenironBeforeHistoryChange(url)- Tarayıcı geçmişini değiştirmeden hemen önce tetiklenir
Next kullanırken, express ile kendi router yapınızı kurmanızı tavsiye ederim. Şu an ki hali ile çok basit kalıyor.
Custom Server ve Routing
Tavsiye: next-routes paketine de göz atabilirsiniz. Bir çok ihtiyacı çözüyor.
Uygulamamızı başlatmak için next start komutu kullanıyoruz ve next.js otomatik olarak bir node uygulaması ayağa kaldırıyor.
Rotalarımızı özelleştirmek vb. işlemleri yapabilmek için custom server yazmamız gerekiyor. Ve uygulamamızı artık bu dosya ile ayağa kaldırmamız gerekiyor.
Bunun için package.json’daki ilgili satırları aşağıdakilere göre güncellememiz gerekiyor:
Next.js dökümanından kopyalayıp yapıştırdığım bir örneği paylaşıyorum.
Burada görmüş olduğunuz üzere next’in kendisini import ediyoruz. Bunu şöyle açıklayabiliriz. Next.js artık bizim için bir nevi middleware.
Server tarafından çözülmesi gereken konuları, bu dosya üzerinden yapılandıracağız.
Artık uygulamamızı server.js dosyası üzerinden ayağa kaldırıyoruz ve 3000 portundan uygulamamız çalışıyor.
Verilen örnekte sunucuya, /a requesti geldiğinde render fonksiyonunun 3.parametresinde ‘/b’ view dosyasını çalıştırıyoruz. Bizim yapımızda pages/b.js dosyasına karşılık bu yol.
Auth işlemlerinin nasıl yapıldığını merak ediyorsanız, paylaştığım bağlantıda kafanızdaki boşlukları dolduracak örnekler bulunuyor.
Css Çözümleri
React evrenine(gerçekten çok fazla kaynak ve yol var) giriş yaptığınızda çok farklı stillendirme çözümleri ile karşılaşacaksınız.
Eğer bu evrende yeniyseniz ilk aşamada şöyle şaşırabilirsiniz. Ama korkmayın zamanla alışıyorsunuz ve yapınızı oturttuktan sonra oldukça hızlanıyorsunuz.
Hep birlikte oturup şaşırdık. Şimdi bu şaşkınlığı atlamak için, önce Css in JavaScript — Styled-Components yazısını okuyor ve tekrar geri dönüyoruz 😇
Zeit’in reposunda styled-jsx isimli bir paket var. Stillendirmeyi nasıl yapacağınızı buradan öğrenebilirsiniz. Styled components ile benzer özelliklere sahip.
Bu component’ı <Button>Selam!</Button> veya <Button large>Selam!</Button> olarak kullanabiliriz.
Birçok özelliği size karışık gelse bile hepsini kullanmak zorunda olmadığınızı unutmayın.
Peki sadece bununla mı sınırlıyız?
Cevap vereyim. Hayır. Next’e istediğiniz css çözümünü entegre edebiliyorsunuz.
Görmüş olduğunuz üzere, Next reposunda alternatif CSS çözümleri ile ilgili oldukça fazla örnek var. Bunların hepsini kullanabiliyorunuz.
Glamorous aralarında benim en çok beğendiklerim. UI konusunda bir çözüme ihtiyacınız var ise, Ant bu iş için gördüklerim arasında en iyisi diyebilirim.
Önemli Not:
Eğer büyük bir uygulama yapmıyorsanız, bunlar sizin için gerçekten gereksiz ve yorucu gelebilir. Daha detay gerektiren büyük ölçekli uygulamalarda hayat kurtarabiliyor.
İletişim
Soru, eleştiri ve öneri için aslan@oguzhan.in adresinden veya twitter, linkedin gibi mecralar üzerinden bana ulaşabilirsiniz.
