❓ Next.js란?
Next.js는 React 기반의 풀스택 웹 프레임워크입니다.
Next.js 주요 특징으로는
- SSR (Server Side Rendering)
- SSG (Static Site Generation)
- 파일 기반 라우팅
- API Routes
- 이미지 최적화
- 자동 코드 분할
이 있습니다.
💡 React와 Next.js 차이점
| 구분 | React | Next.js |
|---|---|---|
| 성격 | UI 라이브러리 | React 기반 프레임워크 |
| 라우팅 | React Router 필요 | 파일 기반 자동 라우팅 |
| 렌더링 | CSR | CSR + SSR + SSG |
| SEO | 불리 | SEO 친화적 |
| 백엔드 기능 | 없음 | API Routes 제공 |
핵심 차이
React는 UI를 만들기 위한 라이브러리이고
Next.js는 React로 웹 서비스를 만들기 위한 프레임워크입니다.
🔍 Next.js 설치 방법
Next.js 프로젝트는 다음 명령어로 생성할 수 있습니다.
npm create next-app@latest
설치 후 프로젝트 폴더로 이동합니다.
개발 서버를 실행하고 브라우저에서
으로 접속하면 Next.js 프로젝트가 실행됩니다.
⚙️ Next.js 기본 폴더 구조
Next.js 프로젝트의 기본 구조는 다음과 같습니다.
my-next-app
│
├ app
│ ├ layout.tsx
│ └ page.tsx
│
├ public
│
├ node_modules
│
├ package.json
└ next.config.js- app : 페이지와 라우팅을 담당하는 폴더입니다.
- public : 이미지, 폰트 같은 정적 파일을 저장하는 폴더입니다.
- layout.tsx : 모든 페이지에 공통으로 적용되는 레이아웃 파일입니다.
- page.tsx : 각 페이지의 실제 화면을 구성하는 컴포넌트입니다.
Next.js 코드 시작 위치
React 프로젝트에서는 보통 index.js 또는 App.js에서 시작합니다.
하지만 Next.js에서는 app/page.tsx 가 홈페이지의 시작점입니다.
page.tsx는 메인 페이지 ( / ) 에 렌더링됩니다.
📄 Next.js 라우팅 방식
Next.js는 파일 기반 라우팅을 사용합니다.
예를 들어 app/about/page.tsx 파일을 만들면 /about url이 자동 생성됩니다.
React에서 사용하듯이 라우팅을 위해 React Router를 설치할 필요가 없습니다.
Next.js 컴포넌트 폴더 구조
Next.js는 컴포넌트 폴더 위치가 정해져 있지 않습니다.
하지만 보통 다음과 같은 구조를 많이 사용합니다.
src
├ app
│ ├ page.tsx
│ └ about
│ └ page.tsx
│
├ components
│ ├ Header.tsx
│ ├ Footer.tsx
│ └ Button.tsx
│
├ styles
│
└ utils
...
Frontend Developer