NextJS Tutorial — “Hello World”

İlk projemizi oluşturalım. NextJS projemizi oluşturmak için terminal’i açıyoruz.

npx create-next-app@latest

Yukarıdaki kodu yazıp NextJS’in son versiyonunda projemizin kurulumuna başlıyoruz.

Kurulum işlemini başlattıktan sonra aşağıdaki şekilde sorular sorulmaktadır. Bu soruların anlamlarına ve ne işe yaradıklarına aşağıda ulaşabilirsiniz.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

1-Projeyi adlandırmak senin tercihine bağlıdır. “my-app” gibi bir isim kullanabilirsin ya da projenin doğasına uygun farklı bir isim seçebilirsin.

2-TypeScript kullanmak isteyip istemediğine bağlı olarak “No” veya “Yes” seçeneklerinden birini seçebilirsin.

3-ESLint kullanmak isteyip istemediğine bağlı olarak “No” veya “Yes” seçeneklerinden birini seçebilirsin.

4-Tailwind CSS kullanmak isteyip istemediğine bağlı olarak “No” veya “Yes” seçeneklerinden birini seçebilirsin.

5-“src/” dizini kullanmak isteyip istemediğine bağlı olarak “No” veya “Yes” seçeneklerinden birini seçebilirsin.

6-App Router kullanmak isteyip istemediğine bağlı olarak “No” veya “Yes” seçeneklerinden birini seçebilirsin.

7-Varsayılan import alias’ını (@/*) özelleştirmek isteyip istemediğine bağlı olarak “No” veya “Yes” seçeneklerinden birini seçebilirsin. Eğer özelleştirmek istiyorsan, hangi import alias’ını kullanmak istediğini belirtmelisin (örneğin, @/my-alias).

Tüm bu adımları geçtikten sonra projemizi oluşturduk. Projemizi başlatma ayarlarını göz atmak için package.json klasörüne gidiyoruz.Aşağıdaki şekilde bir kısım göreceksiniz.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

1-dev: Bu komut, Nextjs uygulamanızı geliştirme modunda çalıştırmak için kullanılır. “next dev” komutunu çalıştırdığınızda, geliştirme sunucusu başlatılır ve değişiklikleri otomatik olarak algılar, ardından uygulamanızı canlı olarak günceller.

next dev

2-build: Bu komut, Nextjs uygulamanızı üretim ortamına uygun bir şekilde derlemek için kullanılır. “next build” komutu çalıştırıldığında, uygulamanızın optimize edilmiş bir build'i oluşturulur.

next build

3-start: Bu komut, build hale getirilmiş Nextjs uygulamanızı başlatmak için kullanılır. “next start” komutunu çalıştırdığınızda, derlenmiş uygulamanızı bir web sunucusu üzerinde çalıştırabilirsiniz.

next start

4-lint: Bu komut, Nextjs uygulamanızdaki JavaScript kodunu kontrol etmek ve düzenlemek için kullanılır. “next lint” komutunu çalıştırdığınızda, Nextjs'in yerleşik ESLint yapılandırması kullanılarak kodunuz denetlenir.

Bu adımları geçtikten sonra app klasörü altında bulunan page.js dosyasını açıyoruz.İlk “Hello World”ümüzü yazıyoruz.

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <p>Hello World</p>
    </main>
  );
}

next dev veya npm run dev

“Hello world” kelimemizi yazdıktan sonra next dev diyerek veya npm run dev diyerek projemizi çalıştırıyoruz ve aşağıdaki şekilde görüntüye ulaşmış oluyoruz.

Buraya kadar okuduysanız teşekkür ederim. Elimden geldiğince sade ve anlaşılır bir şekilde anlatmaya çalıştım.Bu makaleyi yararlı bulduysanız beni sosyal medya üzerinden takip edebilirsiniz. Eğer bana bir kahve ısmarlamak isterseniz aşağıdaki linki kullanabilirsiniz.

BuymeCoffee

Linkedin