0 yorum2 Nisan 2023Yazılım Geliştirme

Nuxt 3 Nedir? Nuxt 2 ile Arasındaki Farklar Nelerdir?

Nuxt 3, Vue.js tabanlı bir web uygulama çerçevesinin en son sürümüdür. Vue.js, modern ve performanslı kullanıcı arayüzleri (UI) oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Nuxt.js ise, Vue.js kütüphanesine dayalı olarak geliştirilen ve sunucu tarafında oluşturulan (SSR – Server-Side Rendering), statik web siteleri ve tek sayfalı uygulamalar (SPA – Single Page Applications) oluşturmayı daha kolay ve verimli hale getiren bir çerçevedir.

Nuxt 3, Nuxt 2’nin ardılıdır ve daha hızlı performans, daha iyi özellikler ve optimize edilmiş geliştirme süreçleri sunar. Vue 3’ü temel alan Nuxt 3, Vue 3’ün sunduğu avantajlardan yararlanarak geliştiricilere daha iyi bir deneyim sunar.

Nuxt 3 ve Nuxt 2 Arasındaki Farklar

Nuxt.js, Vue.js üzerine inşa edilmiş ve web uygulamaları geliştirmeyi kolaylaştıran açık kaynaklı bir çerçevedir. Nuxt 3, Nuxt 2’nin ardılı olan ve birçok yeni özellik ve iyileştirme sunan en son sürümdür.

Performans İyileştirmeleri

Nuxt 3, daha hızlı ve daha optimize edilmiş bir performans sunar. Nuxt 3, Vue 3 ile birlikte gelir ve bu nedenle Vue 3’ün performans iyileştirmelerinden de yararlanır. Vue 3, sanal DOM’un daha hızlı ve optimize edilmiş bir sürümü olan Vue.js 3’ün sanal DOM’u ile birlikte gelir. Bu, Nuxt 3’ün daha hızlı bir başlangıç süresi ve daha iyi bir kullanıcı deneyimi sunmasına yardımcı olur.

Nitro Engine

Nuxt 3, Nitro Engine adlı yeni bir özellik sunar. Nitro Engine, daha hızlı bir sunucu yanı oluşturma süreci ve daha hızlı bir sayfa yükleme süresi sağlar. Nitro Engine, Webpack ile çalışmak yerine Vite ile çalışır, bu da daha hızlı bir geliştirme süreci anlamına gelir.

İyileştirilmiş Modülerlik

Nuxt 3, modüler bir yapıya sahiptir ve bu, daha esnek ve özelleştirilebilir bir geliştirme deneyimi sunar. Nuxt 3, daha iyi bir yapılandırma yönetimi sunar ve geliştiricilere kendi eklentilerini ve modüllerini kolayca oluşturma imkanı sağlar.

Suspense ve Async Data

Nuxt 3, Vue 3’ün Suspense özelliğini kullanarak, asenkron veri almayı ve veri yükleme durumlarını daha iyi yönetmeyi mümkün kılar. Bu, geliştiricilerin uygulamalarında daha kullanıcı dostu bir veri yükleme deneyimi sağlamalarına yardımcı olur.

Yeni Server Middleware

Nuxt 3, daha güçlü ve esnek bir server middleware sunar. Bu, geliştiricilerin sunucu tarafında daha fazla özelleştirme yapabilmelerini ve sunucu tarafındaki işlemleri daha kolay yönetebilmelerini sağlar.

Static Site Generation (Statik Site Oluşturma) İyileştirmeleri

Nuxt 3, statik site oluşturma sürecini daha da geliştirir ve bu sayede geliştiriciler, daha hızlı ve daha optimize edilmiş statik siteler oluşturabilirler.

Başka Yenilikler

Nuxt 3, Vue 3 ile uyumlu yeni bileşenler, daha iyi hata yönetimi ve daha iyi bir belgelendirme sunar.

TypeScript Desteği

