Next.js ile Sıfırdan SEO Dostu Kurumsal Web Sitesi Oluşturma: Adım Adım Rehber

nextjsdeployweb geliştirmeSEOKurumsal Web SitesiPrisma ORMPerformans OptimizasyonuDil DesteğiCI/CDVercelReact

Bu rehber, Next.js kullanarak SEO uyumlu ve performanslı bir kurumsal web sitesi oluşturma adımlarını detaylandırıyor. Proje yapılandırmasından performans optimizasyonuna kadar her aşamayı ele alıyoruz.

Next.js ile Sıfırdan SEO Dostu Kurumsal Web Sitesi Oluşturma: Derinlemesine Bir Rehber

İçindekiler

  1. Proje Yapılandırması
  2. SEO ve Metadata Yönetimi
  3. Çoklu Dil Desteği
  4. Veritabanı Entegrasyonu ve Prisma ORM
  5. Performans Optimizasyonu
  6. Admin Paneli ve İçerik Yönetimi
  7. Deployment ve CI/CD

1. Proje Yapılandırması

Projeye başlarken, Next.js kurulumunu ve bağımlılıklarını nasıl yöneteceğinizi bilmek önemlidir.

Temel Kurulum

npx create-next-app@latest my-corporate-site
cd my-corporate-site

Bağımlılıklar

{
  "dependencies": {
    "@next-auth/prisma-adapter": "^1.0.7",
    "@prisma/client": "^5.22.0",
    "next": "14.0.0",
    "next-auth": "^4.24.10",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-quill": "^2.0.0"
  }
}

Dizin Yapısı ve Açıklamaları

├── app/
│   ├── [lang]/         # Dil bazlı routing
│   │   ├── page.js     # Ana sayfa
│   │   ├── blog/       # Blog sayfaları
│   │   └── projects/   # Proje sayfaları
│   ├── api/           # API endpoints
│   └── admin/         # Yönetim paneli
├── components/        # Yeniden kullanılabilir bileşenler
├── config/           # Konfigürasyon dosyaları
└── prisma/          # Veritabanı şemaları

2. SEO ve Metadata Yönetimi

SEO açısından kritik olan metadata yönetimi, her sayfa için benzersiz title ve description oluşturmaktan geçer. Next.js ile merkezi bir metadata konfigürasyonu oluşturmak oldukça kolaydır.

Örnek Metadata Yapılandırması

// config/metadata.js
export const defaultMetadata = {
  metadataBase: new URL('https://example.com'),
  title: {
    default: "Şirket Adı",
    template: "%s | Şirket Adı"
  },
  description: {
    tr: "Türkçe açıklama",
    en: "English description"
  },
  alternates: {
    canonical: "https://example.com",
    languages: {
      'tr-TR': '/tr',
      'en-US': '/en',
    },
  },
  openGraph: {
    // ... OpenGraph konfigürasyonu
  }
};

Her blog gönderisi için dinamik metadata da oluşturabilirsiniz. Böylece SEO uyumluluğunu artırabilirsiniz.

Dinamik Metadata Oluşturma

// app/[lang]/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await prisma.blog.findUnique({
    where: { slug: params.slug }
  });

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage]
    }
  };
}

3. Çoklu Dil Desteği

Kurumsal web siteleri için çoklu dil desteği oldukça önemlidir. Next.js, dil bazlı içerik yönetimi ve yönlendirme middleware'leriyle bu süreci oldukça kolaylaştırır. Kullanıcıların dil tercihlerine göre yönlendirilmesini sağlamak, kullanıcı deneyimini ve SEO'yu iyileştirir.

Dil Yönlendirme Middleware'i

