Sanity.io ve Next.js, modern web projeleri için güçlü bir kombinasyon sunar. Sanity.io’nun esnek içerik yönetim sistemi (CMS) ve Next.js’in üstün performans ve SEO yetenekleri, birlikte kullanıldığında etkili ve SEO uyumlu web projeleri oluşturmanıza olanak tanır. Bu rehberde, Sanity.io ile Next.js kullanarak nasıl bir proje geliştirebileceğinizi adım adım açıklayacağız. Kod örnekleri ile desteklenen bu rehber, hem yeni başlayanlar hem de deneyimli geliştiriciler için faydalı olacaktır.
Sanity.io ve Next.js: Tanıtım ve Temel Kavramlar
Sanity.io Nedir? Sanity.io, geliştiricilere ve içerik yöneticilerine esnek ve özelleştirilebilir bir CMS sunan modern bir platformdur. Sanity Studio ile içerik oluşturma ve yönetimi kolaylaşır, GROQ sorgu dili ile verilerinizi esnek bir şekilde çekebilirsiniz.
Next.js Nedir? Next.js, React tabanlı bir framework olup, statik ve dinamik web siteleri oluşturmanızı sağlar. SEO dostu yapısı, hızlı performansı ve sunucu tarafı render (SSR) yetenekleri ile öne çıkar.
Sanity.io ve Next.js Projesi Başlatma
Gerekli Araçlar ve Kurulumlar
- Node.js ve npm/yarn
- Sanity CLI
- Next.js
Sanity.io Projesi Oluşturma
npm install -g @sanity/cli
sanity init --create-project "My Project"
sanity startNext.js Projesi Oluşturma
npx create-next-app@latest my-next-app
cd my-next-app
npm run devSanity.io ile İçerik Modelleme
Şema Tanımları Sanity.io’da içerik modellemesi şema dosyaları ile yapılır. schemas klasöründe şema dosyalarınızı tanımlayarak içerik tiplerinizi oluşturabilirsiniz.
// schemas/post.js
export default {
name: 'post',
title: 'Post',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'body',
title: 'Body',
type: 'blockContent',
},
],
}
Sanity Studio’da İçerik Yönetimi Sanity Studio, içerik yöneticilerinin kullanıcı dostu bir arayüzde içeriklerini oluşturup düzenlemesine olanak tanır. Şema dosyalarınızda yaptığınız değişiklikler otomatik olarak Sanity Studio’ya yansır.
Next.js ile Sanity.io Verilerini Kullanma
Sanity Client Kurulumu Sanity’den veri çekmek için @sanity/client paketini projenize dahil edin.
npm install @sanity/clientSanity Client Yapılandırma sanityClient.js dosyasını oluşturarak Sanity projenizi Next.js ile entegre edebilirsiniz.
// sanityClient.js
import sanityClient from '@sanity/client';
export default sanityClient({
projectId: 'your_project_id',
dataset: 'production',
useCdn: true,
});Next.js API Route ile Sanity Verilerini Çekme API route kullanarak Sanity’den veri çekebilir ve bu verileri sayfalarınıza iletebilirsiniz.
// pages/api/posts.js
import client from '../../sanityClient';
export default async function handler(req, res) {
const query = '*[_type == "post"]';
const posts = await client.fetch(query);
res.status(200).json(posts);
}Next.js Sayfalarında Sanity Verilerini Gösterme
Static Generation ile Verileri Sayfalara İletme Next.js’in getStaticProps fonksiyonu ile verileri sayfalara iletebilirsiniz.
// pages/index.js
import client from '../sanityClient';
export async function getStaticProps() {
const query = '*[_type == "post"]';
const posts = await client.fetch(query);
return {
props: {
posts,
},
};
}
export default function Home({ posts }) {
return (
<div>
<h1>Blog Posts</h1>
<ul>
{posts.map((post) => (
<li key={post._id}>{post.title}</li>
))}
</ul>
</div>
);
}SEO İçin Next.js ve Sanity.io Optimizasyonları
Meta Tag ve Başlık Yönetimi Next.js’de next/head modülü ile SEO uyumlu meta taglar ve başlıklar ekleyebilirsiniz.
// pages/index.js
import Head from 'next/head';
export default function Home({ posts }) {
return (
<div>
<Head>
<title>My Blog</title>
<meta name="description" content="Sanity.io ile Next.js kullanarak oluşturulmuş blog" />
</Head>
<h1>Blog Posts</h1>
<ul>
{posts.map((post) => (
<li key={post._id}>{post.title}</li>
))}
</ul>
</div>
);
}SEO Dostu URL’ler Next.js’in dinamik rotalama özelliği ile SEO dostu URL yapıları oluşturabilirsiniz.
// pages/posts/[slug].js
import client from '../../sanityClient';
export async function getStaticPaths() {
const query = '*[_type == "post"] { slug }';
const posts = await client.fetch(query);
const paths = posts.map((post) => ({
params: { slug: post.slug.current },
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const query = `*[_type == "post" && slug.current == $slug][0]`;
const post = await client.fetch(query, { slug: params.slug });
return { props: { post } };
}
export default function Post({ post }) {
return (
<div>
<h1>{post.title}</h1>
<div>{post.body}</div>
</div>
);
}Sanity.io ve Next.js ile Görsel Yönetimi
Sanity Görsel Optimizasyonu Sanity’de görsel yönetimi ve optimizasyonu için sanity/image-url paketini kullanabilirsiniz.
npm install @sanity/image-url// sanityClient.js
import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';
const client = sanityClient({
projectId: 'your_project_id',
dataset: 'production',
useCdn: true,
});
const builder = imageUrlBuilder(client);
export function urlFor(source) {
return builder.image(source);
}
export default client;Next.js ile Görselleri Gösterme Görselleri Next.js sayfalarında göstermek için urlFor fonksiyonunu kullanabilirsiniz.
// pages/index.js
import { urlFor } from '../sanityClient';
export default function Home({ posts }) {
return (
<div>
<h1>Blog Posts</h1>
<ul>
{posts.map((post) => (
<li key={post._id}>
<img src={urlFor(post.mainImage).width(200).url()} alt={post.title} />
<h2>{post.title}</h2>
</li>
))}
</ul>
</div>
);
}Sonuç ve Öneriler
Sanity.io ile Next.js kullanarak etkili ve SEO uyumlu web projeleri oluşturmak oldukça kolay ve verimlidir. Bu rehberdeki adımları takip ederek, içeriklerinizi esnek bir şekilde yönetebilir, SEO dostu ve performanslı web siteleri geliştirebilirsiniz. Projelerinizde Sanity.io ve Next.js’in gücünden yararlanarak, hem kullanıcı deneyimini artırabilir hem de arama motorlarında daha iyi sonuçlar elde edebilirsiniz.
Sıkça Sorulan Sorular
Sanity.io ve Next.js’i birlikte kullanmak zor mu? Sanity.io ve Next.js’in entegrasyonu oldukça kolaydır ve birlikte kullanıldığında güçlü bir yapı sunar.
Sanity.io ücretsiz mi? Sanity.io, kişisel projeler ve küçük ekipler için ücretsiz bir plana sahiptir. Daha büyük projeler için ücretli planlar da mevcuttur.
Next.js SEO için neden bu kadar iyi? Next.js’in sunucu tarafı render ve statik site oluşturma yetenekleri, SEO performansını önemli ölçüde artırır.
Sanity.io’da hangi veri türlerini yönetebilirim? Sanity.io, metin, resim, video, belge gibi çeşitli veri türlerini yönetmenize olanak tanır.
Next.js projelerimi nasıl dağıtabilirim? Next.js projelerinizi Vercel, Netlify gibi platformlarda kolayca dağıtabilirsiniz.
Sanity.io ve Next.js ile hangi tür projeler yapılabilir? Bloglar, e-ticaret siteleri, kurumsal web siteleri ve daha birçok türde projeyi Sanity.io ve Next.js ile gerçekleştirebilirsiniz.
Kaynaklar:
Bu rehberdeki bilgilerle Sanity.io ve Next.js kullanarak modern, SEO uyumlu web projeleri oluşturmak artık daha kolay. Başarılar dileriz!
