티스토리 뷰

framework/NextJS

🎨 Next.js App Router에서 이미지와 폰트 최적화 완벽 가이드

octo54 2025. 4. 15. 11:24

🎨 Next.js App Router에서 이미지와 폰트 최적화 완벽 가이드

Next.js는 퍼포먼스 중심의 웹 프레임워크답게, 이미지와 폰트 리소스를 자동으로 최적화할 수 있는 기능을 기본으로 제공합니다.
App Router 기반 프로젝트에서는 next/image와 next/font 모듈을 통해 손쉽게 빠르고 깔끔한 UI를 구성할 수 있습니다.

🖼️ 이미지 최적화: `next/image` 사용법

next/image는 다음과 같은 기능을 제공합니다:

지연 로딩(Lazy Loading) 자동 처리
이미지 크기 자동 조절 및 리사이징
WebP 등 최신 포맷 자동 변환
레이아웃 시프트 방지

✅ 로컬 이미지 사용

import Image from 'next/image';

export default function Profile() {
  return (
    <Image
      src="/profile.jpg" // public 디렉토리 기준
      alt="프로필"
      width={500}
      height={500}
      placeholder="blur"
    />
  );
}

또는 이미지 파일을 직접 import해서 사용:

import Image from 'next/image';
import profile from '../public/profile.jpg';

export default function Avatar() {
  return <Image src={profile} alt="아바타" />;
}

🌍 외부 이미지(원격 이미지) 사용

next.config.js에 도메인 등록 필요:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.example.com',
      },
    ],
  },
};

사용 예시:

<Image
  src="https://images.example.com/image.jpg"
  alt="원격 이미지"
  width={600}
  height={400}
/>

🅰️ 폰트 최적화: `next/font` 사용법

✅ Google Fonts

빌드 시 다운로드되어 자체 호스팅 방식으로 적용되므로 성능과 보안에 유리합니다.

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

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

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

✅ 로컬 폰트

// app/fonts.ts
import localFont from 'next/font/local';

export const pretendard = localFont({
  src: './fonts/Pretendard.woff2',
  display: 'swap',
});

import { pretendard } from './fonts';

export default function Text() {
  return <p className={pretendard.className}>로컬 폰트 적용</p>;
}

🎨 Tailwind CSS와 함께 사용

폰트를 CSS 변수로 정의하고 Tailwind 설정에 연동합니다.

// app/fonts.ts
import { Inter } from 'next/font/google';

export const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)', 'sans-serif'],
      },
    },
  },
};

// 사용 예시
<p className="font-sans">Tailwind로 적용된 폰트</p>

✅ 요약 정리

항목	핵심 기능	모듈
이미지 최적화	지연 로딩, 자동 크기 조절, WebP 변환	`next/image`
로컬 이미지	`/public/`에서 사용 가능	import 또는 경로 지정
원격 이미지	도메인 등록 후 사용	`next.config.js`
Google Fonts 최적화	자체 호스팅 방식	`next/font/google`
로컬 폰트 적용	프로젝트 내 폰트 직접 사용	`next/font/local`
Tailwind 연동	CSS 변수로 폰트 적용	`tailwind.config.js` 설정

Next.js, App Router, 이미지 최적화, 폰트 최적화, next/image, next/font, 웹 퍼포먼스, Google Fonts, 로컬 폰트, Tailwind CSS

'framework > NextJS' 카테고리의 다른 글

📡 Next.js App Router 데이터 패칭 완벽 가이드 (0)	2025.04.17
🎨 Next.js App Router에서 CSS 스타일링 완전 정복 (0)	2025.04.16
🚀 Next.js App Router: 레이아웃과 페이지 구조 완벽 가이드 (0)	2025.04.14
🚀 Next.js App Router 기반 프로젝트 구조 완벽 이해 (0)	2025.04.13
🚀 Next.js App Router 설치 및 프로젝트 시작 가이드 (0)	2025.04.11

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

TwentyTwentyOne

티스토리 뷰