Nuxt 3, geliştirilmiş ve daha iyi entegre edilmiş bir TypeScript desteği sunar. Bu sayede geliştiriciler, güçlü tip denetimi ve daha hızlı bir geliştirme süreci elde ederler.

Composition API

Nuxt 3, Vue 3’ün Composition API’sini destekler, bu da geliştiricilere daha esnek ve yeniden kullanılabilir kod yazma imkanı sunar. Composition API, daha temiz ve yönetilebilir bir kod tabanı sağlar ve büyük ölçekli uygulamalar için daha uygundur.

İyileştirilmiş Eklenti Sistemi

Nuxt 3, daha iyi bir eklenti sistemi sunarak geliştiricilere uygulamalarını daha kolay özelleştirme ve genişletme imkanı sağlar. Bu, geliştiricilerin uygulamalarını daha hızlı ve verimli bir şekilde geliştirmelerine ve uygulamalarını daha iyi yönetmelerine olanak tanır.

Nuxt 3, Nuxt 2’ye göre birçok yeni özellik ve iyileştirme sunar. Geliştiricilere daha iyi performans, daha hızlı geliştirme süreçleri, daha esnek ve özelleştirilebilir yapılar sağlar. Nuxt 3 ile, web uygulamalarının geliştirilmesi daha kolay ve daha verimli hale gelir. Bu nedenle, Nuxt 3 kullanarak modern ve performanslı web uygulamaları geliştirmek isteyen geliştiriciler ve işletmeler için mükemmel bir seçenektir.

Devamını oku
0 yorum1 Mart 2022Dijital Pazarlama, Yazılım Geliştirme

Nuxt.js ile En İyi SEO Ayarları

Sizlere en beğendiğim framework çeşitlerinden biri olan, Nuxt.js ‘de  meta etiketleri ve en iyi HTML yapısı gibi SEO özelliklerinin nasıl başarılı bir şekilde yapılması gerektiğini paylaşacağım. Her şeyden önce Nuxt.js ‘in ne olduğunu bildiğinizi düşünüyorum. Eğer bu konu ile ilgili detaylı bilgi isterseniz. Nuxt.js Nedir? Makalemizi okuyabilirsiniz.

Title & Description

Olmazsa olmaz konulardan Title (Başlık) ve Description (Açıklama)

Bu iki meta etiketi sayesinde sayfalar Google, Yandex, Bing gibi tüm arama motorlarında görünecektir. İkisinin de belirli sınırlamaları vardır. Bu SEO biliyorum diyen herkesin bilmesi gereken temel bilgilerin en başında gelir.

Title (Başlık): 60 karakter

Description (Açıklama): 160 karakter

Nuxt.js ‘de bu head fonksiyonu ile basit bir şekilde yapılmaktadır.

// ~/pages/index.vue

head() {
    title: "Brunos Digital | Dönüşüm = Gelecek",
    meta: [
        {
          hid: "description",
          name: "description",
          content: "Kendi geliştirdiği yazılımlarla dijital pazarlama.."
        }
    ]
}

Title Değişken Olarak Sabitleme

Örneğin, başlıktaki her sayfada sabit bir değişken girip, sayfaya göre değişken atamak isterseniz bunu titleTemplate anahtarı ile nuxt.config.js yapılandırma dosyanızda tanımlayabilirsiniz. Aşağıdaki örnekte %s sayfalarda kullanılan değişken olarak ifade edilir ve her sayfanın sonuna – Brunos Digital eklenir.

// nuxt.config.js

head: {
  titleTemplate: "%s - Brunos Digital",
}

Sayfa Dili Ayarları (Language)

Web sitenizde kullandığınız dili belirtmelisiniz. Sitenizin yalnızca bir dili varsa, nuxt.config.js yapılandırma dosyasından ayarlayabilirsiniz.

// nuxt.config.js

head: {
  htmlAttrs: {
    lang: "tr",
  }
}

