# NextJS Nedir?

Next.js, **Netflix**, **Uber**, **Starbucks** veya **Twitch** gibi dünyanın dört bir yanındaki en büyük ve en popüler şirketler tarafından yaygın olarak kullanılmaktadır. Ayrıca, **statik sitelerle** çalışmak için mükemmel olan en hızlı büyüyen React frameworklerinden biri olarak kabul edilir — ki bu, son zamanlarda web geliştirme dünyasında en çok konuşulan konulardan birisidir.

Stack Overflow'un [2024 Developer Survey](https://survey.stackoverflow.co/2024/) verilerine göre, web geliştiricileri arasındaki en popüler 4. web framework Next.js imiş.

<figure><img src="https://10693534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpHJ8OuTO6xpfwqkn7vmg%2Fuploads%2Fgit-blob-7b1588ffcff1d7c4d6cbcf7519cabbf3bf9df4a9%2Fsurvey.png?alt=media" alt="Stack Overflow Survey Web Framworks" width="563"><figcaption></figcaption></figure>

Yıllar geçtikçe Next.js sürekli olarak evrim geçirerek web geliştirmenin sürekli değişen ortamına hitap eden özellikler sunmuştur. Güncellemeleri sürekli olarak performansı, geliştirici deneyimini iyileştirmeye ve sağlam **SEO** yetenekleri sağlamaya odaklanmıştır.

Gelin hep beraber Next.js'e ve temel özelliklerine bir bakış atalım.

## Next.js Nedir?

<figure><img src="https://10693534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpHJ8OuTO6xpfwqkn7vmg%2Fuploads%2Fgit-blob-3e3d124c365d2d2c2f3c9799f176b43740085e55%2Fnextlogo.jpeg?alt=media" alt="Next.js Logo" width="500"><figcaption></figcaption></figure>

Next.js, **React** tabanlı bir frameworktür. Vercel tarafından geliştirilmiştir ve **SSR (Server-side rendering)**, **SSG (Static Site Generation)** gibi modern web geliştirme için güçlü araçlarla donatılmıştır. Next.js, SEO dostu, hızlı yükleme süreleri ve geliştirilmiş performans sunarak hem kullanıcılar hem de geliştiriciler için işleri kolaylaştırır diyebiliriz.

Hem basit hem de karmaşık web uygulamalarını çok daha hızlı ve kolay bir şekilde oluşturmamıza olanak tanır ve **Next**'in üzerine katılarak geliştirilen birçok harika framework sayesinde de artık çok daha iyi bir **UX (User experience)** ve **SEO verimliliği**ne sahip hızlı web siteleri oluşturabiliriz.

## Next.js Özellikleri

### Server Side Rendering

Sayfalar **server tarafında işlenir** ve kullanıcılara önceden **render edilmiş HTML** olarak sunulur. Bu, sayfa yükleme sürelerini **kısaltır** ve SEO'yu iyileştirir.

<figure><img src="https://10693534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpHJ8OuTO6xpfwqkn7vmg%2Fuploads%2Fgit-blob-529cc2a6034dd27048800f668da81b7e338790be%2Fssr.png?alt=media" alt="Server side rendering" width="563"><figcaption></figcaption></figure>

### Static Generation

Uygulamanın tamamını veya belirli sayfalarını derleme zamanında **statik HTML dosyalarına** dönüştürür.

<figure><img src="https://10693534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpHJ8OuTO6xpfwqkn7vmg%2Fuploads%2Fgit-blob-fbd586ec197225d2f7ab0dff6a47514453032746%2Fssg.png?alt=media" alt="Static Generation" width="563"><figcaption></figcaption></figure>

### API Routes

Next.js ile, aynı app içinde **API endpointleri** oluşturmak mümkündür.

<figure><img src="https://10693534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpHJ8OuTO6xpfwqkn7vmg%2Fuploads%2Fgit-blob-07f455f36d540fbce52b0789cca4445573faabcb%2Fapi.png?alt=media" alt="API routes" width="250"><figcaption><p>Next.js ile oluşturulmuş API endpointleri</p></figcaption></figure>

### Automatic Code Splitting

Next.js, web uygulamanızın kodlarını otomatik olarak daha küçük parçalara böler ve böylece kullanıcılar **yalnızca ihtiyaç duydukları kodu yükler**. Bu, performansı artırır ve sayfa yükleme sürelerini önemli ölçüde **kısaltır**.

### File-System Based Routing (Dosya Sistemi Tabanlı Yönlendirme)

Next.js, `pages` veya `app` klasörü içindeki dosya yapısını kullanarak otomatik olarak yönlendirme (routing) mantığını oluşturur, böylece ayrı bir **routing** yapılandırmasına ihtiyaç duyulmaz.

<figure><img src="https://10693534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpHJ8OuTO6xpfwqkn7vmg%2Fuploads%2Fgit-blob-4a64f8e305be190d2591afc5b6e203e932ae8cb4%2Fpages.png?alt=media" alt="Pages directory" width="250"><figcaption><p>pages directory</p></figcaption></figure>

