Nuxt 3 İle Birlikte Gelen Yenilikler
Tags: webdev, vue, nuxt, vite
Published: 2023-03-05 14:39:17

![Nuxt 3 Release Candidate (Görselin kaynağı için [tıklayınız](https://nuxtjs.org/_nuxt/image/9e31ab.png))](https://cdn-images-1.medium.com/max/2400/1*URSce5KQnqfTOBnoJlu40w.png)

Nuxt 3 Beta, Vue 3, Vite ve Nitro’ya dayalı yeni bir temel ile 16 aylık bir çalışmanın ardından 12 Ekim 2021'de duyuruldu. Beta sürümü duyurulduktan yaklaşık 6 ay sonra “Mount Hope” adlı Nuxt 3 için ilk Release Candidate (sürüm adayı) duyuruldu.
>  Release Candidate (Sürüm Adayı), kararlı olarak yayınlanma potansiyeline sahip beta sürümleridir. Bu, kararlı sürüme kadar büyük bir değişikliğin beklenmediği anlamına gelir.

## Vue 3 & TypeScript

![TypeScript](https://cdn-images-1.medium.com/max/2480/1*moJeTvW97yShLB7URRj5Kg.png)

Nuxt 3, birinci sınıf SSR desteği ile birlikte harika bir Vue 3 deneyimi sağlamak için inşa edilmiştir.

Nuxt, sıfır yapılandırmayla TypeScript deneyimi elde etmenize olanak tanır. Bunun için otomatik olarak bir TS yapılandırması (.nuxt/tsconfig.json) ve bir genel tür dosyası (.nuxt/nuxt.d.ts) oluşturur.

Nuxt 3'te TypeScript hakkında daha fazla bilgi almak için [ilgili dokümanı okuyabilirsiniz](https://v3.nuxtjs.org/guide/concepts/typescript/).

## Vite & Webpack

![ViteJs](https://cdn-images-1.medium.com/max/2000/1*01TAngTe5DDiuOAws0d5fA.png)

Nuxt 3 ile birlikte Vite varsayılan bundler(paketleyici) oldu. Vite, modern web projeleri için daha hızlı ve daha yalın bir geliştirme deneyimi sağlamayı amaçlayan bir paketleyicidir. Nuxt 3, Webpack’in en son sürümü (version 5) ile paketlemeyi de desteklemektedir.

## Nitro Server Engine

![Nitro Server Engine](https://cdn-images-1.medium.com/max/2568/1*eL4bkKpgk3ul_ff_kgtzAQ.png)

Nuxt 3'ün en önemli özelliklerinden biri, yeni sunucu motoru [unjs/nitro](https://github.com/unjs/nitro)’dur. Nitro, Nuxt uygulamalarında sayfalar ile birlikte API yolları da oluşturmamıza izin verir. Bu sayede full-stack geliştirme yapma imkanı sunar. Bunlarla birlikte Nuxt uygulamasını JavaScript’i destekleyen herhangi bir sisteme (Node.js, Serverless, Workers, Edge-side rendering vb.) dağıtım imkanı sağlar.

![Nitro — Server Engine (Görselin kaynağı: [https://nitro.unjs.io/](https://nitro.unjs.io/))](https://cdn-images-1.medium.com/max/2004/1*8kobVQe3LXk4FhoS5OzewQ.png)

Nitro Engine, API uç noktalarına middleware (ara katman yazılımı) eklemeyi de destekler. Nuxt, projeniz için middleware oluşturmak için /server/middleware dizinindeki tüm dosyaları okur ve bu dosyalar her istekte yürütülür. Bu genellikle, tüm yanıtlara ortak bir başlık ekleyebilmeniz, yanıtları günlüğe kaydedebilmeniz veya gelen bir istek nesnesini değiştirebilmeniz için kullanılır.

Nuxt server engine ile ilgili örnek bir video izlemek için [tıklayınız](https://www.youtube.com/watch?v=FeKleFJkKNY).

## Nuxt Bridge

![Nuxt Bridge](https://cdn-images-1.medium.com/max/2458/1*aojAGr9CRINRELokFaCIuA.png)

Nuxt Bridge, Nuxt 2'den Nuxt 3'e geçişi mümkün olduğunca kolaylaştırmak için oluşturulmuş ve yeni Nuxt 3 özelliklerinin çoğunu deneyimlemenizi sağlayan bir katmandır. Nuxt Bridge’i kullanarak, projenizin (neredeyse) Nuxt 3 için hazır olduğundan emin olabilirsiniz. Nuxt 3 özelliklerini mevcut Nuxt 2 projelerinde deneyimlemek için @nuxt/bridge-edge’i projenize kurmanız gerekmektedir. Kurulum aşamaları ve daha fazla bilgiye [buradan ulaşabilirsiniz.](https://v3.nuxtjs.org/bridge/overview)

Nuxt Bridge, yükseltmeyi olabildiğince kolaylaştırmak için:

* Nuxt 2 ile kullanılan nuxt.config.js için geriye dönük uyumluluğu,

* Nuxt 2 modülleri ve eklentileri için geriye dönük uyumluluğu desteklemektedir.

Aynı zamanda Nuxt 3 ile birlikte gelen yeni özellikler Nuxt 2'ye de getirilmiştir. Bu sayede Nuxt 2'den Nuxt 3'e geçiş aşamalı olarak gerçekleştirilebilir. Bu özelliklerden bazıları şunlardır:

* Nuxt 2 ile Nitro server engine kullanabilme,

* Nuxt 2 ile birlikte Nuxt 3 Composition API kullanabilme,

* Nuxt 2 ile yeni CLI ve DevTools kullanabilme,

* Nuxt 2 modül ekosistemi ile uyumluluk

* Parça parça yükseltme imkanı (Nitro, Composition API, Nuxt Kit)

Aşağıdaki görselde Nuxt 2, Nuxt Bridge ve Nuxt 3 versiyonları arasındaki karşılaştırmaları görebilirsiniz.

![Nuxt 2, Nuxt Bridge ve Nuxt 3 versiyonları arasında hızlı bir karşılaştırma (Görselin kaynağı için [tıklayınız.](https://v3.nuxtjs.org/getting-started/migration))](https://cdn-images-1.medium.com/max/2000/1*L4fG-1TRxti1gqht1WvwlA.png)

## Nuxi

Nuxi (Nuxt CLI), yeni projeleri sıfır çabayla oluşturmanıza yardımcı olur. Geriye dönük olarak da uyumludur, bu nedenle Nuxt 2'de olsanız bile bazı avantajlarından yararlanabilirsiniz.

## Nuxt Kit

Nuxt Kit, Nuxt modüllerini geliştirmeyi daha kolay hale getirmeyi amaçlar. Kullanıcılara sürümler arası uyumluluk ile yeni bir esnek modül geliştirme deneyimi sağlar. Böylelikle hem Nuxt 2 hem de Nuxt 3 üzerinde çalışacak modüllerin geliştirilmesine olanak tanır.

Özetle Nuxt 3 ile ilgili şunları söyleyebiliriz:

* Geliştirme aşamasında hot module replacement’ı destekleyen ve kodunuzu üretim için bir araya getiren bir paketleyici olarak hem [webpack 5](https://webpack.js.org/)'i hem de [Vite](https://vitejs.dev/)’yi destekler.

* Eski tarayıcıları desteklerken en son JavaScript sözdizimini yazabilmeniz için [esbuild](https://esbuild.github.io/) kullanır.

* Command line interface (Komut satırı arayüzü) olarak [Nuxi](https://github.com/nuxt/framework/tree/main/packages/nuxi) kullanır.

* Server engine olarak [Nitro](https://github.com/unjs/nitro) kullanır.

* Development kit olarak [Nuxt Kit](https://github.com/nuxt/framework/tree/main/packages/kit) kullanır.

* Nuxt 2'den geçişi kolaylaştırmak için [Nuxt Bridge](https://github.com/nuxt/bridge) kullanır.

Nuxt, eklenen yeni özellikler ve modüller ile birlikte sürekli gelişmektedir. Planlanan sürümleri ve mevcut durumu takip etmek için [Roadmap](https://v3.nuxtjs.org/community/roadmap) sayfasını ziyaret edebilirsiniz. Ayrıca Nuxt 3'e hızlı bir başlangıç yapmak isterseniz [Quick Start](https://v3.nuxtjs.org/getting-started/quick-start/) sayfasını inceleyebilirsiniz.

## Kaynaklar

* [https://nuxtjs.org/announcements/nuxt3-rc/](https://nuxtjs.org/announcements/nuxt3-rc/)

* [https://v3.nuxtjs.org/guide/concepts/introduction](https://v3.nuxtjs.org/guide/concepts/introduction)

* [https://github.com/nuxt/framework/tree/main/packages/vite](https://github.com/nuxt/framework/tree/main/packages/vite)

* [https://github.com/nuxt/framework/tree/main/packages/webpack](https://github.com/nuxt/framework/tree/main/packages/webpack)

* [https://github.com/nuxt/framework/tree/main/packages/nuxi](https://github.com/nuxt/framework/tree/main/packages/nuxi)

* [https://github.com/nuxt/bridge](https://github.com/nuxt/bridge)

* [https://v3.nuxtjs.org/guide/concepts/server-engine](https://v3.nuxtjs.org/guide/concepts/server-engine)

* [https://v3.nuxtjs.org/bridge/overview](https://v3.nuxtjs.org/bridge/overview)

* [https://v3.nuxtjs.org/getting-started/migration](https://v3.nuxtjs.org/getting-started/migration)

* [https://v3.nuxtjs.org/community/roadmap](https://v3.nuxtjs.org/community/roadmap)