Next.js ile Blog Sitesi Oluşturma

Modern web geliştirmede blog sitesi oluşturmak için Next.js mükemmel bir seçim. Bu yazıda, sıfırdan başlayarak profesyonel bir blog sitesi nasıl oluşturulacağını adım adım açıklayacağım.

Next.js Nedir?

Next.js, React tabanlı bir full-stack framework'üdür. Server-side rendering (SSR), static site generation (SSG), ve birçok performans optimizasyonu sunar.

Temel Özellikler

• Server-side Rendering: SEO dostu sayfalar
• Static Site Generation: Hızlı yükleme süreleri
• File-based Routing: Kolay sayfa yönetimi
• Built-in CSS Support: Tailwind CSS desteği
• Image Optimization: Otomatik görsel optimizasyonu

Proje Kurulumu

1. Next.js Projesi Oluşturma

npx create-next-app@latest blog-sitesi
cd blog-sitesi
npm run dev

2. Gerekli Paketlerin Kurulumu

npm install gray-matter remark remark-html
npm install -D @types/node

3. Proje Yapısı

blog-sitesi/
├── content/
│   └── blog/
│       ├── ilk-yazim.md
│       └── ikinci-yazim.md
├── src/
│   ├── app/
│   │   ├── blog/
│   │   │   ├── [slug]/
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── lib/
│   │   └── blog.ts
│   └── components/
└── public/

Blog Fonksiyonları

Markdown İşleme

// src/lib/blog.ts
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'content/blog');

export function getAllPosts() {
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    const slug = fileName.replace(/\.md$/, '');
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
    const matterResult = matter(fileContents);

    return {
      slug,
      ...matterResult.data,
    };
  });

  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
}

export function getPostBySlug(slug: string) {
  const fullPath = path.join(postsDirectory, `${slug}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const matterResult = matter(fileContents);

  return {
    slug,
    content: matterResult.content,
    ...matterResult.data,
  };
}

Blog Ana Sayfası

// src/app/blog/page.tsx
import Link from 'next/link';
import { getAllPosts } from '@/lib/blog';

export default async function BlogPage() {
  const posts = getAllPosts();

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-8">Blog</h1>
      
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <article key={post.slug} className="border rounded-lg p-6">
            <h2 className="text-2xl font-semibold mb-2">
              <Link href={`/blog/${post.slug}`}>
                {post.title}
              </Link>
            </h2>
            <time className="text-gray-500 text-sm">
              {post.date}
            </time>
            <p className="mt-4 text-gray-700">
              {post.excerpt}
            </p>
            <div className="mt-4 flex flex-wrap gap-2">
              {post.tags?.map((tag) => (
                <span key={tag} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                  {tag}
                </span>
              ))}
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

Blog Detay Sayfası

// src/app/blog/[slug]/page.tsx
import { getPostBySlug, getAllPosts } from '@/lib/blog';
import { remark } from 'remark';
import html from 'remark-html';

export async function generateStaticParams() {
  const posts = getAllPosts();
  
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = getPostBySlug(params.slug);
  const processedContent = await remark()
    .use(html)
    .process(post.content);
  const contentHtml = processedContent.toString();

  return (
    <article className="container mx-auto px-4 py-8 max-w-4xl">
      <header className="mb-8">
        <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
        <time className="text-gray-500">{post.date}</time>
        <div className="mt-4 flex flex-wrap gap-2">
          {post.tags?.map((tag) => (
            <span key={tag} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
              {tag}
            </span>
          ))}
        </div>
      </header>
      
      <div 
        className="prose prose-lg max-w-none"
        dangerouslySetInnerHTML={{ __html: contentHtml }}
      />
    </article>
  );
}

SEO Optimizasyonu

Metadata Yapılandırması

// src/app/blog/[slug]/page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = getPostBySlug(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
      tags: post.tags,
    },
  };
}

Performans Optimizasyonu

1. Görsel Optimizasyonu

import Image from 'next/image';

<Image
  src={post.image}
  alt={post.title}
  width={800}
  height={400}
  className="rounded-lg"
  priority
/>

2. Lazy Loading

import dynamic from 'next/dynamic';

const Comments = dynamic(() => import('@/components/Comments'), {
  ssr: false,
});

Sonuç

Next.js ile blog sitesi oluşturmak, modern web geliştirmede mükemmel bir seçim. Bu framework'ün sunduğu:

• SEO dostu yapı
• Hızlı performans
• Kolay deployment
• Zengin ekosistem

avantajları sayesinde profesyonel blog siteleri oluşturabilirsiniz.

Sırada Ne Var?

• Arama fonksiyonu ekleme
• Kategori sistemi kurma
• Yorum sistemi entegrasyonu
• Newsletter aboneliği
• Sosyal medya paylaşımı

Next.js ile blog sitenizi bir sonraki seviyeye taşımak için bu özellikleri implementere edebilirsiniz.