### Image Optimization (Görüntü Optimizasyonu)

Next.js, `next/image` bileşeni aracılığıyla otomatik görüntü optimizasyonu sağlar. Bu, farklı ekran boyutları ve cihazlar için optimize edilmiş görüntüler sunarak performansı artırır.

```js
import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}
```

### Dynamic Routing

Next.js, dinamik yönlendirme ile pathler (yollar) ve parametrelerle çalışmayı oldukça kolaylaştırır.

<figure><img src="https://10693534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpHJ8OuTO6xpfwqkn7vmg%2Fuploads%2Fgit-blob-258b4948675f69627e7479e79518887f766fe368%2Fdynamic.png?alt=media" alt="Dynamic Routing" width="200"><figcaption><p>Oluşturulmuş dynamic routing klasörleri</p></figcaption></figure>

Parametreler `useRouter()` kullanılarak alınabilir:

```js
import { useRouter } from 'next/router'

const router = useRouter();
const language = router.query.language;
const pathId = router.query.pathId;
```

## Next.js ve SEO (Search Engine Optimization)

Next.js, güçlü bir framework olmasının yanı sıra, SEO (Arama Motoru Optimizasyonu) açısından da birçok avantaj sunar. Bu sayede, web sitenizin arama motorlarında daha üst sıralarda yer almasını ve organik trafik elde etmesini kolaylaştırır.

* **SSR ve SSG** Next.js, Server-side Rendering ve Static Site Generation gibi farklı derleme yöntemleri sunar. Bu yöntemler sayesinde, arama motorları botları web sitenizin içeriğini kolayca tarayabilir ve anlayabilir, bu da SEO performansınızı artırır.
* **Meta tags ve Headerlar** `next/head` bileşeni aracılığıyla sayfa başlıklarını, meta açıklamalarını ve diğer önemli meta etiketlerini kolayca yönetmenize olanak tanır. Bu, arama motorlarına sayfalarınızın içeriği hakkında daha fazla bilgi sağlar ve SEO performansınızı artırır.
* **XML Site Haritaları (Sitemaps)** Otomatik olarak XML site haritaları oluşturarak arama motorlarına web sitenizin yapısı hakkında bilgi verir ve tüm sayfalarınızın taranmasını kolaylaştırır.

## Next.js Kurulumu ve Kullanımı

Son olarak nasıl bir Next.js projesi oluşturabileceğimizden ve projenin yapısından bahsedip yazımızı noktalayalım.

### Proje oluşturma

Next.js ile bir proje oluşturmak oldukça kolaydır. Node.js **npm** veya **yarn**'ın kurulu olduğuna emin olduktan sonra başlayabilirsiniz.

```bash
npx create-next-app@latest
# veya
yarn create next-app
```

### Projenin Yapısı

Next.js projeleri genellikle şu klasörlerden oluşur:

* `src`: Uygulamanızın temel bileşenlerini yazdığınız klasördür.
* `pages/`: Her klasör (routing) ve içindeki dosya (`index.js`, `index.tsx`) bir sayfa olarak tanımlanır.
* `public/`: Statik dosyalar (assets, fonts) bu klasöre konulur.
* `styles/`: CSS dosyaları bu klasörde bulunur.
* `api/`: API endpoint'leri oluşturmak için kullanılır.
* `app` (Next.js 13 ve sonrası): Yeni App Directory (Uygulama Dizini) yapısını kullanarak sayfaları ve düzenleri yönetmek için kullanılır.
* * `layout.js` Sayfalarınızda ortak olarak kullanılan layout bileşeni.
* * `page.js` Sayfa içeriği
* * `loading.js` Yüklenme sayfası
* `package.json`: Projenin dependencylerini ve komutları içerir.
* `next.config.js`: Next.js yapılandırmalarınızı içerir.

<figure><img src="https://10693534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpHJ8OuTO6xpfwqkn7vmg%2Fuploads%2Fgit-blob-43ab098a52dd1af94c7f485ece6180edea45d25c%2Ffiles.png?alt=media" alt="Proje yapısı" width="200"><figcaption><p>Örnek bir proje yapısı</p></figcaption></figure>

## Sonuç

Next.js hakkında çok daha kapsamlı bilgiye sahip olmak için dokümanını okuyabilir ve Vercel'in sağlamış olduğu React ve Next.js kurslarına ücretsiz erişim sağlayabilirsiniz.

* [Next.js Websitesi](https://nextjs.org/)
* [Next.js Dokümantasyonu](https://nextjs.org/docs)
* [Next.js Öğren](https://nextjs.org/learn)

Next.js, modern web uygulamaları geliştirmek için güçlü bir framework'tür. SEO dostu, performans odaklı ve geliştirici deneyimini iyileştiren özellikleri ile öne çıkar. Hem küçük hem de büyük ölçekli projeler için ideal bir seçimdir. Artan popülerliği sebebiyle de kariyerinizde envanterinize eklenmeye değer bir teknolojidir.

Okuduğunuz için teşekkürler!