Giriş
Next.js, React tabanlı uygulamalar geliştirmek için kullanılan güçlü bir framework’tür. SEO dostu, hızlı ve dinamik web siteleri oluşturmak için ideal olan Next.js, son sürümlerinde App Router ile birlikte birçok yeni özellik sunmaktadır. Bu yazıda, Next.js’in App Router’ını kullanarak nasıl profesyonel ve SEO uyumlu bir web sitesi oluşturulacağını adım adım ele alacağız.
Projeyi Başlatma
Öncelikle, Next.js projemizi oluşturmak için aşağıdaki komutu kullanarak yeni bir Next.js uygulaması başlatalım:
npx create-next-app@latest my-next-app
cd my-next-app
App Router Yapılandırması
Next.js’in App Router’ı ile sayfalar ve route’lar oluşturmak oldukça basittir. app klasöründe yeni bir sayfa oluşturmak için, örneğin app/about/page.js dosyasını oluşturabiliriz:
// app/about/page.js
export default function AboutPage() {
return (
<div>
<h1>Hakkımızda</h1>
<p>Bu, hakkında sayfasıdır.</p>
</div>
);
}
Metadata Yönetimi
SEO uyumlu meta etiketler eklemek için, Next.js’in Metadata API’sini kullanabiliriz. Bu API, app klasöründeki her sayfa için metadata yönetimini sağlar:
// app/about/page.js
export const metadata = {
title: 'Hakkımızda - My Next App',
description: 'Bu, hakkında sayfasıdır.',
};
export default function AboutPage() {
return (
<div>
<h1>Hakkımızda</h1>
<p>Bu, hakkında sayfasıdır.</p>
</div>
);
}
Veri Getirme
Next.js’in yeni yapısında, veri getirme işlemleri artık React Server Components kullanılarak yapılmaktadır. Örneğin, bir sayfada veriyi server-side’da getirmek için:
// app/posts/page.js
import { getPosts } from '@/lib/posts';
export default async function PostsPage() {
const posts = await getPosts();
return (
<div>
<h1>Blog Yazıları</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
SEO Optimizasyonu
SEO dostu bir web sitesi oluşturmanın en önemli adımlarından biri, doğru ve anlamlı URL yapıları kullanmaktır. Next.js’in App Router’ı ile dinamik route’lar oluşturmak oldukça kolaydır:
// app/posts/[id]/page.js
import { getPostById } from '@/lib/posts';
export default async function PostPage({ params }) {
const post = await getPostById(params.id);
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
Detaylı İnceleme: Next.js ile SEO Stratejileri
Performans Optimizasyonu
Performans, SEO’nun kritik bir parçasıdır ve Next.js bu konuda büyük avantajlar sunar. Statik site üretimi (Static Site Generation – SSG) ve sunucu tarafı render (Server-Side Rendering – SSR) ile sayfaların hızını optimize edebiliriz. Örneğin:
// next.config.js
module.exports = {
experimental: {
outputStandalone: true,
},
images: {
domains: ['example.com'],
},
};
Görsel Optimizasyonu
Görsellerin optimizasyonu, sayfa hızını ve kullanıcı deneyimini artırır. Next.js, yerleşik Image bileşeni ile görselleri optimize eder:
import Image from 'next/image';
function HomePage() {
return (
<div>
<h1>Ana Sayfa</h1>
<Image src="/images/home.jpg" alt="Ana Sayfa Görseli" width={500} height={300} />
</div>
);
}
export default HomePage;
Yapısal Veri Kullanımı
Yapısal veri, arama motorlarının sayfanızı daha iyi anlamasına yardımcı olur. Next.js projelerinde yapılandırılmış veriyi JSON-LD formatında ekleyebiliriz:
import Head from 'next/head';
function BlogPost({ post }) {
return (
<>
<Head>
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": post.title,
"description": post.description,
"author": {
"@type": "Person",
"name": post.author
}
})}
</script>
</Head>
<h1>{post.title}</h1>
<p>{post.content}</p>
</>
);
}
export default BlogPost;
Daha İyi SEO İçin İpuçları
- Başlık Etiketleri ve Meta Açıklamalar: Her sayfa için benzersiz ve anlamlı başlık etiketleri ve meta açıklamalar kullanmak önemlidir.
- URL Yapısı: Kısa, açıklayıcı ve anahtar kelimeleri içeren URL’ler oluşturun.
- Mobil Uyumluluk: Web sitenizin mobil cihazlarla uyumlu olduğundan emin olun.
- Dahili Bağlantılar: Kullanıcıları sitenizde tutmak ve arama motorlarının sitenizi daha iyi anlamasını sağlamak için dahili bağlantılar kullanın.
- Harici Bağlantılar: Güvenilir kaynaklara harici bağlantılar ekleyerek içeriğinizi destekleyin ve sitenizin otoritesini artırın.
Sonuç
Next.js ile profesyonel ve SEO uyumlu bir web sitesi oluşturmak, framework’ün sunduğu modern özellikler sayesinde oldukça basittir. App Router, Metadata API ve React Server Components gibi yeni özellikleri kullanarak, hızlı ve kullanıcı dostu web siteleri geliştirebilirsiniz. Daha fazla bilgi ve detaylı dokümantasyon için Next.js Docs sayfasını ziyaret edebilirsiniz.
Sıkça Sorulan Sorular
Next.js ile SEO uyumlu web sitesi nasıl oluşturulur?
Next.js kullanarak SEO uyumlu web sitesi oluşturmak için, doğru başlık ve meta açıklamaları ekleyin, anlamlı URL yapıları kullanın ve yapısal veri ekleyin.
Next.js’in App Router’ı nedir?
App Router, Next.js’de sayfalar ve route’lar oluşturmak için kullanılan bir yapılandırma sistemidir.
Next.js ile veri nasıl getirilir?
Next.js’de veri getirme işlemleri, React Server Components kullanılarak yapılır ve server-side’da getirilir.
SEO uyumlu URL yapıları nasıl oluşturulur?
SEO uyumlu URL yapıları, kısa, açıklayıcı ve anahtar kelimeleri içeren URL’ler oluşturularak sağlanır.
Next.js’de görsel optimizasyonu nasıl yapılır?
Next.js, yerleşik Image bileşeni ile görselleri optimize ederek sayfa hızını artırır.
Next.js ile mobil uyumlu web sitesi nasıl yapılır?
Next.js ile mobil uyumlu web sitesi oluşturmak için, responsive tasarımlar kullanarak ve mobil cihazlarda test ederek uyumluluk sağlanır.