Nuxt Neden Kullanılır

Nuxt Vue.js üzerine kurulmuş bir framework. Vuejs’in özelliklerini kullanarak daha iyi bir kullanıcı ve development deneyimi sağlar.

Nuxt’ı Vue’dan ayıran özellikleri birlikte inceleyelim ve daha sonra basit bir proje yapalım nuxt kullanarak.

1-SSR(Server Side Rendering) ve SSG(Static Side Generation)

• Nuxt uygulamaları serverda render edilebilirler. Bu özellik bize SEO açısından avantaj sağlar. Uygulama sunucuda render edilir ve tarayıcıya gönderilir. Bu sayede Google gibi tarayıcıların sayfayı indekslemesi daha kolay olur. Vue kullanarak yaptığımız uygulamalarda javascript çalıştıktan sonra html oluşur.
• SSG’yi şu şekilde açıklayabilirim. Siz uygulamayı yaptınız built aldınız ve sonrasında da deployment gerçekleşti. SSG dosyalarının deploy edilmiş hallerini tutar ve istek geldiğinde ilgili sayfayı döner. Sayfada değişiklik olmadığı müddetçe render olmaz. Diğer şekilde her istek yapıldığında ilgili sayfa yeniden render oluyordu.

2-Otomatik Route

Nuxt pages altına eklediğimiz her dosya için bir router yapısını kendi otomatik olarak tanımlar. Bu projenin daha modüler ve kolay yönetilebilmesini sağlar.

3-Dahili Yapılandırmalar

Nuxt, birçok yapılandırmayı devloper yerine yapar. Webpack,babel gibi araçları doğrudan entegre eder.

4-İyi bir proje ve dosya yapısı

Nuxt, projeler için önerilen bir dosya yapısı sunar. Bu, büyük ve karmaşık projelerde kodun daha iyi organize edilmesine yardımcı olur. Örneğin, layouts, pages, components, middleware gibi klasör yapıları ile kodunuzu belirli bir düzende tutmanızı sağlar.

Gelin birlikte bir proje oluşturalım🚀

• Projeyi kurmak için terminalinizi açın ve aşağıdaki komutu yapıştırın.

npx nuxi init nuxt3-hello-world

Kullanmak istediğiniz paket yöneticisin seçin

Projeniz oluştu

cd nuxt3-hello-world // proje dizinine geçmek için
npm run dev // projeyi çalıştırmak için

Ve karşınızda projeniz🥳(dependenciesları kurabilmesi için npm/yarn install komutunu çalıştırmayı unutmayın sonraki steplerde ihtiyacınız olacak)

Bir sonraki yazımda basit bir listeleme ve listenen elemanların detaylarını görüntülemek için proje hazırlayacağız🤓