넥스트 Next.js
1. Next.js란? 기본 개념과 React와의 차이점 (Next.js 15 기준)
안녕하세요! 태마입니다.
Next.js 기초 강좌입니다.
강좌의 경우
1. 주제 간단 정리
2. 상세 주제 정리
으로 이루어져 있습니다.
넥스트 Next.js
포스팅 시작하겠습니다 :)
1. 주제 간단 정리
1. Next.js란?
Next.js는 React 기반의 풀스택 웹 프레임워크로, 서버 사이드 렌더링(SSR) 및 **정적 사이트 생성(SSG)**을 지원하여 웹 성능을 극대화할 수 있다.
Next.js 15에서는 더 향상된 서버 컴포넌트, 빠른 빌드 속도, Turbopack 최적화 등의 기능이 추가되며, 더욱 강력한 웹 애플리케이션 개발이 가능해졌다.
📌 Next.js 15의 주요 특징
✔ 서버 컴포넌트(Server Components) 기본 적용 → 클라이언트 컴포넌트와 효율적으로 조합 가능
✔ 서버 사이드 렌더링(SSR) & 정적 사이트 생성(SSG) → SEO 최적화, 빠른 로딩 속도 제공
✔ App Router 기본 적용 → 기존 Pages Router보다 유연하고 강력한 구조
✔ Turbopack 도입 → Webpack보다 10배 빠른 빌드 속도
✔ 이미지 최적화(next/image) 개선 → 더 빠른 이미지 로딩 제공
✔ 새로운 Suspense 기능 → 서버에서 비동기 데이터를 더욱 효과적으로 처리
📌 Next.js 15를 사용하면 웹 성능 최적화와 SEO 개선을 쉽게 할 수 있다!
2. Next.js와 React의 차이점
Next.js는 기본적으로 React를 기반으로 하지만, Next.js 15에서는 서버 렌더링(SSR), 서버 컴포넌트, API Routes 등의 기능을 추가적으로 제공하여 더욱 강력한 웹 개발이 가능하다.
✅ Next.js vs React 비교
구분React (CRA)Next.js 15
| 렌더링 방식 | CSR (클라이언트 사이드 렌더링) | SSR, SSG, ISR, RSC (서버 컴포넌트) |
| 라우팅 | react-router-dom 사용 | 파일 기반 라우팅 (App Router 기본) |
| SEO 지원 | 클라이언트 렌더링으로 SEO 최적화 어려움 | SSR 및 SSG 지원으로 SEO 최적화 가능 |
| 서버 기능 | 없음 | API Routes 지원 (서버리스 기능 포함) |
| 이미지 최적화 | 별도 라이브러리 필요 | next/image로 자동 최적화 |
| 빌드 속도 | Webpack 사용 (느림) | Turbopack 적용 (최대 10배 빠름) |
📌 Next.js 15에서는 React의 기능을 확장하여 더 나은 성능과 SEO를 제공한다!
✅ 여기까지 Next.js의 개념과 React와의 차이점을 배웠습니다!
👉 "그렇다면, Next.js 프로젝트를 처음부터 어떻게 시작할까?"
✅ 2부에서 Next.js 프로젝트 설정 및 기본 개발 환경을 구축하는 방법을 배워봅시다!
2. 상세 주제 정리
1. Next.js 15 설치 및 프로젝트 생성
Next.js는 npx, npm, yarn, pnpm 등을 이용해 간단하게 설치할 수 있다.
✅ 1) Next.js 15 설치 (npx 사용)
$ npx create-next-app@latest my-next-app
$ cd my-next-app
$ npm run dev📌 개발 서버 실행 후 http://localhost:3000에서 Next.js 애플리케이션 확인 가능!
✅ 2) Next.js 15 설치 (yarn 사용)
$ yarn create next-app my-next-app
$ cd my-next-app
$ yarn dev📌 yarn을 사용하는 경우에도 동일한 방식으로 설치 가능!
✅ 3) Next.js 15 설치 (pnpm 사용)
$ pnpm create next-app my-next-app
$ cd my-next-app
$ pnpm dev📌 빠른 속도의 패키지 매니저인 pnpm을 활용할 수도 있음!
2. Next.js 15 프로젝트 폴더 구조
Next.js 15 프로젝트를 생성하면 기본적으로 다음과 같은 폴더 구조가 생성된다.
my-next-app/
├── app/ # Next.js 15+ App Router (루트 디렉토리에 위치)
│ ├── layout.tsx # 공통 레이아웃 컴포넌트
│ ├── page.tsx # 홈 페이지 ("/" 경로)
│ ├── about/ # 서브 페이지 ("/about" 경로)
│ │ ├── page.tsx # "/about" 페이지
│ ├── api/ # API Routes ("/api" 경로)
│ ├── styles/ # 글로벌 스타일 파일
├── public/ # 정적 파일 (이미지, 아이콘, 폰트 등)
├── .next/ # Next.js 빌드 결과물 (자동 생성)
├── next.config.js # Next.js 설정 파일
├── package.json # 프로젝트 설정 및 의존성 관리
└── README.md # 프로젝트 설명 파일
📌 Next.js 15에서는 app/ 폴더를 루트 디렉토리에 배치하는 것이 표준!
📌 src/ 폴더를 따로 사용하지 않고, app/이 루트에 위치해야 한다!
✅ App Router와 기존 Pages Router 비교 (Next.js 15 기준)
구분Pages Router (Next.js 12 이하)App Router (Next.js 13+ 기본 적용)
| 기본 폴더 | pages/ 디렉토리 사용 | app/ 디렉토리 사용 |
| 라우팅 방식 | 파일 기반 (파일명 = 경로) | 서버 컴포넌트 기반 라우팅 |
| SSR 지원 방식 | getServerSideProps 사용 | 서버 컴포넌트 활용 |
| API Routes | pages/api/ 내부에 작성 | app/api/ 내부에 작성 |
📌 Next.js 15에서는 App Router가 기본 적용되며, 기존 Pages Router는 지원하지만 권장되지 않는다!
3. Next.js 15 기본 설정 및 첫 번째 페이지 만들기
✅ 1) 기본 페이지 생성 (app/page.tsx)
export default function Home() {
return (
<main>
<h1>🚀 Next.js 15에 오신 것을 환영합니다!</h1>
</main>
);
}📌 Next.js에서는 파일명이 자동으로 라우팅되므로 / 경로에서 접근 가능!
✅ 2) 개발 서버 실행
$ npm run dev📌 브라우저에서 http://localhost:3000에 접속하여 확인!
✅ 3) 동적 페이지 생성 (app/about/page.tsx)
export default function About() {
return (
<main>
<h1>📄 Next.js 15 About 페이지</h1>
</main>
);
}📌 브라우저에서 http://localhost:3000/about로 이동하면 해당 페이지가 렌더링됨!
✅ 여기까지 Next.js 15 기준의 프로젝트 설정 및 기본 개발 환경 구축 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서는 라우팅이 어떻게 동작할까?"
✅ 다음 회차에서 Next.js 15의 파일 기반 라우팅과 App Router 활용법을 배워봅시다!