728x90
App Router: Optimizing Fonts and Images
글꼴을 최적화 해야하는 이유
프로젝트에서 사용자 지정 글꼴을 사용하면 글꼴파일 로드시 성능에 영향을 미칠 수 있다.
ex) 시스템 글꼴로 랜더링 후 사용자 글꼴로 텍스트가 렌더링 됨에 따라 텍스트 크기, 간격 등이 변경되어 주변 요소에 영향을 미친다.
NextJs는 빌드시 글꼴 파일을 다운로드해 다른 정적 자산과 함께 호스팅한다.
즉 next/font/폰트명 으로 폰트를 다운받고, 정적 자산으로 번들링 된다.
따라서 사용자가 애플리케이션에 방문 시 성능에 영향을 줄 수 있는 네트워크 요청이 없다.
기본 글꼴 추가
/app/ui 폴더에 fonts.ts 를 만듭니다.
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
/app의 layout.tsx에 새로 다운받은 폰트를 적용합니다.
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}
왜 이미지를 최적화해야 하나요?
Nest.js는 최상위 폴더 아래 /public 으로 정적 자산을 사용할 수 있습니다.
일반적인 img태그는 개발자가 직접 해야하는 여러 이미지 최적화 작업을 해야하지만, Next.js는 이를 자동으로 처리해줍니다.
Imaeg 컴포넌트
Image 컴포넌트는 img태그의 확장으로 자동으로 이미지 최적화 기능을 제공합니다.
- 이미지 로드시 레이아웃 이동 방지
- 뷰포트 크기에 맞게 이미지를 리사이징하여 불필요하게 큰 이미지 전송 방지
- 기본적으로 지연 로딩을 지원해 뷰포트로 접근 시 이미지를 로드
- WebP나 AVIF와 같은 최신 이미지 포맷 제공
이미지 추가 실습
/app/page.tsx에 두 이미지를 추가해보겠습니다.
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
export default function Page() {
return (
// ...
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
{/* Add Hero Images Here */}
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
<Image
src="/hero-mobile.png"
width={560}
height={620}
className="block md:hidden"
alt="Screenshot of the dashboard project showing mobile version"
/>
</div>
//...
);
}
이미지를 랜더링되기 전에 width와 height는 레이아웃 이동 방지를 위해 영역을 예약합니다.
또한 클레스네임을 hidden md:block 또는 md:block hidden으로 지정해 평소에는 숨기다가 사이즈가 md(미디엄) 이상일때 보여줍니다.
728x90
'Frontend > Next.js' 카테고리의 다른 글
| [Official Learn Next.js] Learn ‘App Router’ - Chapter 1. Gatting Started (0) | 2025.03.16 |
|---|---|
| [Official Learn Next.js] Learn ‘App Router’ - Introduction (0) | 2025.03.16 |