Next.js

JavaScript kütüphanesini kullanan, Açık kaynaklı web geliştirme platformu
27 Ekim 2024 tarihinde kontrol edilmiş kararlı sürüm gösterilmektedir. İnceleme bekleyen 1 değişiklik bulunmaktadır.

Next.js, React tabanlı web uygulamaları için sunucu tarafında işleme (server-side rendering) ve statik web sitesi oluşturma (static site generation) sağlayan, Vercel tarafından oluşturulmuş açık kaynaklı bir Web geliştirme platformudur.

Next.js
Next.js logosu
Orijinal yazar(lar)Guillermo Rauch[1]
Geliştirici(ler)Vercel ve açık kaynak topluluğu[2]
İlk yayınlanma25 Ekim 2016 (8 yıl önce) (2016-10-25)[3]
Güncel sürüm15.0.0[4] Bunu Vikiveri'de düzenleyin / 21 Ekim 2024 (12 gün önce) (21 Ekim 2024)
Önizleme sürümüv14.3.0-canary.4 [5]
Programlama diliJavaScript, TypeScript, ve Rust
PlatformWeb platformu
Boyut17.0 MB
TürWeb uygulama framework'ü
LisansMIT Lisansı
Resmî sitesinextjs.org
Kod deposugithub.com/vercel/next.js

React dokümantasyonu, Next.js'yi "Önerilen Araç Zincirleri" arasında gösterir ve "Node.js ile sunucu tarafında işlenen bir web sitesi oluştururken" geliştiricilere tavsiye eder.[6] Geleneksel React uygulamaları, içeriğini yalnızca istemci tarafında tarayıcıda işleyebilirken, Next.js bu işlevselliği sunucu tarafında işlenen uygulamaları da içerecek şekilde genişletir.

Next.js'nin telif hakları ve ticari markaları Vercel'e aittir.[7] Vercel, ayrıca açık kaynaklı gelişimini sürdürür ve yönetir.[8]

Arka plan

değiştir

Next.js, sunucu tarafı betikleme ve statik web sitesi oluşturma gibi çeşitli ek özellikler sağlayan bir React framework'üdür.[9] React, geleneksel olarak JavaScript ile istemcinin tarayıcısında işlenen web uygulamaları oluşturmak için kullanılan bir JavaScript kütüphanesi'dir.[10] Ancak, geliştiriciler bu stratejinin JavaScript erişimi olmayan veya JavaScript'i devre dışı bırakmış kullanıcılara hitap etmemek, potansiyel güvenlik sorunları, önemli ölçüde uzayan Sekme yükleme süreleri ve sitenin genel arama motoru optimizasyonuna (SEO'ya) zarar vermek gibi birkaç problem içerdiğini fark etmişlerdir.[10] Next.js gibi framework'ler, sitenin bazı bölümlerinin veya tamamının istemciye gönderilmeden önce sunucu tarafında işlenmesine izin vererek bu sorunlardan kaçınır.[10][11] Next.js, React için en popüler framework'lerden biridir.[12] Yeni bir uygulamaya başlarken kullanılabilecek birkaç önerilen "araç zincirinden" biridir ve tümü, yaygın görevlerde yardımcı olmak için bir soyutlama katmanı sağlar.[13] Next.js, Node.js gerektirir ve Node Package Manager kullanılarak başlatılabilir.

Google, 2019'da GitHub'ta 43 çekme isteği (pull request) de dahil olmak üzere büyük ölçüde Next.js projesine katkıda bulunmuştur.[14] Mart 2022 itibarıyla, bu framework Walmart, Apple, Nike, Netflix, TikTok, Uber, Lyft ve Starbucks gibi birçok büyük web sitesi tarafından kullanılmaktadır.[10] 2020'nin başlarında, Vercel yazılımdaki geliştirmeleri desteklemek için Seri A finansman turunda 21 milyon dolar topladı.[1] Framework'ün orijinal yazarı Guillermo Rauch, şu anda Vercel'in CEO'su ve projenin sorumlusu Tim Neutkens'dir.[15]

Tarihçe

değiştir

