Next.js / React

Next.js란?

Next.js는 React 기반의 오픈 소스 웹 프레임워크로, Vercel에서 개발 및 유지보수하고 있습니다.

Next.js를 사용하면 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트와 같은 기능을 손쉽게 구현할 수 있어 웹 개발자들에게 많은 사랑을 받고 있습니다. 

Next.js의 주요 특징

1. 파일 기반 라우팅

Next.js는 폴더와 파일 구조만으로도 URL 라우팅을 자동으로 생성합니다.

예를 들어, pages 폴더 아래에 파일을 추가하면 해당 파일명이 URL 경로가 됩니다.

/pages
  /index.tsx      → "http://localhost:3000/"
  /about.tsx      → "http://localhost:3000/about"
  /blog/post.tsx  → "http://localhost:3000/blog/post"

 

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

SSR(Server-Side Rendering)은 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식입니다.

이를 통해 초기 로딩 속도가 빨라지고 SEO 성능이 향상됩니다.

Next.js에서는 SSR을 다음과 같이 간단히 설정할 수 있습니다.

import { GetServerSideProps } from 'next';

type Props = {
  data: string;
};

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  return {
    props: { data: "서버에서 가져온 데이터" },
  };
};

export default function Page({ data }: Props) {
  return <div>{data}</div>;
}

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

SSG(Static Site Generation)는 빌드 시점에 HTML 파일을 생성하여 빠르게 제공하는 방식입니다.

SEO에 유리하고 페이지 로딩 속도도 빠릅니다.

import { GetStaticProps } from 'next';

type Props = {
  data: string;
};

export const getStaticProps: GetStaticProps<Props> = async () => {
  return {
    props: { data: "정적 데이터" },
  };
};

export default function Page({ data }: Props) {
  return <div>{data}</div>;
}

4. 클라이언트 사이드 렌더링 (CSR)

CSR(Client-Side Rendering)은 브라우저에서 JavaScript로 데이터를 받아 HTML을 렌더링하는 방식입니다.

Next.js에서는 필요에 따라 CSR도 지원합니다. 예를 들어, React의 useEffect를 사용하여 데이터를 로드할 수 있습니다.

import { useEffect, useState } from 'react';

type Data = {
  message: string;
};

export default function Page() {
  const [data, setData] = useState<Data | null>(null);

  useEffect(() => {
    fetch('/api/hello')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data ? data.message : '로딩 중...'}</div>;
}

5. API 라우트

Next.js는 백엔드 서버 없이도 API를 쉽게 생성할 수 있는 기능을 제공합니다.

pages/api 폴더 아래 파일을 생성하면 자동으로 API 라우트가 생성됩니다.

// pages/api/hello.ts
import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ message: "Hello, API!" });
}

API 라우트를 사용하면 간단한 CRUD 기능도 구현할 수 있습니다.

 

---

Next.js 시작하기

1. 프로젝트 생성

Next.js 프로젝트를 생성하려면 다음 명령어를 실행하세요

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

위 명령어를 실행하면 TypeScript 설정이 포함된 Next.js 프로젝트가 생성됩니다.

2. 폴더 구조 이해

my-next-app/
  ├── pages/        → 라우팅 및 페이지 파일 저장
  ├── public/       → 정적 파일 (이미지, 폰트 등) 저장
  ├── styles/       → CSS 및 스타일 관련 파일
  ├── components/   → 재사용 가능한 컴포넌트 저장
  ├── tsconfig.json → TypeScript 설정 파일
  └── next.config.js → Next.js 설정 파일

3. 기본 설정

pages/index.tsx 파일을 열어 간단한 내용을 추가해 보세요:

export default function Home() {
  return <h1>Next.js로 시작하기</h1>;
}

브라우저에서 http://localhost:3000에 접속하면 위 내용이 표시됩니다.

 

Next.js의 장점

• SEO 최적화: SSR과 SSG를 통해 검색 엔진이 읽기 쉬운 HTML을 제공합니다.
• 빠른 개발 환경: 파일 기반 라우팅, HMR(Hot Module Replacement) 등으로 생산성이 높아집니다.
• 유연성: 페이지별로 SSR, SSG, CSR 중 원하는 방식을 선택할 수 있습니다.
• 백엔드 기능 포함: API 라우트를 통해 간단한 서버 기능도 구현 가능합니다.