Windows'da Next.js kullanmaya başlama

Next.js web çerçevesini yüklemenize ve Windows'da çalışmaya başlamanıza yardımcı olacak bir kılavuz.

Next.js, React tabanlı web uygulamaları oluşturmak için uyarlanmış ve hem statik hem de sunucu tarafı işlenmiş web uygulamaları için destek sunan bir JavaScript çerçevesidir. En iyi yöntemler göz önünde bulundurularak oluşturulan Next.js, en az yapılandırma gerektiren tutarlı bir şekilde "evrensel" web uygulamaları oluşturmanıza olanak tanır. "isomorfik" olarak da adlandırılan bu "evrensel" sunucu tarafından işlenen web uygulamaları, istemci ile sunucu arasında kod paylaşır. Next.js, geliştiricilerin kolayca hızlı, ölçeklenebilir ve SEO dostu web uygulamaları oluşturmasına olanak tanır.

React ve React tabanlı diğer JavaScript çerçeveleri hakkında daha fazla bilgi edinmek için React'e genel bakış sayfasına bakın.

Önkoşullar

Bu kılavuzda, aşağıdakiler dahil olmak üzere Node.js geliştirme ortamınızı ayarlama adımlarını tamamladığınız varsayılır:

• Windows 10'un en son sürümünü (Sürüm 1903+, Derleme 18362+) veya Windows 11'i yükleyin
• Linux dağıtımı (Ubuntu gibi) dahil olmak üzere Linux için Windows Alt Sistemi (WSL)yükleyin ve WSL 2 modunda çalıştığından emin olun. PowerShell'i açıp şunu girerek bunu deleyebilirsiniz: wsl -l -v
• WSL 2'ye Node.js yükleme: Bu sürüm yöneticisi, paket yöneticisi, Visual Studio Code ve Uzaktan Geliştirme uzantısını içerir.

Daha iyi performans hızı, sistem çağrısı uyumluluğu ve Linux sunucuları veya Docker kapsayıcıları çalıştırırken eşlik için NodeJS uygulamalarıyla çalışırken Linux için Windows Alt Sistemi'ni kullanmanızı öneririz.

Önemli

WSL ile Linux dağıtımı yüklemek, dosyaları depolamak için bir dizin oluşturur: \\wsl\Ubuntu-20.04 (kullandığınız Linux dağıtımıyla Ubuntu-20.04'ü kullanın). Bu dizini Windows Dosya Gezgini'nde açmak için WSL komut satırınızı açın, cd ~kullanarak giriş dizininizi seçin, ardından komutunu girin explorer.exe . NodeJS'yi yüklememeye veya bağlı C sürücüsünde (/mnt/c/Users/yourname$) üzerinde çalışacağınız dosyaları depolamamaya dikkat edin. Bunun yapılması yükleme ve derleme sürelerinizi önemli ölçüde yavaşlatır.

Next.js yükleme

Next.js'ı yüklemek için, içerisinde next, react ve react-dom yüklemelerini de içeren:

1. WSL komut satırını açın (örneğin, Ubuntu).

2. Yeni bir proje klasörü oluşturun: mkdir NextProjects ve şu dizini girin: cd NextProjects.

3. Next.js yükleyin ve bir proje oluşturun ('my-next-app' yerine uygulamanızı çağırmak istediğiniz öğeyi yazın): npx create-next-app@latest my-next-app.

4. Paket yüklendikten sonra, dizinleri yeni uygulama klasörünüz olarak değiştirin ve cd my-next-appNext.js projenizi VS Code'da açmak için kullanın code . . Bu, uygulamanız için oluşturulan Next.js çerçevesine bakmanıza olanak sağlar. VS Code'un uygulamanızı WSL-Remote bir ortamda açtığına dikkat edin (VS Code pencerenizin sol alt kısmındaki yeşil sekmede belirtildiği gibi). Bu, Windows işletim sisteminde düzenlemek için VS Code kullanırken uygulamanızın Linux işletim sisteminde çalışmaya devam ettiğini gösterir.

   

5. Next.js yüklendikten sonra bilmeniz gereken 3 komut vardır:

   • npm run dev Next.js geliştirme modunda başlatmak için.
   • npm run build üretim amaçlı kullanım için uygulamayı hazırlamak.
   • npm start bir Next.js üretim sunucusu başlatmak için.

   VS Code'da tümleşik WSL terminalini açın (View > Terminal). Terminal yolunun proje dizininize (~/NextProjects/my-next-app$) işaretlendiğinden emin olun. Ardından aşağıdakini kullanarak yeni Next.js uygulamanızın geliştirme örneğini çalıştırmayı deneyin: npm run dev

6. Yerel geliştirme sunucusu başlatılır ve proje sayfalarınız derlendikten sonra terminaliniz görüntülenir

   - Local: http://localhost:3000
   ✔ Ready
   

   Yeni Next.js uygulamanızı bir web tarayıcısında açmak için bu localhost bağlantısını seçin.

   localhost:3000'da çalışan uygulamanız

7. app/page.tsx dosyasını VS Code düzenleyicinizde açın. Get started by editing.. bulun ve <p> etiketindeki her şeyi This is my new Next.js app!the page title ile değiştirin. Web tarayıcınız hala localhost:3000'de açıkken, değişikliğinizi kaydedin ve sık erişimli yeniden yükleme özelliğinin tarayıcıda otomatik olarak derlenip güncelleştirileceğini fark edin.

VS Code'un hata ayıklayıcısını Next.js uygulamanızla birlikte F5 tuşuna basarak veya menü çubuğundaki Görünüm > Hata Ayıklama (Ctrl+Shift+D) ve Görünüm > Hata Ayıklama Konsolu (Ctrl+Shift+Y) seçeneklerini kullanarak çalıştırabilirsiniz. Hata ayıklama penceresinde dişli simgesini seçerseniz, hata ayıklama kurulum ayrıntılarını kaydetmeniz için bir başlatma yapılandırması (launch.json) dosyası oluşturulur. Daha fazla bilgi edinmek için bkz. VS Code Debug Etme.

Next.jshakkında daha fazla bilgi edinmek için Next.js belgelerine bakın.