Fatih SoysalGüçlü bir React frameworkü olan Next.js , modern ölçeklenebilir web uygulamalarının tasarımını basitleştirir. Bu kılavuzda Next.js’yi resmi belgeleri kullanarak yükleme adımlarını inceleyeceğiz ve karmaşık geliştirme ortamları için ek kavramları tartışacağız.
Next.js, React, webpack ve babel tabanlıdır. Web uygulamaları geliştirmek için harika bir araçtır ve sunucu tarafı oluşturmasıyla tanınır.
Önkoşul
Next.js’yi yüklemeden önce Node.js’yi yüklemeniz gerekir. Bilgisayarınızda npm ve Node.js’nin yüklü olduğunu doğrulayın. Değilse Node.js’yi edinin . resmi web sitesinden ve yükleyin.
Düğümün makinenizde güncel olduğunu doğrulayın. Doğrulamak için terminalinizde aşağıdaki komutu çalıştırın ve ardından sonucu https://nodejs.org/ adresinde bulunan en yeni LTS sürümüyle karşılaştırın.
1 | node -v |
Node.js’yi yükledikten sonra komut satırınızda npm komutu görünecektir.
Artık Node’u en son sürüme ve npm’ye güncellediğinize göre, istediğiniz yerde, örneğin ana klasörünüzde boş bir klasör oluşturun ve şuraya gidin:
1 | mkdir nextjs |
1 | cd nextjs |
ve projenizi oluşturun.
next.js’yi Otomatik veya Manuel olarak yüklemenin iki yöntemi vardır . Next.js’nin resmi web sitesi, her şeyi sizin için otomatik olarak ayarlayan otomatik kurulumun kullanılmasını önerir.
Otomatik Kurulum
Otomatik kurulum için terminalinizi başlatın ve sonraki komutu uygulayın,
1 | npx create-next-app my-nextjs-app |
Eğer “yarn” kullanmayı tercih ediyorsanız yeni bir uygulama oluşturmak için Next.js’yi kullanın.
1 | yarn create next-app my-nextjs-app |
Şimdi aşağıda belirtilen komutu çalıştırarak Proje Dizinine gidin,
1 | cd my-nextjs-app |
Geliştirme sunucusunu başlatmak için aşağıdaki komutu kullanın:
1 | npm run dev |
next.js uygulamamız artık http://localhost:3000/ üzerinde başarıyla çalışıyor
Manuel Kurulum
Manuel olarak kurmak için bir terminal penceresi açın ve aşağıdaki komutu yazın,
1 | npm install next@latest react@latest react-dom@latest |
package.json dosyanızı açtıktan sonra aşağıda listelenen scriptleri ekleyin:
Bu komut dosyaları, bir uygulamanın oluşturulmasında yer alan birçok aşamaya atıfta bulunur:
Gelişmiş kurulumlar, özellikler ve en iyi uygulamalar için Next.js adresindeki resmi Next.js belgelerine göz atın.
dev: Next.js’yi geliştirme modunda başlatmak için “next dev”i çalıştırır.
build: Uygulamayı üretim kullanımına yönelik olarak oluşturmak için “sonraki yapıyı” çalıştırır.
start: Next.js üretim sunucusunu başlatmak için “next start”ı çalıştırır.
lint: Next.js’nin yerleşik ESLint yapılandırmasını ayarlamak için “next lint”i çalıştırır.
Dosya sistemi yönlendirmesi Next.js tarafından kullanıldığından, uygulamanızdaki rotalar dosyalarınızın düzenlenme şekline göre belirlenir.
Next.js, yeni uygulamalar geliştirirken Uygulama Yönlendiricisini kullanmanızı önerir. Bu yönlendirici, topluluk geri bildirimlerine dayalı olarak Pages Router’ın bir güncellemesidir ve React’in en yeni özelliklerinden yararlanmanızı sağlar.
Layout.tsx ve Page.tsx dosyaları app/ alt dizini oluşturulduktan sonra eklenmelidir. Kullanıcı uygulamanın köküne (/) bastığında bunlar sunulacaktır.
app/layout.tsx içinde bir kök düzen oluşturun ve gerekli <html> ve <body> etiketlerini ekleyin:
Son olarak, app/page.tsx ana sayfasına bazı ön içerik ekleyin:
Resmi web siteleri olan App Router’ı ziyaret ederek “Uygulama Yönlendirici” hakkında daha fazla bilgi edinebilirsiniz .
Uygulama Yönlendiricisi yerine Sayfa Yönlendiricisini kullanmayı tercih ediyorsanız, projenizin kökünde bir sayfalar/ dizin oluşturabilirsiniz .
Bundan sonra, sayfalar klasörüne bir index.tsx dosyası ekleyin. Bu sizin ana sayfanız olacak (/):
Genel düzeni oluşturmak için, pages/ next’in içine bir _app.tsx dosyası ekleyin. Resmi bağlantılarını ziyaret ederek özel uygulama dosyaları hakkında daha fazla bilgi edinebilirsiniz: Özel Uygulama
Son olarak, sunucunun ilk yanıtını yönetmek için sayfaların/ içine bir _document.tsx dosyası ekleyin . Belge dosyası özelleştirme hakkında daha fazla bilgi edinin.
Sayfa Yönlendirici hakkında daha fazla bilgiyi resmi bağlantısına bakarak öğrenebilirsiniz: Sayfa Yönlendirici
Yazı tipleri ve fotoğraflar gibi statik malzemeleri depolamak için ortak bir klasör oluşturun. Kodunuz daha sonra temel URL (/) ile başlayarak ortak dizinde bulunan dosyalara referans verebilir.
Geliştirme sunucusunu çalıştırarak başlatın,
1 | npm run dev |
Düzeltilen sonucu tarayıcınızda görüntülemek için app/page.tsx (veya sayfaları/index.tsx) dosyasını düzenleyin ve kaydedin.
Next.js kullanılarak gelişmiş kurulumlar mümkündür. Örneğin, TypeScript desteğini etkinleştirmek için aşağıdakiler kullanılabilir.
1 | npx create-next-app my-nextjs-app --example with-typescript |