Next.js, ilk olarak 25 Ekim 2016'da GitHub üzerinde açık kaynak bir proje olarak yayınlandı.[3] İlk olarak altı temel ilke üzerinde geliştirilmiştir; herhangi bir kurulum gerektirmeyen kutudan çıkar çıkmaz işlevsellik, her yerde JavaScript kullanılması, tüm işlevlerin JavaScript ile yazılması, otomatik kod ayırma ve sunucu tarafı işleme, yapılandırılabilir veri çekme, istekleri öngörme ve dağıtımı basitleştirme.[16]

Next.js 2.0, Mart 2017'de duyuruldu ve küçük web siteleriyle çalışmayı kolaylaştıran çeşitli iyileştirmeler içeriyordu. Ayrıca, yapım verimliliğini artırdı ve sıcak modül değiştirme (hot-module replacement) özelliğinin ölçeklenebilirliğini geliştirdi.[17]

Eylül 2018'de (Sürüm 7.0'da), geliştirilmiş hata işleme ve dinamik rota yönetimini iyileştirmek için React'ın bağlam API'sı (context API) desteğiyle birlikte yayınlandı. Bu sürüm ayrıca Webpack 4'e yükseltilen ilk sürüm oldu.[18]

Sürüm 8.0, Şubat 2019'da yayınlandı ve uygulamaların sunucusuz dağıtımını sunan ilk sürüm oldu; bu sürümde, kod talep üzerine çalıştırılan lambda işlevlerine bölündü. Sürüm ayrıca statik dışa aktarma için gereken zaman ve kaynakları azalttı ve ön işleme performansını iyileştirdi.[19]

Mart 2020'de duyurulan 9.3 sürümü, çeşitli optimizasyonlar ve global Sass ve CSS modülü desteği içeriyordu.[20]

27 Temmuz 2020'de Next.js sürüm 9.5 duyuruldu ve yeni yetenekler ekledi; bunlar arasında artımlı statik yenileme, yeniden yazmalar ve yönlendirme desteği bulunmaktadır.[21]

15 Haziran 2021'de Next.js sürüm 11 yayınlandı ve diğerlerinin yanı sıra: Webpack 5 desteği, gerçek zamanlı işbirlikçi kodlama işlevselliği "Next.js Live" önizlemesi ve "Create React App"ten Next.js uyumlu bir forma otomatik dönüştürme işlevi "Create React App Migration" eklendi.[22]

26 Ekim 2021'de, Next.js 12 yayınlandı ve derleme işlemini hızlandıran Rust derleyicisi, AVIF desteği, Kenar İşlevleri & Ara Yazılım ve Yerel ESM & URL İçe Aktarımları ekledi.[23]

26 Ekim 2022'de Vercel, Next.js 13'ü yayınladı. Bu büyük sürüm, beta aşamasında yeni bir yönlendirme düzeni getirdi ve App Router eklendi. bu düzenler; React Sunucu Bileşenleri, akış ve yeni bir veri çekme yöntemleri seti içermektedir. Ayrıca, Vercel, ön uç geliştirme için Turbo adında yeni bir araç zinciri duyurdu; Turbopack, Webpack'in bir halefi olarak ve Turborepo, artımlı yapım sistemleri için.[24]

Mayıs 2023'te Vercel, Next.js 13.4'ü yayınladı. Bu sürüm, geliştiricilerin üretimde kullanabilmesi için App Router'ın kararlı sürümünü getirdi.[25]

Ekim 2023'te Vercel, Next.js 14'ü yayınladı. Bu sürüm, kenar çalışma zamanı kullanarak geliştirilmiş bellek yönetimiyle birlikte gelmiştir.[26]

Stil ve özellikler

değiştir

