Next.js Projesi Oluşturma

Artık araçlarımız hazır. Şimdi Next.js projemizi oluşturacağız.

1. Proje Klasörü Seçin

Önce projelerinizi tutacağınız bir klasöre gidin:

# Windows
cd C:\Projeler

# Mac/Linux
cd ~/Projeler

# Veya VS Code'da klasör açın, sonra Terminal açın (Ctrl+`)

2. Proje Oluşturma Komutu

npx create-next-app@latest headless-wordpress

npx = Node Package Executor, paketi indirip çalıştırır
create-next-app@latest = En son Next.js şablonu
headless-wordpress = Proje adı (istediğiniz adı verebilirsiniz)

3. Kurulum Soruları

Size bazı sorular sorulacak. Her birini açıklayalım:

Would you like to use TypeScript?

→ Yes (önerilen)

TypeScript, JavaScript'in tip güvenli versiyonudur. Hataları önceden yakalar.

Would you like to use ESLint?

→ Yes

ESLint kod kalitesini kontrol eder, kötü pratikleri uyarır.

Would you like to use Tailwind CSS?

→ Yes (önerilen)

Tailwind, hızlı stil yazmanızı sağlayan bir CSS framework'üdür.

Would you like to use src/ directory?

→ No

Basitlik için ana dizinde kalalım.

Would you like to use App Router?

→ Yes (önemli!)

App Router, Next.js 13+ ile gelen yeni ve daha güçlü yönlendirme sistemidir.

Would you like to customize the default import alias?

→ No

Varsayılan @ alias'ı kullanacağız.

4. Kurulum Tamamlandı

Kurulum birkaç dakika sürebilir. Tamamlandığında şunu göreceksiniz:

Success! Created headless-wordpress at /path/to/headless-wordpress

5. Projeye Girin

cd headless-wordpress

6. Projeyi VS Code'da Açın

code .

Veya VS Code'u açın ve File > Open Folder ile proje klasörünü seçin.

7. Geliştirme Sunucusunu Başlatın

npm run dev

Şu çıktıyı görmelisiniz:

▲ Next.js 14.x.x
- Local: http://localhost:3000
- Ready in 2s

8. Tarayıcıda Kontrol

Tarayıcıda http://localhost:3000 adresini açın.

Next.js hoş geldin sayfasını görmelisiniz! 🎉

Next.js Projesi Oluşturma