Next.Js 파헤치기

Next.js 소개

Next.js는 React를 기반으로 한 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원하며, React 프로젝트의 효율성을 높이고 SEO 최적화를 가능하게 합니다. React와 다른 점을 포함해 Next.js의 특징과 설정 방법에 대해 알아보겠습니다.

---

React와 Next.js의 주요 차이점

항목 React Next.js

렌더링 방식	클라이언트 사이드 렌더링(CSR)	서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)
파일 기반 라우팅	개발자가 직접 라우팅 구현 필요	pages/ 폴더를 기반으로 자동 라우팅
SEO	CSR로 인해 초기 로딩 시 SEO에 제약	SSR/SSG 지원으로 SEO에 유리
빌드 도구	Vite, CRA(Create React App) 등 사용	Next.js 자체 빌드 도구 사용
이미지 최적화	별도의 라이브러리 필요	내장된 next/image 컴포넌트 제공
스타일링	자유도 높음	자유도는 높지만 CSS 모듈과 SCSS 기본 지원

---

기본 설정

1. Next.js 프로젝트 생성

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

위 명령어를 통해 Next.js 프로젝트를 생성하고 개발 서버를 실행할 수 있습니다. 기본적으로 pages/index.js 파일이 홈 페이지로 설정됩니다.

2. 폴더 구조

Next.js는 다음과 같은 기본 디렉토리 구조를 제공합니다:

• pages/: 각 파일이 자동으로 라우트로 매핑됩니다.
  • 예: pages/about.js → /about 경로
• public/: 정적 파일(이미지, 폰트 등)을 저장하는 폴더입니다.
• styles/: CSS 파일을 저장하는 기본 폴더입니다.
• next.config.js: Next.js 설정 파일입니다.

3. 주요 스크립트

• npm run dev: 개발 서버 실행
• npm run build: 프로덕션 빌드
• npm start: 프로덕션 서버 실행

---

주요 기능 및 알아둬야 할 정보

1. 파일 기반 라우팅

pages/ 폴더에 파일을 생성하면 자동으로 라우트가 설정됩니다.

• 동적 라우팅: [id].js와 같은 형식으로 동적 경로를 생성할 수 있습니다.

  export async function getServerSideProps(context) {
    const { id } = context.params;
    return { props: { id } };
  }
  

2. API 라우트

Next.js는 백엔드 API를 작성할 수 있는 기능을 제공합니다.

• pages/api/ 폴더에 파일을 생성하면 해당 파일이 API 엔드포인트로 동작합니다.

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

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

페이지 요청 시 서버에서 데이터를 가져와 렌더링합니다.

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Page({ data }) {
  return

{JSON.stringify(data)}

;
}

4. 정적 사이트 생성 (SSG)

빌드 시 데이터를 가져와 정적 HTML을 생성합니다.

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

export default function Page({ data }) {
  return

{JSON.stringify(data)}

;
}

5. 이미지 최적화

next/image 컴포넌트를 사용하여 이미지 최적화를 수행할 수 있습니다.

import Image from 'next/image';

export default function Home() {
  return <Image src="/example.jpg" alt="Example" width={500} height={500} />;
}

---

성능 최적화

1. 코드 분할: 자동으로 페이지 단위 코드 스플리팅이 이루어집니다.
2. 이미지 최적화: next/image로 이미지 크기를 조정 및 최적화합니다.
3. 빌드 시간 정적 생성: SSG를 사용하여 초기 로딩 속도를 높입니다.

---

결론

Next.js는 React 개발자에게 익숙하면서도 강력한 기능을 추가로 제공합니다. 특히 서버사이드 렌더링과 정적 사이트 생성을 활용하여 SEO와 초기 로딩 속도를 개선하고자 하는 프로젝트에 적합합니다. React로 단순한 SPA를 개발하는 것과 달리, Next.js는 더 많은 가능성을 제공합니다.