React가 UI 라이브러리라면, Next.js는 React 애플리케이션을 위한 프레임워크.
React 위에 실제 서비스 개발에 필요한 기능들을 올려주는 도구 모음이라 보면 됨.
라우팅, 렌더링, 데이터 패칭, SEO, 빌드 최적화 등
Next.js는 실전 웹 서비스를 만들기 위한 기능을 모두 포함하고 있음.
핵심 철학 5가지
1. 파일 기반 라우팅 (File-based Routing)
app/디렉토리 구조만으로 라우팅이 자동으로 구성됨- 폴더와 파일 이름이 URL 경로로 그대로 매핑됨
/app/profile/page.tsx → /profile
/app/blog/[slug]/page.tsx → /blog/:slug❗ 라우팅 설정을 따로 할 필요 없어 생산성이 높고, 유지보수가 쉬움
2. 서버 중심 렌더링과 React Server Component 지원
- React Server Component(RSC)를 기본으로 지원함
- 서버에서 HTML을 먼저 렌더링하고, 클라이언트는 필요한 부분만 hydration함
- 초기 로딩이 빠르고 SEO에도 유리함
❗ 서버에서 데이터 접근이 가능해 민감한 정보를 안전하게 다룰 수 있음
3. 서버와 클라이언트의 경계를 명확히 구분
- 기본은 서버 컴포넌트로 작동함
- 클라이언트에서만 필요한 기능(이벤트, 상태 등)은
use client선언을 통해 명확히 구분함
'use client'; // 이 파일은 클라이언트 컴포넌트로 동작함❗ 어떤 코드가 서버에서 실행되는지, 클라이언트에서 실행되는지를 명확하게 알 수 있어 성능과 구조 모두에 유리함
4. 유연한 데이터 페칭 전략 (Fetch Anywhere)
- Next.js 15 app 라우터에서는 서버와 클라이언트 컴포넌트 각각에서 데이터 패칭 방식이 다름
- 서버 컴포넌트에서는
async함수 안에서fetch()를 직접 호출할 수 있음 - 클라이언트 컴포넌트에서는 기존 React 방식대로
useEffect, SWR, React Query 등과 함께 사용 가능 - 폼 제출이나 특정 액션은 Server Actions로 처리할 수 있음. 별도 API 라우트를 만들 필요 없음
// 서버 컴포넌트 내부 예시
export async function generateMetadata() {
const res = await fetch('https://api.example.com/data', {
next: { revalidate: 60 }, // 캐싱 전략 지정
});
const data = await res.json();
return { title: data.title };
}❗ app 라우터에서는
getServerSideProps,getStaticProps는 사용하지 않음
❗ fetch에next: { revalidate },cache: 'no-store'등을 조합하여
SSR, SSG, ISR 같은 전략을 코드 위치와 상황에 따라 유연하게 구성할 수 있음
5. 개발자 경험(Developer Experience, DX)에 집중
- TypeScript, ESLint, Hot Reloading, 디렉토리 기반 설계가 모두 기본 제공됨
app/,layout.tsx,template.tsx등으로 아키텍처를 명확하게 구성할 수 있음- 코드 스플리팅, 번들 최적화, 이미지 최적화도 자동 처리됨
❗ 프로젝트 초기부터 규모가 커질 때까지, 개발자 경험을 고려한 구조 제공
Next.js는 프레임워크
React는 UI(View)를 위한 라이브러리.
Next.js는 라우팅, 서버 렌더링, 데이터 패칭, 빌드 최적화까지 포함하는 프레임워크.
즉, React 애플리케이션을 실전 수준의 웹 서비스로 확장하기 위한 도구 모음
기록하자