i18n paketi kullanıyorsanız aşağıdaki şekilde layout dosyasından dinamikleştirerek sayfa dilini rahatlıkla ayarlayabilirsiniz.

// ~/layouts/default.vue

head() {
  return {
    htmlAttrs: {
      lang: this.$i18n.locale
  }
}

Canonical

Canonical etiketi, sayfanızın orijinal içeriğinin hangi URL ‘de olduğunu ve her sayfa için ayarlanması gerektiğini göstermektedir. Tüm arama motorları, belirtilen Canonical URL ‘yi alaka düzeyine göre algılayacaktır.

// ~/pages/index.vue

head() {
  return {
    link: [
      {
        hid: 'canonical',
        rel: 'canonical',
        href: 'https://brunos.digital'
      }
    ]
  }
}

Open Graph (OGP)

OGP, o sayfayı açıklayan her sayfa için belirli meta verileri depoladığınız önemli bir etikettir. Bu bilgiler, örneğin sayfanızı sosyal medyada paylaşan kullanıcıların veya örneğin whatsapp üzerinde bir sayfayı paylaştığınızda önizlemeli algılayıp gruplayarak card modülü şekilde gösterilmesine olanak tanır.

OGP ayarlamak yalnız <meta> etiketleri ile mümkündür. Bunun için sayfadaki head fonksiyonunun içine aşağıdaki kodları yazıyoruz. Ayrıca açıklama olarak dil vs gibi seçeneklerde eklenebilir, ayrıntılı olarak OGP sayfasına bakabilirsiniz.

// ~/pages/index.vue

head() {
  return {
    meta: [
      {
        hid: "og:title",
        property: "og:title",
        content: "Brunos Digital | Dönüşüm = Gelecek"
      {
        hid: "og:description",
        property: "og:description",
        content: "Kendi geliştirdiği yazılımlarla dijital pazarlama.."
      },
      {
        hid: "og:type",
        property: "og:type",
        content: "website"
      },
      {
        hid: "og:image",
        property: "og:image",
        content: "https://brunos.digital/seo_image.jpg"
      },
      {
        hid: "og:url",
        property: "og:url",
        content: "https://brunos.digital"
      },
      {
        property: "og:locale",
        content: "tr_TR"
      }
    ]
  }
}

Diğer tüm özellikler için bizimle iletişime geçebilirsiniz.

Devamını oku
0 yorum23 Kasım 2020Yazılım Geliştirme

Nuxt.js Nedir? Ne Tür Uygulamalar Geliştirilebilir?

Vue.js çatısı altında çalışan Nuxt.js, sunucu tarafından oluşturulan uygulamaları geliştirmek için bizlere kolaylık sağlayan bir Javascript kütüphanesidir.

Genellike Node.js tabanlı sistemlerin sayfalarda html tag lerin görünmemesinden dolayı SEO problemleri yaşamaktadır. Tam bu noktada Nuxt.js imdada yetişiyor.

Bir çok projede Nuxt.js kullanmak için sabırsızlanıyoruz.

Düşündüğünüz bir proje varsa ve Nuxt.js kullanmamızı isterseniz, Yeni Proje başlatabilirsiniz.

Nuxt.js ile Neler Geliştirebiliriz?

Universal App

Front-end önce sunucu üzerinde oluşturulur ve sonra tek sayfa uygulama yani Single Page App’e dönüştürülür. Bu durum bize SEO da büyük avantaj sağlamaktadır.

Single Page App

İlk yükleme işleminden sonra başlayacaktır ve daima tek sayfa uygulama olacaktır. Normal Vue.js gibi kolay bir şekilde çalışır.

Static App

Front-end öncelikle Pre-render olarak oluşturulur ve ilk yükleme sonrasında tek sayfa uygulamaya dönüştürülür. Bu durum bize SEO da büyük avantaj sağlamaktadır.

Devamını oku