Performance és optimalizáció

12. Performance és optimalizáció

next/image – képoptimalizáció

import Image from 'next/image'

// Helyi kép
export function ProductCard({ product }) {
  return (
    <Image
      src={product.imageUrl}
      alt={product.name}
      width={400}
      height={300}
      className="rounded-lg"
      priority={false}      // true: LCP képeknél (above the fold)
      placeholder="blur"    // elmosódott placeholder betöltés közben
    />
  )
}

// Hero kép (LCP jelölt)
export function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero kép"
      fill                  // kitölti a szülőt
      sizes="100vw"
      priority              // preload – LCP optimalizáció
      className="object-cover"
    />
  )
}

A <Image> automatikusan:

WebP/AVIF formátumra konvertál
Lazy loading-ot alkalmaz (alapértelmezett)
Megakadályozza a layout shift-et (CLS)
Responsive képeket generál srcset-tel

Turbopack – gyors build

A Next.js 16-ban a Turbopack az alapértelmezett bundler:

{
  "scripts": {
    "dev": "next dev",          // automatikusan Turbopack
    "build": "next build"       // automatikusan Turbopack
  }
}

Ha webpack kell (custom konfiguráció):

next dev --webpack
next build --webpack

Turbopack teljesítmény:

2–5× gyorsabb production build
5–10× gyorsabb Fast Refresh fejlesztés közben
Fájlrendszer cache (Next.js 16.1-től stable): újraindítás után is gyors

next/dynamic – lazy loading

import dynamic from 'next/dynamic'

// Heavy komponens lazy loadingja
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p>Grafikon betöltése...</p>,
  ssr: false, // csak kliens oldalon
})

// Conditional import
const AdminPanel = dynamic(() => import('@/components/AdminPanel'))

export default function Dashboard({ isAdmin }) {
  return (
    <div>
      <HeavyChart data={chartData} />
      {isAdmin && <AdminPanel />}
    </div>
  )
}

Metadata API – SEO optimalizáció

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

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const post = await fetchPost(slug)

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
    },
  }
}

Fájl alapú metadata (OG kép, ikon)

A generateMetadata mellett speciális fájlnevek is állíthatnak Open Graph képet, ikont, favicont – így kevesebb kód, egy helyen a design asset:

app/
  opengraph-image.png      → automatikus OG kép
  twitter-image.jpg        → Twitter kártya
  icon.png                 → favicon / app ikon

A pontos konvenciók (méret, formátum, dinamikus opengraph-image.tsx) a Next verzió dokumentációjában vannak; elég annyit megjegyezni: nem mindent kell JSX-ben generálnod, ha statikus kép elég.

Bundle Analyzer (Next.js 16.1)

# Interaktív bundle analízis
npx @next/bundle-analyzer

// next.config.ts
const nextConfig = {
  experimental: {
    bundleAnalyzer: {
      enabled: process.env.ANALYZE === 'true',
    },
  },
}

📝 Összefoglaló – 12. fejezet

<Image> automatikus WebP konverzió, lazy loading, CLS megelőzés
Turbopack alapértelmezett – 2-10× gyorsabb build és HMR
next/dynamic lazy loading Client Componentekhez
Metadata API és fájl alapú OG/ikon konvenciók – SEO és megosztás képek
Bundle analyzer: nagy importok és kliens fa feltárása

Performance és optimalizáció

On this page