Yoo HeehyeonYoo Heehyeon

1. Next.js란?

Next.js는 React를 기반으로 만든 풀스택 웹 프레임워크다. React가 UI를 구성하는 라이브러리라면, Next.js는 그 위에 라우팅, 렌더링 전략, 빌드 도구, 서버 기능까지 얹어서 실제 서비스를 만들기 쉽게 해주는 틀에 가깝다.

1.1. 주요 특징

Next.js를 많이 쓰는 이유는 프론트엔드와 서버 기능을 한 프레임 안에서 묶어주기 때문이다.

• 하이브리드 렌더링:
  • SSR: 요청이 올 때마다 서버에서 HTML을 생성한다. 최신 데이터가 필요한 화면에 맞다.
  • SSG: 빌드 시점에 HTML을 미리 만든다. 문서나 블로그처럼 변경이 적은 페이지에 유리하다.
  • CSR: 브라우저에서 자바스크립트로 렌더링한다. 상호작용이 많은 화면에 적합하다.
• App Router와 RSC:
  • RSC: 서버에서 컴포넌트를 렌더링해 클라이언트로 보내므로 번들 크기를 줄이고 데이터 처리 효율을 높인다.
  • 파일 시스템 기반 라우팅: app 폴더 구조가 그대로 URL 경로가 된다.
• TypeScript 지원:
  • tsconfig.json 같은 초기 설정을 자동으로 잡아준다.
  • API 라우트와 데이터 페칭 코드에서 타입 안정성을 확보하기 쉽다.
• 이미지 최적화:
  • next/image가 디바이스 크기에 맞는 이미지를 자동으로 서빙해 로딩 성능을 개선한다.

1.2. 시스템 요구사항

Next.js 14~15 기준으로는 아래 환경을 맞춰두는 편이 안전하다.

• Node.js: 18.17 이상
• OS: macOS, Windows(WSL2 권장), Linux

2. 프로젝트 생성(자동 설치)

create-next-app을 쓰면 프로젝트 뼈대를 빠르게 만들 수 있다.

npx create-next-app@latest

명령을 실행하면 아래 같은 초기 설정 질문이 순서대로 나온다.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes

• App Router: 최신 Next.js의 기본 흐름이라서 Yes를 권장한다.
• TypeScript: 유지보수성과 안정성을 생각하면 Yes가 편하다.
• Tailwind CSS: 팀 스타일에 따라 다르지만, 빠르게 시작하려면 Yes도 괜찮다.

3. 프로젝트 구조(App Router 기준)

설치가 끝나면 기본 구조는 대체로 아래처럼 생성된다.

my-app/
├── app/                  # 핵심 라우트 및 페이지 파일
│   ├── layout.tsx        # 전체 레이아웃(Root Layout)
│   ├── page.tsx          # 메인 페이지(/)
│   ├── globals.css       # 전역 스타일
├── public/               # 정적 파일(이미지, 폰트 등)
├── next.config.js        # Next.js 설정 파일
├── package.json          # 의존성 및 스크립트 관리
├── tsconfig.json         # 타입스크립트 설정

4. 개발 서버 실행

프로젝트 디렉터리로 이동한 뒤 개발 서버를 실행하면 된다.

cd my-app
npm run dev

서버가 뜨면 http://localhost:3000에서 결과를 확인할 수 있다. app/page.tsx를 수정하면 Fast Refresh로 브라우저에 바로 반영된다.