Next.js를 사용하는 이유

Next.js

Next.js는 React 애플리케이션 개발을 위한 프레임워크로, 다양한 기능과 장점을 제공하여 개발자들이 더 효율적이고 성능 좋은 웹 애플리케이션을 만들 수 있도록 도와준다.

 

서버 사이드 렌더링(SSR, Server-Side Rendering)

• Next.js는 서버 사이드 렌더링을 쉽게 구현할 수 있도록 도와준다.
• 서버 사이드 렌더링은 클라이언트 사이드 렌더링(CSR)에 비해 SEO(검색 엔진 최적화)에 유리하고, 초기 로딩 시간을 줄이는 장점이 있다.

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

  return { props: { data } };
}

const Home = ({ data }) => {
  return <div>{JSON.stringify(data)}</div>;
};

export default Home;

 

 

Data Fetching: getServerSideProps | Next.js

 

정적 사이트 생성(SSG, Static Site Generation)

• Next.js는 정적 사이트 생성을 지원하여, 빌드 시점에 페이지를 미리 생성할 수 있다.
• 이는 성능을 극대화하고, SEO에 유리하다.

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

  return { props: { data } };
}

const Home = ({ data }) => {
  return <div>{JSON.stringify(data)}</div>;
};

export default Home;

 

 

Data Fetching: getStaticProps | Next.js

 

자동 코드 분할 및 최적화

• Next.js는 각 페이지별로 코드 분할을 자동으로 수행하여, 초기 로딩 속도를 향상시키고, 사용자가 필요한 부분만 로드하도록 최적화한다.
• 이를 통해 성능 향상과 효율적인 자원 사용이 가능하다.

파일 기반 라우팅

• Next.js는 파일 시스템을 기반으로 라우팅을 관리한다.
• 'pages' 디렉토리 안에 파일을 생성하면, 해당 파일명이 자동으로 라우트 된다.
• 이 라우팅 기법은 설정 없이도 직관적으로 라우트를 관리할 수 있게 도와준다.

API Routes

• Next.js는 서버리스 함수(Serverless Function)를 사용하여 API 라우트를 쉽게 만들 수 있다.
• 이를 통해 백엔드 로직을 쉽게 추가할 수 있다.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

 

이미지 최적화

• Next.js는 내장된 이미지 최적화 기능을 제공하여 자동으로 이미지 크기 조정, 포맷 변환, lazy loading 등을 지원한다.
• 이를 통해 이미지 로딩 시간을 줄이고, 페이지 성능을 향상시킨다.

 

요약

Next.js는 서버 사이드 렌더링, 정적 사이트 생성, 코드 분할, 파일 기반 라우팅 등 다양한 기능을 제공하여 개발자들이 더 쉽고 빠르게 고성능의 웹 애플리케이션을 개발할 수 있게 한다.

 

이러한 이유로 많은 개발자들이 Next.js를 선택하여 사용하고 있다.