Next.js, stil oluşturmayı (CSS'yi) yanı sıra önceden derlenmiş Scss ve Sass, CSS-in-JS ve JavaScript destekli React desteklemektedir.[13] Ayrıca, TypeScript desteği ve akıllı paketleme ile birlikte gelir.[27] Açık kaynaklı transpiler SWC, kodu tarayıcılar tarafından kullanılabilir JavaScript'e dönüştürmek ve derlemek için kullanılır.[28] Daha sonra modülleri paketlemek için başka bir açık kaynak aracı olan Webpack kullanılır; ancak şu anda TurboPack ile değiştirilmektedir.[29] Tüm bu araçlar terminalde npm ile kullanılır.[14]

Next.js'in ana özelliği, tarayıcılardaki yükü azaltmak ve gelişmiş güvenlik sağlamak için sunucu tarafı işleme kullanmasıdır[kaynak belirtilmeli]. Bu, uygulamanın herhangi bir bölümü veya tüm sistem için yapılabilir, böylece içerik açısından zengin sayfalar sunucu tarafı işlemeye özel olarak ayrılabilir.[10] Ayrıca, site varlıklarını henüz indirmemiş olan tarayıcıların yükünü azaltmak için yalnızca ilk ziyaretçiler için de yapılabilir.[11] "Sıcak yeniden yükleme" özelliği, yapılan değişiklikleri algılar ve uygun sayfaları yeniden oluşturur, böylece sunucunun yeniden başlatılmasına gerek kalmaz. Bu, uygulama koduna yapılan değişikliklerin hemen tarayıcıda yansıtılmasını sağlar, ancak bazı tarayıcıların sayfanın yenilenmesini gerektirebilir.[10] Yazılım, geliştirici kolaylığı için sayfa tabanlı yönlendirme kullanır ve dinamik yönlendirmeyi destekler. Diğer özellikler arasında modüllerin canlı olarak değiştirilmesine olanak tanıyan sıcak modül değişimi, yalnızca sayfayı yüklemek için gerekli olan kodu içeren otomatik kod ayırma ve yükleme süresini azaltmak için sayfa ön yüklemesi bulunur.[10]

Next.js ayrıca Artımlı Statik Yenileme[30] ve statik site oluşturmayı destekler - derlenmiş bir web sitesi versiyonu genellikle yapılandırma sırasında oluşturulur ve .next klasörü olarak kaydedilir. Bir kullanıcı bir istek yaptığında, önceden oluşturulmuş ve statik HTML sayfaları olan versiyon önbelleğe alınarak onlara gönderilir. Bu, yükleme süresini çok hızlı yapar, ancak sık sık değişen ve çok fazla kullanıcı girdisi kullanan etkileşimli siteler için uygun değildir.

Ayrıca bakınız

değiştir

Kaynakça

değiştir
  1. ^ a b Asay, Matt (21 Nisan 2020). "How Next.js aims to simplify front-end development". TechRepublic (İngilizce). 3 Haziran 2020 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  2. ^ "vercel/next.js". GitHub. 16 Mart 2019 tarihinde kaynağından arşivlendi. Erişim tarihi: 17 Mart 2019. 
  3. ^ a b "Next.js First Release". GitHub. 14 Mart 2019. 10 Ekim 2020 tarihinde kaynağından arşivlendi. Erişim tarihi: 17 Mart 2019. 
  4. ^ "Release 15.0.0". 21 Ekim 2024. Erişim tarihi: 22 Ekim 2024. 
  5. ^ "Releases · vercel/next.js". GitHub. Vercel. 16 Nisan 2024 tarihinde kaynağından arşivlendi. Erişim tarihi: 16 Nisan 2024. 
  6. ^ "Recommended Toolchains" (HTML). React documentation (İngilizce). 17 Mayıs 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 10 Temmuz 2021. 
  7. ^ Next.js Brand Guidelines, 26 Ağustos 2022, 29 Şubat 2024 tarihinde kaynağından arşivlendi, erişim tarihi: 3 Eylül 2024 
  8. ^ "Develop. Preview. Ship. For the best frontend teams – Vercel" (HTML). vercel.com (İngilizce). 6 Ekim 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 22 Eylül 2020. 
  9. ^ "Differences Between Static Generated Sites And Server-Side Rendered Apps". Smashing Magazine (İngilizce). 2 Temmuz 2020. 21 Mayıs 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 19 Ekim 2020. 
  10. ^ a b c d e f g Thakkar, Mohit (2020), Thakkar, Mohit (Ed.), "Next.js", Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (İngilizce), Berkeley, CA: Apress, ss. 93-137, doi:10.1007/978-1-4842-5869-9_3, ISBN 978-1-4842-5869-9, 6 Haziran 2022 tarihinde kaynağından arşivlendi, erişim tarihi: 20 Ekim 2020 
  11. ^ a b Thakkar, Mohit (2020), Thakkar, Mohit (Ed.), "Adding Server-Side Rendering to Your React Application", Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (İngilizce), Berkeley, CA: Apress, ss. 139-152, doi:10.1007/978-1-4842-5869-9_4, ISBN 978-1-4842-5869-9, 26 Ekim 2020 tarihinde kaynağından arşivlendi, erişim tarihi: 20 Ekim 2020 
  12. ^ Asay, Matt (2 Aralık 2019). "Why front-end development may be the new frontier". TechRepublic (İngilizce). 25 Mart 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  13. ^ a b Lukman, Adebiyi Adedotun (17 Eylül 2020). "Comparing Styling Methods In Next.js". Smashing Magazine (İngilizce). 19 Mart 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  14. ^ a b Asay, Matt (1 Şubat 2020). "An insider's look at Google's web framework contributions to Next.js and more". TechRepublic (İngilizce). 21 Mayıs 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 19 Ekim 2020. 
  15. ^ Donovan, Ryan (7 Ekim 2020). "Static site generation with single page app functionality? That's what's coming Next(.js)" (html). Stack Overflow Blog (İngilizce). 25 Mart 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  16. ^ Krill, Paul (31 Ekim 2016). "Next step after Node.js: Framework for 'universal' JavaScript apps". InfoWorld (İngilizce). 21 Mayıs 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  17. ^ Krill, Paul (28 Mart 2017). "Next.js 2.0 plays better with React and JavaScript". InfoWorld (İngilizce). 18 Mart 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  18. ^ Krill, Paul (21 Eylül 2018). "Next.js 7 framework compiles faster, supports WebAssembly". InfoWorld (İngilizce). 21 Mayıs 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  19. ^ Krill, Paul (14 Şubat 2019). "Next.js 8 now supports serverless apps". InfoWorld (İngilizce). 21 Mayıs 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  20. ^ Krill, Paul (12 Mart 2020). "Next.js upgrade emphasizes static site generation". InfoWorld (İngilizce). 21 Mayıs 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 20 Ekim 2020. 
  21. ^ Krill, Paul (27 Temmuz 2020). "Next.js adds incremental static pages regeneration". InfoWorld. 2 Ekim 2020 tarihinde kaynağından arşivlendi. Erişim tarihi: 22 Eylül 2020. 
  22. ^ "Next.js 11". 7 Mayıs 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 10 Temmuz 2021. 
  23. ^ "Next.js 12". nextjs.org (İngilizce). 2 Haziran 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 27 Ekim 2021. 
  24. ^ Orbán, Balázs (25 Ekim 2022). "Next.js 13". nextjs.org (İngilizce). 7 Haziran 2023 tarihinde kaynağından arşivlendi. Erişim tarihi: 9 Haziran 2023. 
  25. ^ Markbåge, Sebastian; Neutkens, Tim (4 Mayıs 2023). "Next.js 13.4". nextjs.org (İngilizce). 6 Haziran 2023 tarihinde kaynağından arşivlendi. Erişim tarihi: 7 Haziran 2023. 
  26. ^ "Next.js 14.0.0". nextjs.org (İngilizce). 8 Aralık 2023. Erişim tarihi: 26 Kasım 2023. 
  27. ^ Krill, Paul (14 Şubat 2019). "Next.js 8 now supports serverless apps". InfoWorld. 2 Ekim 2020 tarihinde kaynağından arşivlendi. Erişim tarihi: 22 Eylül 2020. 
  28. ^ "Architecture: Next.js Compiler | Next.js". nextjs.org (İngilizce). 19 Ağustos 2023 tarihinde kaynağından arşivlendi. Erişim tarihi: 19 Ağustos 2023. 
  29. ^ "Architecture: Turbopack | Next.js". nextjs.org (İngilizce). 19 Ağustos 2023 tarihinde kaynağından arşivlendi. Erişim tarihi: 19 Ağustos 2023. 
  30. ^ "Incremental Static Regeneration with Next.js". Vercel (İngilizce). 10 Nisan 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Mart 2022. 

Dış bağlantılar

değiştir