Next.js

쉽게 말하면

Next.js는 React 위에 만들어진 "풀스택 프레임워크"예요. React가 주는 건 화면 컴포넌트뿐인데, Next.js는 거기에 완성된 웹사이트에 필요한 것을 한 벌로 내장합니다. 라우팅, 서버 사이드 렌더링(SSR), 정적 내보내기(SSG), API 라우트까지 상자에서 꺼내자마자 쓸 수 있는 상태예요.

가장 큰 가치 중 하나가 SEO에 강하다는 점이에요. 서버에서 미리, 또는 빌드 시점에 HTML을 만들어 둘 수 있어 검색 엔진이 쉽게 크롤링합니다. 이 사이트 자체도 Next.js의 정적 내보내기 모드를 써서 Cloudflare Pages에 배포했어요. React 생태계로 진짜 사이트를 만든다면, Next.js는 거의 기본 선택지예요.

아키텍처

동작 흐름

SSR이냐 SSG냐: 무엇을 고를까

Next.js는 페이지를 두 가지 방식으로 만들 수 있고, 선택은 결국 한 가지 질문으로 좁혀져요. 모두가 같은 페이지를 보느냐, 아니면 방문자마다 다른 걸 보느냐.

• SSG(정적) — 페이지를 미리 한 번만 만들어, 모두에게 같은 HTML을 제공합니다. 콘텐츠와 마케팅 페이지, 문서, 블로그(이 사이트처럼)에 가장 잘 맞아요.
• SSR(서버 렌더링) — 요청할 때마다 페이지를 새로 만듭니다. 로그인 후 대시보드나 실시간 시세처럼 HTML을 사람마다, 또는 초 단위로 최신으로 맞춰야 할 때 고릅니다.

쓸모 있는 원칙: 일단 SSG로 시작하고, "이 페이지는 모두에게 같을 수 없다"는 진짜 이유를 찾았을 때만 그 페이지를 SSR로 바꾸세요.

핵심 정리

• Next.js = React의 풀스택 프레임워크. 상자에서 꺼내자마자 쓸 수 있음.
• SSR / SSG를 내장하고 SEO에 강함 — 이 사이트도 이걸 씀.
• 배울 개념은 많지만, 생태계와 AI 지원이 강력함.