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' 

🚀 리소스 최적화 요약

방법 설명

---

쿠버네티스 패키지관리

     📕교보문고 종이책 구매
     📱교보문고 이북 구매
🛒부크크 종이책 구매

실수로 배우는 자바

📕교보문고 종이책 구매
📱교보문고 이북 구매
🛒 부크크 종이책 구매

AI와 함께하는 협업 바이블

📱교보문고 이북 구매
     🛒부크크 종이책 구매
책은 yes24, 알라딘에도 판매 되고 있습니다.