Next.js 란?

1. Next.js 란

React의 기능을 확장한 프레임워크로 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성) 같은 기능을 기본적으로 제공하며, SEO와 성능 최적화에 강점을 가지고 있다.

 

1-1. 서버 사이드 렌더링(SSR)

• 서버에서 HTML을 생성하며 클라이언트에 전달한다.
• 초기 렌더링 속도가 빠르고, SEO에 최적화되어 검색 엔진에 유리하다.
• 페이지 요청 시 데이터를 즉시 가져와서 렌더링한다.

 

1-2. 정적 사이트 생성(SSG)

• 빌드 시 HTML 파일을 생성하므로 빠른 로드 속도를 제공한다.
• 자주 바뀌지 않는 컨텐츠에 적합하며,사용자가 빠르게 접근할 수 있다.
• 데이터는 빌드 시점에 고정된다

 

1-3. 파일 기반 라우팅

• pages 디렉터리 안의 파일 이름이 자동으로 URL 경로가 된다.
• 별도의 라우터 설정 없이 동적 라우팅과 정적 라우팅이 가능하다.

예)

• pages/index.js -> /
• pages/about.js -> /about
• pages/blog/[id].js -> /blog/:id

 

1-4. 클라이언트 사이드 렌더링

• 일부 페이지는 클라이언트에서 데이터를 가져와 렌더링한다.
• 사용자가 인터랙션을 수행한느 SPA(Single Page Application) 기능도 가능

 

1-5. API 라우트 지원

• pages/api 디렉터리에서 간단한 API 엔드포인트를 생성할 수 있다.
• 서버리스(Serverless) 함수처럼 작동하며, 별도의 백엔드 설정이 필요없다.

 

1-6. 이미지 최적화

• next/image 를 사용해 이미지 크기, 포맷 등을 자동으로 최적화한다.
• Lazy Loading을 기본 제공하여 성능이 뛰어나다.
  • Lazy Loading: 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼모선스를 최적하는 기술이다.
  • 최초 페이지 로딩 시간을 개선하고, 최초 데이터 전달 양을 감소시키는 것이다.

 

1-7. CSS와 스타일링 지원

• CSS Modules: 로컬 스타일 스코핑이 가능
• Styled JSX: JSX 안에서 스타일링 가능
• Tailwind CSS, Sass, Styled-components 등 CSS 라이브러리와 호환

 

1-8. TypeScript 지원

• TypeScript를 기본적으로 지원하여 정적 타입 검사가 가능
• 타입 안정성을 높이고 코드 유지 보수가 용이하다.

 

1-9. ISR(Incremental Static Regeneration)

• SSG의 확장 기능으로, 빌드 후 특정 간격마다 페이지를 다시 생성한다.
• 실시간 데이터를 정적으로 제공할 수 있다.

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

  return {
    props: { data },
    revalidate: 10, // 10초마다 새 데이터를 생성
  };
}

 

2. Next.js의 장점

• SEO 최적화: SSR/SSG로 검색 엔진 친화적
• 빠른 속도: 이미지 최적화, 정적 빌드
• 개발 생산성 향상: 파일 기반 라우팅, API 라우트, 스타일링 옵션 다양하다.
• 유연성: CSR, SSR, SSG 모두 지원한다.

 

3. Next.js의 단점

• 초기 학습 곡선이 있다.
• 서버리스 API 라우트는 복잡한 백엔드에 적합하지 않을수도 있다.
• 빌드 시간이 많은 데이터가 있을 경우 길어진다.