로고

Next.js 앱의 배포와 성능 최적화: Vercel을 이용한 배포와 성능 개선 팁.

작성일 :

Next.js 앱의 배포와 성능 최적화: Vercel을 이용한 배포와 성능 개선 팁

개요

Next.js는 React 애플리케이션의 서버 사이드 렌더링을 손쉽게 구현할 수 있게 해주는 프레임워크입니다. Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 및 자동 코드 분할 등의 기능을 기본적으로 제공하여 성능 향상에 도움을 줍니다. 이 글에서는 Next.js 앱을 Vercel을 이용해 배포하는 과정과 성능 최적화를 위한 다양한 팁을 소개하겠습니다.

Vercel을 이용한 배포

Vercel은 Next.js를 개발한 회사로, Next.js 애플리케이션을 쉽게 배포할 수 있도록 설계된 서버리스 플랫폼입니다. Vercel을 이용하면 몇 가지의 간단한 단계만으로 Next.js 앱을 배포할 수 있습니다.

Vercel 계정 생성 및 프로젝트 설정

  1. Vercel 계정 생성: 🔗 Vercel 웹사이트에 접속하여 계정을 생성합니다. GitHub 계정으로 로그인하는 것을 추천합니다.
  2. 프로젝트 추가: Vercel 대시보드에서 'New Project' 버튼을 클릭하고, GitHub 리포지토리와 연동합니다.
  3. 배포 설정: 리포지토리 연동 후 Vercel이 자동으로 Next.js 프로젝트를 인식하고, 배포 설정을 완료합니다.
  4. 배포 완료: 배포가 완료되면 Vercel은 프로젝트의 URL을 제공합니다. 이 URL을 통해 앱을 접근할 수 있습니다.

성능 최적화

Next.js 앱의 성능을 최적화하는 여러 가지 방법이 있습니다. 여기서는 코드 분할, 이미지 최적화, 데이터 페칭 등에 대해 알아보겠습니다.

코드 분할

Next.js는 기본적으로 Automatic Code Splitting 기능을 제공합니다. 각 페이지를 개별 번들로 분할하여 초기 로드 속도를 향상시킵니다. 하지만 추가적인 최적화를 위해 dynamic import를 활용할 수 있습니다.

javascript
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() => import('../components/YourComponent'))

이미지 최적화

Next.js는 next/image 컴포넌트를 제공하여 이미지 최적화를 쉽게 구현할 수 있습니다. 이 컴포넌트를 사용하면 이미지의 크기를 자동으로 조절하고, 필요한 경우 이미지를 lazy-load할 수 있습니다.

javascript
import Image from 'next/image'

<Image
  src="/me.png"
  alt="Picture of the author"
  width={500}
  height={500}
/>

데이터 페칭

Next.js는 여러 가지 데이터 페칭 방식을 제공합니다. getStaticProps, getServerSideProps, getStaticPaths을 통해 정적 데이터를 미리 생성하거나 서버 사이드에서 동적으로 데이터를 가져올 수 있습니다. 이러한 기능을 적절히 활용하면 페이지 로드 시간을 줄일 수 있습니다.

getStaticProps

정적 생성(Static Generation) 중에 데이터를 가져와 페이지를 생성하는 방식입니다. 주로 변경되지 않는 데이터를 다룰 때 사용합니다.

javascript
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

getServerSideProps

매 요청마다 서버에서 데이터를 가져와 페이지를 생성하는 방식입니다. 주로 사용자 맞춤 데이터를 다룰 때 사용합니다.

javascript
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

기타 최적화 팁

  • Bundle Analyzer: 애플리케이션 번들 크기를 분석하고 개선점을 찾는데 유용합니다. next-bundle-analyzer 패키지를 사용하여 번들을 시각화할 수 있습니다.
javascript
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({})

  • PurgeCSS: 사용하지 않는 CSS를 제거하여 파일 크기를 줄일 수 있습니다. purgecss와 postcss를 활용하여 설정할 수 있습니다.

  • Preact 사용: React 대신 Preact를 사용하여 번들 크기를 줄일 수 있습니다. next-plugin-preact 패키지를 사용하면 손쉽게 Preact로 전환할 수 있습니다.

javascript
// next.config.js
const withPreact = require('next-plugin-preact')
module.exports = withPreact({})

결론

Next.js는 강력한 성능 최적화 기능을 가진 훌륭한 프레임워크입니다. Vercel을 이용해 손쉽게 배포할 수 있으며, 다양한 최적화 방법을 사용하면 성능을 더욱 향상시킬 수 있습니다. 코드 분할, 이미지 최적화, 데이터 페칭 전략을 적절히 활용하여 사용자에게 더 나은 경험을 제공할 수 있습니다.