Metadata, next/image, next/font, next/script, streaming, parallel és intercepting route-ok áttekintése.

Next.js – Speciális funkciók

A teljes Next.js jegyzet 7. fejezetének rövid, gyakorlati kivonata.

Metadata API

SEO‑hoz és social preview‑hoz metaadatokat adhatsz közvetlenül a page‑hez vagy layout‑hoz.

// app/about/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Rólunk – Cégem',
  description: 'Ismerj meg minket közelebbről.',
  openGraph: {
    title: 'Rólunk',
    images: ['/og-about.jpg'],
  },
};

export default function AboutPage() {
  return <div>Rólunk</div>;
}

Dinamikus metadata (pl. terméknév az oldalcímben): generateMetadata.

Képek – `next/image`

Előnyök:

automatikus átméretezés,
modern formátumok (WebP, AVIF),
lazy loading,
CLS (layout shift) elleni védelem.

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero kép"
      width={1200}
      height={600}
      priority  // above-the-fold képeknél
    />
  );
}

Külső domain esetén a next.config.mjs‑ben engedélyezni kell a hostot.

Betűtípusok – `next/font`

Betűtípusok build‑time letöltése és optimalizálása.

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="hu" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Előny: nincs extra hálózati kérés a fontért betöltéskor.

Külső scriptek – `next/script`

Harmadik fél (pl. analytics) script‑jeinek kontrollált betöltése.

import Script from 'next/script';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Script
        src="https://www.googletagmanager.com/gtag/js"
        strategy="afterInteractive"
      />
    </>
  );
}

Stratégiák:

beforeInteractive – kritikus script‑ekhez,
afterInteractive – pl. analytics,
lazyOnload – nem kritikus, háttérben tölthető script.

Error boundary – `error.tsx`

Az adott szegmens hibáit kezeli, Client Component kell legyen.

// app/dashboard/error.tsx
"use client";

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <h2>Valami hiba történt!</h2>
      <button onClick={reset}>Próbáld újra</button>
    </div>
  );
}

Streaming & több Suspense blokk

Egy oldalon belül egymástól függetlenül töltődő részek:

import { Suspense } from 'react';
import { UserStats } from './UserStats';
import { RecentActivity } from './RecentActivity';

export default function DashboardPage() {
  return (
    <div>
      <Suspense fallback={<div>Statisztikák töltődnek...</div>}>
        <UserStats />
      </Suspense>
      <Suspense fallback={<div>Aktivitás töltődik...</div>}>
        <RecentActivity />
      </Suspense>
    </div>
  );
}

Parallel route-ok

Egy route‑on belül több, független “slot”:

app/
└── dashboard/
    ├── @analytics/page.tsx
    ├── @team/page.tsx
    └── layout.tsx

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div>
      {children}
      <div style={{ display: 'flex' }}>
        {analytics}
        {team}
      </div>
    </div>
  );
}

Intercepting route-ok (URL‑alapú modalok)

Lehetővé teszik, hogy egy route‑ot modalként jeleníts meg egy másikon:

app/
├── photo/[id]/page.tsx             → /photo/1 (teljes oldal)
└── feed/
    ├── page.tsx
    └── @modal/(.)photo/[id]/page.tsx  → /photo/1 a feed-ből modalként

Használat:

feed → kattintás → modal,
frissítés → teljes oldal töltődik be.

Összefoglalás

Metadata API – SEO, Open Graph, social preview.
next/image – képek automatizált optimalizálása.
next/font – fontok build‑time kezelése.
next/script – külső scriptek betöltési stratégiája.
error.tsx + streaming + parallel routes + intercepting routes – fejlett UX minták kombinálása Next.js‑ben.

Speciális funkciók

On this page