// middleware.js
export function middleware(request) {
  const { pathname } = request.nextUrl;
  const pathnameHasLocale = locales.some(
    locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (!pathnameHasLocale) {
    const locale = getLocale(request);
    return NextResponse.redirect(
      new URL(`/${locale}${pathname}`, request.url)
    );
  }
}

Dil Bazlı İçerik Yönetimi

// app/[lang]/page.js
async function getHomeData(lang) {
  const hero = await prisma.hero.findFirst({
    where: {
      cultures: {
        some: {
          code: lang
        }
      }
    }
  });
  
  // Diğer içerikler...
  return { hero, ... };
}

4. Veritabanı Entegrasyonu ve Prisma ORM

Veritabanı katmanında Prisma ORM kullanarak blog, projeler ve kültürel içerikleri yönetmek mümkündür. Örneğin, çok dilli bir blog şeması oluşturup Prisma ile bu verileri sorgulayarak dil bazlı içerikler sunabilirsiniz.

Örnek Prisma Şeması

// prisma/schema.prisma
model Blog {
  id        String   @id @default(uuid())
  slug      String   @unique
  title     String
  content   String   @db.Text
  excerpt   String?
  published Boolean  @default(false)
  cultures  Culture[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Culture {
  id      String @id @default(uuid())
  code    String // tr, en
  blogs   Blog[]
  projects Project[]
}

Veritabanı Sorgulama

// lib/prisma.js
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default prisma;

5. Performans Optimizasyonu

Performans, SEO ve kullanıcı deneyimi açısından oldukça önemlidir. Görsel optimizasyonu, lazy loading ve bundle size azaltımı gibi tekniklerle site performansını artırabilirsiniz.

Görsel Optimizasyonu

// components/OptimizedImage.js
import Image from 'next/image';

export function OptimizedImage({ src, alt, ...props }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={600}
      placeholder="blur"
      blurDataURL={`data:image/svg+xml,...`}
      {...props}
    />
  );
}

Bu sayede, kullanıcılar daha hızlı yüklenen sayfalarla karşılaşır ve bu da SEO sıralamanızı olumlu yönde etkiler.

Font Optimizasyonu

// app/layout.js
const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={geistSans.variable}>
        {children}
      </body>
    </html>
  );
}

6. Admin Paneli ve İçerik Yönetimi

Admin paneli ile içeriklerinizi kolayca yönetmek için güvenli admin rotaları oluşturun. Bunun yanı sıra içerik yönetimi API'leri oluşturarak site içeriğinizi dinamik olarak güncelleyebilirsiniz.

Güvenli Admin Rotaları

// middleware.js
export const config = {
  matcher: [
    '/admin/:path*',
    '/api/admin/:path*'
  ]
}

export async function middleware(request) {
  const session = await getSession(request);
  
  if (!session) {
    return NextResponse.redirect(new URL('/auth/signin', request.url));
  }
  
  if (!session.user.isAdmin) {
    return NextResponse.redirect(new URL('/', request.url));
  }
}

İçerik Yönetimi API'leri

// app/api/admin/blog/route.js
export async function POST(request) {
  const session = await getServerSession();
  if (!session?.user?.isAdmin) {
    return new Response('Unauthorized', { status: 401 });
  }

  const data = await request.json();
  
  const blog = await prisma.blog.create({
    data: {
      title: data.title,
      content: data.content,
      cultures: {
        connect: data.cultures.map(code => ({
          code
        }))
      }
    }
  });

  return Response.json(blog);
}

7. Deployment ve CI/CD

Vercel kullanarak Next.js uygulamanızı kolayca deploy edebilir ve GitHub Actions ile CI/CD süreçlerinizi otomatize edebilirsiniz. Böylece kod güncellemeleriniz anında yayınlanır ve sürekli entegrasyon sağlanır.

Vercel Deployment Konfigürasyonu

// vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next"
    }
  ],
  "env": {
    "DATABASE_URL": "@database_url",
    "NEXTAUTH_SECRET": "@nextauth_secret"
  }
}

GitHub Actions ile Otomatik Deployment

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}

Önemli İpuçları ve Best Practices

  1. SEO Optimizasyonu
  • Her sayfa için unique title ve description
  • Semantic HTML kullanımı
  • Structured data (JSON-LD) implementasyonu
  • Sitemap.xml ve robots.txt dosyaları
  1. Performans
  • Image optimizasyonu
  • Code splitting
  • Bundle size optimizasyonu
  • Lazy loading
  • Server-side caching
  1. Güvenlik
  • API rate limiting
  • Input validation
  • CSRF koruması
  • Güvenli header'lar
  • Environment variables yönetimi
  1. Maintainability
  • Modüler kod yapısı
  • TypeScript kullanımı
  • ESLint ve Prettier konfigürasyonu
  • Unit ve integration testleri

Sonuç

Bu rehberde, modern bir kurumsal web sitesinin nasıl oluşturulacağını detaylı bir şekilde inceledik. Next.js 14'ün sunduğu App Router, Server Components ve diğer özellikleri kullanarak, hem performanslı hem de SEO dostu bir web sitesi oluşturduk.

Özellikle dikkat edilmesi gereken noktalar:

  1. SEO stratejisinin baştan planlanması
  2. Çoklu dil desteğinin doğru implementasyonu
  3. Performans optimizasyonlarının sürekli takibi
  4. Güvenlik önlemlerinin eksiksiz uygulanması
  5. Maintainable ve scalable bir kod base'i oluşturulması

Bu rehberi takip ederek, modern web standartlarına uygun, performanslı ve SEO dostu bir kurumsal web sitesi oluşturabilirsiniz.

Blog