Next.js Components & Fonts Deep Dive

Next.js ships special components that beat hand-rolled HTML for common jobs: Image, Link, Script, and font helpers.

Built-in components overview

Next.js ships special components that beat hand-rolled HTML for common jobs: Image, Link, Script, and font helpers.

Real-life example: These components are power tools from the same brand as your framework — sized for the job, with safety guards included.

next/image — resize, lazy load, modern formats
next/link — client navigation + prefetch
next/script — control third-party script timing
next/font — self-host Google or local fonts with zero layout shift goal

Link + Script together

import Link from "next/link";
import Script from "next/script";

export function DocsNav() {
  return (
    <nav>
      <Link href="/learn">Courses</Link>
      <Link href="/knowledge">Guides</Link>
      <Script src="https://example.com/widget.js" strategy="lazyOnload" />
    </nav>
  );
}

Fonts best practices

Load fonts with next/font/google or next/font/local in the root layout. Apply via className or CSS variables. Avoid linking Google Fonts CSS in raw <link> tags when next/font can self-host.

Limit families and weights. Match body and heading roles clearly.

Real-life example: Font practice is packing for a weekend trip — two outfits that work, not your entire wardrobe in the cabin bag.

Tip: Set font-family in CSS with var(--font-sans) so components stay consistent without importing the font object everywhere.

next/font/google example

import { Source_Sans_3, Source_Serif_4 } from "next/font/google";

const sans = Source_Sans_3({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
});

const serif = Source_Serif_4({
  subsets: ["latin"],
  variable: "--font-serif",
  display: "swap",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${sans.variable} ${serif.variable}`}>
      <body>{children}</body>
    </html>
  );
}