Bu yazıda, Next.js kullanarak nasıl bir web uygulaması geliştirebileceğinizi kısa ve anlaşılır bir şekilde ele alacağız. Next.js, React tabanlı güçlü bir çerçeve olarak sunucu tarafında işleme (SSR) ve SEO uyumlu dinamik uygulamalar oluşturma konusunda oldukça başarılıdır. Özellikle Vercel’in desteğiyle popülerleşen Next.js, hem front-end hem de back-end işlemleri bir arada yürüterek geliştiricilere kapsamlı bir çözüm sunar.
Ayrıca TypeScript desteği ile daha güvenli ve hatasız bir kod yazım deneyimi sunar. Bu yazıda, Next.js ile temel bir projeyi baştan sona nasıl kurabileceğinizi ve canlı ortama nasıl taşıyabileceğinizi basit adımlarla anlatacağız.
İlk olarak projemizin ismini küçük harflere uygun olarak merhaba_hsd olarak seçelim. Burada ise TypeScript için YES, ESLint desteği için YES, dahili olarak Tailwind CSS için YES, kaynak dosyalarımız için src klasörü için NO, App Router hizmeti için YES ve Alias ekleme için NO seçeneklerini seçelim. Siz farklı olarak ihtiyaçlarınıza göre istediğinizi seçebilirsiniz.
Kurulum için ilgili paketlere dikkat edelim. Burada React ve React-DOM projemizin için otomatik olarak kurulmaktadır. Ayrıca kurulum ve proje oluşturma işlemi ise tamamlanmıştır. NPX ile birlikte bilgisayarınızın istediğiniz alanında Next.js veya benzeri çerçeveleri kolayca kurabilirsiniz. NPX özellikle anlık olarak kurmak konusunda yardımcıdır, projeleriniz için Next.js bağımlılıklarını ve hazır tema paketini otomatik olarak internet üzerinden almaktadır.
Şimdi ise projemizin içine giriş yapalım:
Şimdi ise bir geliştirici profili için NPM kullanalım:
Fark ettiğiniz gibi ilk olarak sunucumuz başlatıldı, okuma ve derleme işlemi tamamlandı, eğer yerel olarak açılan sunucumuzun ilgili portuna (dahili olarak 3000) istek attığımızda bize sayfayı derlenmiş olarak göstermiş olacak.
Aşağıda ise tarayıcımızın adres çubuğuna http://localhost:3000 yazdığımızda erişim sağladığımız sayfa gösterilmektedir. HTTP protokolü üzerinde GET ile bir istek ve sonuç elde ettik.
Eğer detaylı bir şekilde incelemek isterseniz Next.js dosya yapısını ve bizim bu yazımızda kullanacağımız page.tsx dosya içeriğini görmüş olacaksınız. Bizim için önceden yazılmış bu sayfayı şimdi değiştireceğiz.
page.tsx dosyasının bulunduğu klasöre HSD.png isimli bir görsel ekledim. Burada ise Next.js içinde yer alan Image componentini kullanıp logoyu sayfaya eklemiş olacağız. Derleme sırasında hata almamak için dosya yollarına dikkat etmemiz gerekmektedir. Aşağıdaki kodu page.tsx içine kopyala yapıştır yapalım.
import Image from "next/image";
import logo from "./HSD.png"
Eğer SHARP için bir uyarı bilgisi gelirse isteğe bağlı olarak aşağıdaki paketi kurabilirsiniz.
Şimdi tüm sorunları çözünce projemiz başarılı bir şekilde derlendi. Statik olarak sayfalarımız başarılı bir şekilde oluşturuldu. Ayrıca ilgili işlemler için boyut bilgilerine de ulaşabilirsiniz.
Şimdi ise artık deploy edilmiş projemizi açalım. Geliştirici sürümüne göre daha hızlı olarak kullanabileceğimiz bir WEB uygulamamız oldu.
Bu yazıda ele aldığımız adımlar doğrultusunda Next.js ile ilk projenizi başarıyla oluşturup, canlıya alabilir ve dinamik bir kullanıcı deneyimi sunabilirsiniz. Artık Next.js’in sunduğu avantajlarla projelerinizi daha profesyonel bir seviyeye taşıma yolunda önemli bir adım attınız.
Buraya kadar okuduğunuz için teşekkür ederim
Ayrıca TypeScript desteği ile daha güvenli ve hatasız bir kod yazım deneyimi sunar. Bu yazıda, Next.js ile temel bir projeyi baştan sona nasıl kurabileceğinizi ve canlı ortama nasıl taşıyabileceğinizi basit adımlarla anlatacağız.
Next.js Nedir?
Next.js, kullanıcı arayüzleri oluşturmak için kullanılan tam yığın bir web uygulama çerçevesidir ve React tabanlı olarak geliştirilmektedir. Vercel tarafından geliştirilen Next.js, statik olarak uygulama geliştirme, React tabanlı proje paket yönetimi, derleme ve sunucu üzerinde işleme gibi görevleri gerçekleştirebilmektedir. Server-Side rendering işlemlerini yönetmek için React’a birçok özellik ekler ve kullanılmaktadır. Next.js, JavaScript ile geliştirme süreçlerinde oluşan SEO gibi sorunların çözümü için popüler olarak kullanılmakta ve daha iyi seviyede React tabanlı siteler geliştirme imkanı sunmaktadır. Node.js ve Node Package Manager ile birlikte kullanılabilen bu web geliştirme çerçevesi günümüzde Apple, Netflix, TikTok gibi dünya devleri tarafından tercih edilmektedir.React ile Farkları Nedir?
React genel olarak bir front-end kütüphanesidir; ancak Next.js, React kütüphanesini kullanan bir back-end çerçevesidir. React ile grafik arayüz tabanlı işlemler yapılırken, Next.js ile yönlendirme, API işlemleri, kimlik doğrulama gibi işlemleri gerçekleştirebilirsiniz. React için birçok paketi manuel olarak kurmanız gerekmektedir; fakat Next.js ile birçok özel paket yüklü olarak gelmektedir. React kodları istemci tarafında, yani tarayıcınızda işlenirken, Next.js kodları server-side rendering ile sunucu tarafından işlenir ve bu, daha güvenli bir derleme imkanı sağlar.Next.js Özellikleri ve Avantajları Nelerdir?
Sunucu bileşenleri üzerinde iç içe yönlendirme, yükleme durumları ve hata ayıklama işlemleri için büyük bir kolaylık sağlamaktadır. Hem sunucu hem istemci tarafında kodlarınızı işleyebilir ve dinamik web uygulamaları oluşturma imkanı sunmaktadır. async/await ve fetch ile birlikte gelişmiş API yönetimi sağlayabilirsiniz. Tailwind CSS gibi popüler kütüphaneleri doğrudan kullanabilirsiniz. Front-end ve back-end işlemleriniz kolaylık sağlamaktadır. SEO açısından ise daha hızlı ve statik uygulamalar geliştirmenize olanak tanır. ESLint ile birlikte kullanılabilme imkanı sunmaktadır.Projemizde TypeScript’in Önemi
Günümüzde JavaScript ile hem web hem de mobil uygulamalar geliştirebilmekteyiz. Özellikle Next.js gibi büyük bir geliştirme imkanı sunan çerçevelerde TypeScript kullanmanızı öneririm. Sunucu tarafında da işler yapacağımız için nesne yönelimli programlamaya önem vereceğiz. JavaScript’e göre daha güçlü hata ayıklama, derleme ve statik yazım desteği vardır. Bununla birlikte yazdığınız kodlar, istemci için JavaScript’e otomatik olarak dönüştürülmektedir. Derleme zamanında hataları yakalama, çalışma zamanı sorunlarını azaltma ve fonksiyonlara ve nesnelere yönelik statik tipleme özelliği size avantaj kazandıracaktır.Next.js ile İlk Proje Yapımı
İlk olarak NPX ile Next.js projesi açalım. Burada en son Next.js sürümünü kurmuş olacağız.İlk olarak projemizin ismini küçük harflere uygun olarak merhaba_hsd olarak seçelim. Burada ise TypeScript için YES, ESLint desteği için YES, dahili olarak Tailwind CSS için YES, kaynak dosyalarımız için src klasörü için NO, App Router hizmeti için YES ve Alias ekleme için NO seçeneklerini seçelim. Siz farklı olarak ihtiyaçlarınıza göre istediğinizi seçebilirsiniz.
Kurulum için ilgili paketlere dikkat edelim. Burada React ve React-DOM projemizin için otomatik olarak kurulmaktadır. Ayrıca kurulum ve proje oluşturma işlemi ise tamamlanmıştır. NPX ile birlikte bilgisayarınızın istediğiniz alanında Next.js veya benzeri çerçeveleri kolayca kurabilirsiniz. NPX özellikle anlık olarak kurmak konusunda yardımcıdır, projeleriniz için Next.js bağımlılıklarını ve hazır tema paketini otomatik olarak internet üzerinden almaktadır.
Şimdi ise projemizin içine giriş yapalım:
Şimdi ise bir geliştirici profili için NPM kullanalım:
Fark ettiğiniz gibi ilk olarak sunucumuz başlatıldı, okuma ve derleme işlemi tamamlandı, eğer yerel olarak açılan sunucumuzun ilgili portuna (dahili olarak 3000) istek attığımızda bize sayfayı derlenmiş olarak göstermiş olacak.
Aşağıda ise tarayıcımızın adres çubuğuna http://localhost:3000 yazdığımızda erişim sağladığımız sayfa gösterilmektedir. HTTP protokolü üzerinde GET ile bir istek ve sonuç elde ettik.
Eğer detaylı bir şekilde incelemek isterseniz Next.js dosya yapısını ve bizim bu yazımızda kullanacağımız page.tsx dosya içeriğini görmüş olacaksınız. Bizim için önceden yazılmış bu sayfayı şimdi değiştireceğiz.
page.tsx dosyasının bulunduğu klasöre HSD.png isimli bir görsel ekledim. Burada ise Next.js içinde yer alan Image componentini kullanıp logoyu sayfaya eklemiş olacağız. Derleme sırasında hata almamak için dosya yollarına dikkat etmemiz gerekmektedir. Aşağıdaki kodu page.tsx içine kopyala yapıştır yapalım.
import Image from "next/image";
import logo from "./HSD.png"
Next.js ile Projemizi Deploy Yapımı
Şimdi projemizi canlı bir şekilde kullanmak için derleme işlemlerini yapmamız gerekmektedir. Bunun için NPM ile build işlemini yapalım.Eğer SHARP için bir uyarı bilgisi gelirse isteğe bağlı olarak aşağıdaki paketi kurabilirsiniz.
Şimdi tüm sorunları çözünce projemiz başarılı bir şekilde derlendi. Statik olarak sayfalarımız başarılı bir şekilde oluşturuldu. Ayrıca ilgili işlemler için boyut bilgilerine de ulaşabilirsiniz.
Şimdi ise artık deploy edilmiş projemizi açalım. Geliştirici sürümüne göre daha hızlı olarak kullanabileceğimiz bir WEB uygulamamız oldu.
Sonuç
Sonuç olarak, Next.js ile web uygulaması geliştirmek hem hızlı hem de verimli bir süreç sunmaktadır. React altyapısına dayanan bu çerçeve, server-side rendering ve SEO uyumluluğu gibi özellikleriyle modern web geliştirme ihtiyaçlarına güçlü bir çözüm sağlar. TypeScript entegrasyonu ile daha güvenilir ve hatasız kod yazımı mümkün hale gelirken, Vercel gibi platformlar sayesinde projelerinizi kolayca deploy edebilirsiniz.Bu yazıda ele aldığımız adımlar doğrultusunda Next.js ile ilk projenizi başarıyla oluşturup, canlıya alabilir ve dinamik bir kullanıcı deneyimi sunabilirsiniz. Artık Next.js’in sunduğu avantajlarla projelerinizi daha profesyonel bir seviyeye taşıma yolunda önemli bir adım attınız.
Buraya kadar okuduğunuz için teşekkür ederim
