Next.js 13 yeni App Router ile bir proje oluşturma

Bu yazıda React’in en güçlü frameworklerinden olan Next.js ile bir proje oluşturacağız ve basit yeniliklerine bakacağız.
Next.js sunucu tarafında react çalıştırmak ve derlemek için kullanılan bir frameworktür. Bu şu demek : normalde react web tarayıcısında web sayfasını javascript kullanarak oluştururken, Next.js ise sunucuda http isteği geldiğinde html dosyasını oluşturur ve kullanıcıya gönderir. Kısaca böyle açıklayabiliriz.

Next.js projesi nasıl oluşturulur

Öncelike Next.js projesi oluşturmak için bilgisayarınızda Node.js kurulu olması gerekiyor. Kurulu değilse buradan indirip kurabilirsiniz.

Ardından bir terminal penceresi açıp projeyi oluşturmak istediğiniz klasöre cd komutu ile girip aşağıdaki komutu yazmalısınız

npx create-next-app@latest

Bu komutu yazdıktan sonra size next.js oluşturma paketini kurmak için soracaktır. Enter diyebilirsiniz.

Ardından size projeye eklenebilir özellikler hakkında soracaktır buradan istediğiniz seçebilirsiniz. Mesela ben Typescript ve Tailwindcss istiyorum. Ayrıca yeni özellikleri kullanmak için App Router sorusuna Yes demelisiniz. Tüm sorulara yanıt verdikten sonra projenin paketlerini indirmeye başlar

Projeye ilk bakış

Projeyi Vscode ile açıp ilk baktığımız zaman şöyle bir klasör yapısı görüyoruz. Projenin dosyaları app klasörünün içinde, ana dizinde ise ayar dosyaları ve node paketleri var. Public klasörünün içinde ise static olarak yayınlanacak css veya görsel dizi dosyalar var.

Next.js 13 App directory yapısı

Next.js 13 ile birlikte app directory yapısında her klasör bir route’ı belirtiyor. Yani login klasörü www.adres.com/login adresinin web sayfasını göndermek için ayrılmış. Ama bunun için ayrıca bu klasöründe içinde oluşturulacak page.js dosyası gerekli. Ben TS kullandığım için page.tsx olan dosya aşağıdaki örnekte /login adresine gelen kullanıcılara gönderilecek web sayfasını oluşturuyor.

Her klasörün içinde bir de layout dosyası olabiliyor. Ana dizindeki layout dosyası tüm web sayfalarının layoutunu kapsarken mesela login klasörü içindeki layout dosyası tüm alt dizinlerin layoutunu kapsıyor.

Next.js 13 için İngilizce kaynaklar

Resmi dokümantasyonu : https://nextjs.org/docs
Youtube tutorial : Next.js 13 Crash Course | App Directory, React Server Components & More

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top