이미지와 폰트 최적화 — next/image와 next/font

import Image from "next/image";

// 정적 이미지: import하면 크기 자동 감지
import profilePic from "@/public/profile.jpg";

function Profile() {
    return (
        <Image
            src={profilePic}
            alt="프로필 사진"
            // width, height 불필요 (자동 감지)
        />
    );
}

// 원격 이미지: 크기 명시 필수
function ProductImage({ url }: { url: string }) {
    return (
        <Image
            src={url}
            alt="상품 이미지"
            width={400}
            height={300}
        />
    );
}

function HeroImage() {
    return (
        // 부모에 position: relative 필요
        <div className="relative h-96 w-full">
            <Image
                src="/hero.jpg"
                alt="히어로"
                fill
                className="object-cover"  // CSS로 크기 제어
                priority  // LCP 이미지에 사용
            />
        </div>
    );
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "images.example.com",
                pathname: "/products/**",
            },
            {
                protocol: "https",
                hostname: "*.amazonaws.com",
            },
        ],
    },
};

module.exports = nextConfig;

// app/layout.tsx
import { Noto_Sans_KR, Inter } from "next/font/google";

const notoSansKR = Noto_Sans_KR({
    subsets: ["latin"],
    weight: ["400", "700"],
    display: "swap",   // FOUT 방지
});

const inter = Inter({
    subsets: ["latin"],
    variable: "--font-inter",  // CSS 변수로 사용
});

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

import localFont from "next/font/local";

const myFont = localFont({
    src: [
        {
            path: "../public/fonts/MyFont-Regular.woff2",
            weight: "400",
            style: "normal",
        },
        {
            path: "../public/fonts/MyFont-Bold.woff2",
            weight: "700",
            style: "normal",
        },
    ],
    variable: "--font-my",
});

// 정적 메타데이터
export const metadata = {
    title: {
        template: "%s | 내 사이트",   // 페이지 제목 | 사이트명
        default: "내 사이트",
    },
    description: "사이트 설명",
    openGraph: {
        type: "website",
        locale: "ko_KR",
        url: "https://example.com",
        siteName: "내 사이트",
    },
    twitter: {
        card: "summary_large_image",
    },
};

// 동적 메타데이터 (generateMetadata 함수 사용)

import Script from "next/script";

export default function Layout({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <body>
                {children}
                {/* 페이지 로드 후 비동기 로드 */}
                <Script
                    src="https://analytics.example.com/script.js"
                    strategy="lazyOnload"
                />
            </body>
        </html>
    );
}