Yazılım şirketi Vercel, Next.js 13.3’ü yayınladı. Son sürümden bu yana React çerçevesi, geliştirme ekibine göre topluluk tarafından özellikle talep edilen bir dizi özellik kazandı. Bunlar, yakın zamanda tanıtılan bir Meta Veri API uzantısını ve Açık Grafik görüntülerinin dinamik olarak oluşturulmasını içerir.
Meta Veri API’si dosya kurallarını öğrenir
Next.js 13.2’den bu yana yeni bir Meta Veri API’si bulunmaktadır. Daha iyi arama motoru optimizasyonu (SEO) için bir uygulamanın meta verilerini tanımlamak için kullanılır. Yapılandırma tabanlı meta verilere ek olarak, API artık içeriği dinamik olarak oluşturmak için dosya kurallarını da işleyebilir. Diğer şeylerin yanı sıra API, her biri .jpg, .png veya .svg dosya uzantılarına sahip opengraph-image ve twitter-image dosyalarıyla, .txt, .js, .jsx, .jsx dosya uzantılarına sahip robotlarla kullanılabilir. ts ve .tsx’in yanı sıra favicon.ico’yu kullanın.
Bir kullanım örneği olarak, geliştirme ekibi bir uygulamaya favicon ve /about sayfasına açık bir grafiğin görüntüsünü eklemek için dosya tabanlı meta verileri kullanmayı gösteriyor:
app
├── favicon.ico
├── layout.js
├── page.js
└── about
├── opengraph-image.jpg
└── page.js
Next.js, üretimde bu dosyaları ve ilgili dosyaları önbelleğe alma için otomatik olarak karma hale getirmek üzere tasarlanmıştır. headÖğeleri URL, dosya türü ve görüntü boyutu gibi doğru öğe meta veri bilgileriyle güncelleyin.
// Visiting "/"
<link rel="icon" href="<computedUrl>"/>
// Visiting "/about"
<link rel="icon" href="<computedUrl>"/>
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />
API belgeleri daha fazla bilgi sağlar.
Organizatörler 21 ve 22 Haziran 2023’te karar verecek dpunkt.verlag, Haberler geliştiricisi VE iX Darmstadt’taki enterJS kurumsal JavaScript konferansı. JavaScript ve TypeScript dilindeki yenilikler, React, SvelteKit ve Astro dahil olmak üzere yeni ve yerleşik araçlar ve çerçevelerin yanı sıra erişilebilirlik ve yazılım mimarisi 35’ten fazla derste tartışılacak.
Tam gün atölyeler hem yerinde hem de çevrimiçi olarak mevcuttur.
Programdan alıntı:
Grafik bağlantısını aç
Open Graph protokolünü izleyerek görüntülerin dinamik olarak oluşturulması, temelde Next.js’de yeni bir şey değildir. Ancak, bu daha önce harici kitaplıkların yüklenmesini gerektiriyordu: Vercel OG Image Generation ve Satori, bu seçeneği altı ay boyunca JSX, HTML ve CSS aracılığıyla sundu. Yeni sürümde, API ImageResponse itibaren next/server eşleşen görüntüler oluşturmak için indirin:
// /app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';
export const size = { width: 1200, height: 600 };
export const alt = 'About Acme';
export const contentType = 'image/png';
export default function og() {
return new ImageResponse();
// ...
}
Ek olarak, Next.js Uygulama Yönlendiricisi, statik dışa aktarma için tam destek gibi ek özellikler sunar. Diğer yenilikler arasında, artık ara yazılım ve tüm özelliklerle birlikte gelen Webpack’in halefi Turbopack bulunmaktadır. next/font-Seçenekler yönetebilir. Next.js web sitesi de yeni bir tasarıma sahiptir.
Next.js 13.3 ile ilgili tüm diğer ayrıntılar bir blog gönderisinde mevcuttur.
(Mayıs)
Haberin Sonu
Meta Veri API’si dosya kurallarını öğrenir
Next.js 13.2’den bu yana yeni bir Meta Veri API’si bulunmaktadır. Daha iyi arama motoru optimizasyonu (SEO) için bir uygulamanın meta verilerini tanımlamak için kullanılır. Yapılandırma tabanlı meta verilere ek olarak, API artık içeriği dinamik olarak oluşturmak için dosya kurallarını da işleyebilir. Diğer şeylerin yanı sıra API, her biri .jpg, .png veya .svg dosya uzantılarına sahip opengraph-image ve twitter-image dosyalarıyla, .txt, .js, .jsx, .jsx dosya uzantılarına sahip robotlarla kullanılabilir. ts ve .tsx’in yanı sıra favicon.ico’yu kullanın.
Bir kullanım örneği olarak, geliştirme ekibi bir uygulamaya favicon ve /about sayfasına açık bir grafiğin görüntüsünü eklemek için dosya tabanlı meta verileri kullanmayı gösteriyor:
app
├── favicon.ico
├── layout.js
├── page.js
└── about
├── opengraph-image.jpg
└── page.js
Next.js, üretimde bu dosyaları ve ilgili dosyaları önbelleğe alma için otomatik olarak karma hale getirmek üzere tasarlanmıştır. headÖğeleri URL, dosya türü ve görüntü boyutu gibi doğru öğe meta veri bilgileriyle güncelleyin.
// Visiting "/"
<link rel="icon" href="<computedUrl>"/>
// Visiting "/about"
<link rel="icon" href="<computedUrl>"/>
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />
API belgeleri daha fazla bilgi sağlar.
Organizatörler 21 ve 22 Haziran 2023’te karar verecek dpunkt.verlag, Haberler geliştiricisi VE iX Darmstadt’taki enterJS kurumsal JavaScript konferansı. JavaScript ve TypeScript dilindeki yenilikler, React, SvelteKit ve Astro dahil olmak üzere yeni ve yerleşik araçlar ve çerçevelerin yanı sıra erişilebilirlik ve yazılım mimarisi 35’ten fazla derste tartışılacak.
Tam gün atölyeler hem yerinde hem de çevrimiçi olarak mevcuttur.
Programdan alıntı:
Grafik bağlantısını aç
Open Graph protokolünü izleyerek görüntülerin dinamik olarak oluşturulması, temelde Next.js’de yeni bir şey değildir. Ancak, bu daha önce harici kitaplıkların yüklenmesini gerektiriyordu: Vercel OG Image Generation ve Satori, bu seçeneği altı ay boyunca JSX, HTML ve CSS aracılığıyla sundu. Yeni sürümde, API ImageResponse itibaren next/server eşleşen görüntüler oluşturmak için indirin:
// /app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';
export const size = { width: 1200, height: 600 };
export const alt = 'About Acme';
export const contentType = 'image/png';
export default function og() {
return new ImageResponse();
// ...
}
Ek olarak, Next.js Uygulama Yönlendiricisi, statik dışa aktarma için tam destek gibi ek özellikler sunar. Diğer yenilikler arasında, artık ara yazılım ve tüm özelliklerle birlikte gelen Webpack’in halefi Turbopack bulunmaktadır. next/font-Seçenekler yönetebilir. Next.js web sitesi de yeni bir tasarıma sahiptir.
Next.js 13.3 ile ilgili tüm diğer ayrıntılar bir blog gönderisinde mevcuttur.
(Mayıs)
Haberin Sonu