Next.js 15 ile Modern E-Ticaret: Performans ve SEO Optimizasyonu

E-ticaret siteleri için performans ve SEO, satışların anahtarıdır. Next.js 15, bu iki alanda da çığır açan özellikler sunuyor. Bu yazıda, modern e-ticaret sitelerinde Next.js 15'i nasıl kullanacağınızı detaylıca inceleyeceğiz.

Next.js 15 Yeni Özellikler

1. Turbopack ile Lightning-Fast Development

Performans Karşılaştırması:

`json

// package.json

{

"scripts": {

"dev": "next dev --turbopack",

"build": "next build --turbopack"

}

}

`

2. Server Components ile Performance Boost

Avantajlar:

`tsx

// app/products/[id]/page.tsx

async function ProductPage({ params }: { params: { id: string } }) {

// Server-side data fetching

const product = await fetchProduct(params.id);

return (

);

}

`

3. Streaming SSR ile Gradual Rendering

Kullanıcı Deneyimi:

`tsx

import { Suspense } from 'react';

export default function ProductList() {

return (

);

}

`

4. Image Optimization 2.0

Next.js Image Component:

`tsx

import Image from 'next/image';

src="/products/product-1.jpg"

alt="Ürün Adı"

width={800}

height={600}

quality={85}

loading="lazy"

placeholder="blur"

blurDataURL="data:image/jpeg;base64,..."

/>

`

Sonuç: %60 daha küçük dosya boyutu, %40 daha hızlı yükleme

E-Ticaret için SEO Optimizasyonu

1. Metadata ve Open Graph

`tsx

// app/products/[slug]/page.tsx

import type { Metadata } from 'next';

export async function generateMetadata(

{ params }: { params: { slug: string } }

): Promise {

const product = await fetchProduct(params.slug);

return {

title: ${product.name} - En Uygun Fiyat | Mağaza Adı,

description: product.description,

openGraph: {

title: product.name,

description: product.description,

images: [product.image],

type: 'product',

},

twitter: {

card: 'summary_large_image',

title: product.name,

description: product.description,

images: [product.image],

},

};

}

`

2. Structured Data (JSON-LD)

Google için zengin snippet'ler:

`tsx

export default function ProductPage({ product }) {

const structuredData = {

"@context": "https://schema.org",

"@type": "Product",

"name": product.name,

"image": product.image,

"description": product.description,

"sku": product.sku,

"offers": {

"@type": "Offer",

"price": product.price,

"priceCurrency": "TRY",

"availability": "https://schema.org/InStock",

"seller": {

"@type": "Organization",

"name": "Mağaza Adı"

}

},

"aggregateRating": {

"@type": "AggregateRating",

"ratingValue": product.rating,

"reviewCount": product.reviewCount

}

};

return (

<>

type="application/ld+json"

dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}

/>

{/ Product content /}

);

}

`

3. Dynamic Sitemap Generation

`ts

// app/sitemap.ts

import { MetadataRoute } from 'next';

export default async function sitemap(): Promise {

const products = await fetchAllProducts();

const productUrls = products.map((product) => ({

url: https://example.com/products/${product.slug},

lastModified: product.updatedAt,

changeFrequency: 'weekly' as const,

priority: 0.8,

}));

return [

{

url: 'https://example.com',

lastModified: new Date(),

changeFrequency: 'daily',

priority: 1,

},

...productUrls,

];

}

`

Performans Optimizasyonları

1. Database Query Optimization

Prisma ile Efficient Queries:

`ts

// lib/db/products.ts

import { prisma } from '@/lib/prisma';

export async function getProductWithRelations(slug: string) {

return await prisma.product.findUnique({

where: { slug },

include: {

category: true,

images: true,

reviews: {

take: 10,

orderBy: { createdAt: 'desc' },

include: { user: true }

},

variants: true,

},

});

}

`

2. Redis Caching Strategy

`ts

import { Redis } from '@upstash/redis';

const redis = new Redis({

url: process.env.UPSTASH_REDIS_URL,

token: process.env.UPSTASH_REDIS_TOKEN,

});

export async function getCachedProduct(id: string) {

// Check cache first

const cached = await redis.get(product:${id});

if (cached) return cached;

// Fetch from database

const product = await fetchProduct(id);

// Cache for 1 hour

await redis.setex(product:${id}, 3600, JSON.stringify(product));

return product;

}

`

3. CDN ve Edge Functions

Vercel Edge Functions:

`ts

// middleware.ts

import { NextResponse } from 'next/server';

import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {

const country = request.geo?.country || 'US';

// Redirect based on country

if (country === 'TR' && !request.nextUrl.pathname.startsWith('/tr')) {

return NextResponse.redirect(new URL('/tr', request.url));

}

return NextResponse.next();

}

`

Conversion Rate Optimization (CRO)

1. A/B Testing with Middleware

`ts

export function middleware(request: NextRequest) {

const bucket = Math.random() < 0.5 ? 'a' : 'b';

const response = NextResponse.next();

response.cookies.set('bucket', bucket);

return response;

}

`

2. Analytics Integration

Google Analytics 4:

`tsx

// app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }) {

return (

src={https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX}

strategy="afterInteractive"

/>

{children}

);

}

`

Başarı Metrikleri

Gerçek Dünya Sonuçları:

Enextware E-Ticaret Çözümleri

Next.js 15 ile e-ticaret sitenizi geliştirmek için bizimle çalışın:

Ücretsiz Danışmanlık: +90 536 628 0007