Next.js 기초

 Next.js

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 등 다양한 기능을 제공한다.

• 주요 특징  서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 지원
•  파일 기반 라우팅 (React Router 필요 없음)
• SEO 최적화 (검색 엔진이 페이지를 쉽게 인덱싱 가능)
•  API 라우트 제공 (백엔드 없이 간단한 서버 로직 구현 가능)
•  이미지 최적화, 코드 스플리팅, 빠른 성능 제공

React로 프로젝트를 만들면 일반적으로 클라이언트 사이드 렌더링(CSR) 방식이 사용한다. 하지만 CSR 방식은 SEO가 약하고, 초기 로딩 속도가 느리다는 단점이 있다.

Next.js는 이런 문제를 해결하기 위해 SSR(Server Side Rendering)과 SSG(Static Site Generation)을 지원한다.
즉, 페이지를 미리 생성하여 사용자 경험을 더 향상시키고, 검색 엔진에서 잘 노출되도록 한다.

✔ 검색 엔진 최적화(SEO) 가능
✔ 초기 로딩 속도 향상
✔ 코드 관리가 쉬워짐

 

---

App Router, Pages Router 비교

Next.js에는 두 가지 라우팅 방식이 있다

구분App Router (app/)Pages Router (pages/)

도입 시기	Next.js 13부터 도입 (새로운 방식)	Next.js 초기 버전부터 존재
라우팅 방식	서버 컴포넌트 기반 라우팅 (app/ 폴더)	기존 pages/ 폴더 기반 라우팅
서버 컴포넌트	기본적으로 서버에서 실행	클라이언트 컴포넌트가 기본
데이터 패칭	fetch()를 직접 사용하면 서버에서 실행됨	getServerSideProps, getStaticProps 사용
SEO 최적화	서버에서 처리	지원하지만 방식이 다름
파일명 방식	page.tsx, layout.tsx 사용	index.tsx, about.tsx 등

 

• app/ 폴더를 사용하면 더 직관적인 서버 렌더링 방식을 사용가능
• 기존 pages/ 방식은 익숙한 React 방식과 비슷하지만, 새로운 기능이 부족
• Next.js 13 이후부터는 app/ 폴더 사용이 권장

 

---

파일 기반 라우팅

React에서는 react-router-dom을 사용해서 라우트를 직접 정의해야 하지만, Next.js에서는 폴더와 파일 구조만으로 자동으로 라우트가 설정.

 

• / → app/page.tsx
• /about → app/about/page.tsx
• /about/team → app/about/team/page.tsx
• /blog/:id → app/blog/[id]/page.tsx (동적 라우트)