Next.js / next/font оновчлол

next/font оновчлол

Вэб хуудас ачаалах үед фонт хожим татагдаж ирэхэд текст эхлээд системийн фонтоор харагдаад дараа нь өөрчлөгддөг — энэ нь FOUT (Flash of Unstyled Text) гэгддэг. Хэрэглэгчид эвгүй. next/font энэ асуудлыг бүрэн шийддэг.

next/font/google — Google Fonts оновчлол

next/font/google нь Google Fonts-г build хийх үед татаж аваад дотроо хадгалдаг. Хэрэглэгчийн хөтөч Google-н сервер рүү хүсэлт илгээхгүй — маш хурдан, нууцлал сайн.

typescript
// app/layout.tsx
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';

const geistSans = Geist({
  subsets: ['latin'],
  variable: '--font-geist-sans', // CSS variable болгон ашиглана
});

const geistMono = Geist_Mono({
  subsets: ['latin'],
  variable: '--font-geist-mono',
});

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

variable тохиргоо нь фонтыг CSS custom property болгон хадгалдаг. Тэгснээр Tailwind CSS дотор font-sans, font-mono ашиглах боломжтой болно.

Tailwind-тэй холбох

globals.css дотор @theme директив ашиглан фонтын variable-г Tailwind-д бүртгэнэ:

css
/* app/globals.css */
@import "tailwindcss";

@theme {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

Одоо component дотор font-mono class ашиглахад Geist Mono автоматаар хэрэглэгдэнэ:

tsx
// components/lesson/CodeBlock.tsx
export default function CodeBlock({ code }: { code: string }) {
  return (
    <pre className="font-mono bg-[#0f172a] text-[#f1f5f9] p-4 rounded-lg overflow-x-auto">
      <code>{code}</code>
    </pre>
  );
}

next/font/local — локал фонт

Google Fonts ашиглахгүйгээр public/fonts/ директор дотор фонт файл хадгалж next/font/local-г ашиглаж болно:

typescript
// app/layout.tsx
import localFont from 'next/font/local';

const mongolianFont = localFont({
  src: [
    {
      path: '../public/fonts/mongolian-regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../public/fonts/mongolian-bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  variable: '--font-mongolian',
});

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

.woff2 формат нь вэбэд хамгийн оновчтой фонт формат — файлын хэмжээ жижиг, татах хурд хурдан.

display: 'swap' — FOUT шийдэх

Фонт ачаалагдах хүртэл системийн фонт харуулаад дараа нь солих тохиргоо:

typescript
const geistSans = Geist({
  subsets: ["latin"],
  variable: "--font-geist-sans",
  display: "swap", // ← системийн фонт → Geist болж солигдоно
});

display: 'swap' нь next/font дотор анхнаасаа тохируулагдсан байдаг тул ихэвчлэн гараар нэмэх шаардлагагүй — гэхдээ мэдэж байх нь чухал.

Дараагийн хичээлд:

Environment Variable ашиглан API key, database URL зэрэг нууц мэдээллийг кодоос тусад нь хэрхэн хадгалж, NEXT_PUBLIC_ prefix-тэй болон серверийн variable-г ялгахыг ойлгоно.

← Өмнөх хичээлnext/image оновчлолДараах хичээл →Environment Variable