Next.js 리소스를 최적화

🚀 1. Image 컴포넌트로 이미지 최적화하기

Next.js는 내장된 이미지 최적화 기능을 제공합니다.

✅ 적용 방법

import Image from 'next/image'

export default function Home() {
  return (
    <div>
      <Image
        src="/images/photo.jpg"
        alt="최적화된 이미지"
        width={800}
        height={600}
        priority={true} // 로딩 우선순위 설정
      />
    </div>
  )
}

⚙️ 주요 기능

• 자동 최적화: 이미지 압축 및 리사이징(WebP, AVIF 등 지원)
• Lazy-loading: 화면 진입 시점에 맞춰 로딩 (기본 설정)
• CDN 캐싱 활용: Production 환경에서 자동 CDN 연동 가능

---

🚀 2. 폰트(Font) 최적화

Next.js 13+ 부터 내장된 폰트 최적화 기능을 제공합니다.

✅ 적용 방법

import { Inter } from 'next/font/google'

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

export default function Home() {
  return (
    <main className={inter.className}>
      <h1>폰트 최적화 적용 예시</h1>
    </main>
  )
}

⚙️ 장점

• 자동으로 최적화된 폰트를 CDN으로 배포
• 페이지 로딩 속도 개선 및 CLS(레이아웃 이동) 최소화

---

🚀 3. Dynamic Import(지연 로딩)를 통한 리소스 최적화

JavaScript 파일의 크기를 줄이고 초기 페이지 로딩 속도를 높입니다.

✅ 적용 방법

import dynamic from 'next/dynamic'

// 동적으로 컴포넌트 불러오기 (서버 사이드 렌더링 비활성화 가능)
const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  ssr: false,
  loading: () => <p>로딩 중...</p>,
})

export default function Page() {
  return (
    <div>
      <HeavyComponent />
    </div>
  )
}

⚙️ 장점

• 초기 로딩 시 JS 파일 크기 최소화
• 성능 및 TTI(Time to Interactive) 향상

---

🚀 4. Bundle Analyzer로 리소스 점검하기

리소스 사용 현황을 시각적으로 분석하여 불필요한 모듈을 제거하거나 최적화할 수 있습니다.

✅ 적용 방법

npm install @next/bundle-analyzer --save-dev

next.config.js 설정:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // 기존 next.js 설정
})

실행 방법:

ANALYZE=true npm run build

⚙️ 장점

• 번들 크기와 구성요소를 쉽게 파악하여 최적화 가능
• 용량이 큰 불필요한 라이브러리 찾기 쉬움

---

🚀 5. 컴포넌트 및 페이지 캐싱 전략 적용하기

Next.js에서는 아래 방식으로 캐싱을 관리할 수 있습니다.

• 정적 페이지 생성(Static Site Generation, SSG):
  정적 콘텐츠를 미리 빌드하고 CDN에 캐시하여 빠르게 로딩합니다.

export async function getStaticProps() {
  // 데이터 fetching 및 빌드 시 정적 페이지 생성
  return { props: { data } }
}

• ISR(Incremental Static Regeneration):
  정적 콘텐츠에 동적 데이터를 주기적으로 재검증하여 캐시를 최적화합니다.

export async function getStaticProps() {
  return { 
    props: { data },
    revalidate: 60, // 60초마다 캐시 재검증
  }
}

• 캐싱 헤더 설정(커스텀):
  API Route 등에서 HTTP 헤더를 통해 캐싱 전략 설정 가능

export default function handler(req, res) {
  res.setHeader('Cache-Control', 'public, max-age=600')
  res.status(200).json({ data: 'cached data' })
}

 

---

🚀 6. CDN 활용 및 커스텀 Cache-Control

Vercel 등 클라우드 배포 시 CDN과 캐싱 설정을 통해 추가 최적화가 가능합니다.

✅ 적용 예시

• 이미지와 정적 파일에 적절한 캐싱 헤더 설정:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*).(png|jpg|jpeg|gif|svg)',
        headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }],
      },
    ]
  },
}

 

---

🚀 7. 코드 스플리팅 및 불필요한 JS 최소화

Next.js는 기본적으로 코드 스플리팅을 제공합니다.
추가적으로:

• 불필요한 JS 제거
• Tree-shaking 효과를 극대화하기 위해 ES modules 사용
• Polyfill 등 레거시 코드 제거

✅ Tree-shaking 예시

// 사용하지 않는 코드는 빌드 시 자동 제거됨
import { usedMethod } from 'library' 

---

🚀 리소스 최적화 요약

방법 설명

Image 컴포넌트 활용	이미지 압축, CDN 배포
폰트 최적화	내장 폰트 최적화로 로딩 속도 개선
Dynamic Import	JS 크기 최소화, 로딩 속도 향상
Bundle Analyzer	불필요한 리소스 분석 및 제거
SSG & ISR 캐싱 전략	페이지 로딩 속도 극대화
CDN & Cache-Control	캐싱 헤더를 통한 로딩 속도 향상

---