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@latestBu 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
