왜 Next일까?
일단 Next가 뭔지 알아보자!
Next.js란?
React 기반의 웹 프레임워크다! React에 없는 기능들을 보완해주고, 프론트엔드부터 백엔드까지 한 프로젝트 안에서 다룰 수 있는 풀스택 프레임워크다!
파일 기반 라우팅 (File-based Routing)
React에서는 react-router-dom을 써서 직접 라우팅을 설정해야 하지만, Next.js는 디렉토리 구조만으로 라우팅을 자동화한다!
pages/ 디렉토리나 app/ 디렉토리에 파일을 만들면 자동으로 URL 라우트가 생성된다.
pages/blog.tsx → /blog서버 사이드 렌더링(SSR)과 정적 생성(SSG)
getServerSideProps() → 요청마다 HTML을 서버에서 생성 (SSR)
getStaticProps() → 빌드 타임에 HTML을 미리 만들어둠 (SSG)
ISR(Incremental Static Regeneration) 지원 → SSG지만 정기적으로 재생성 가능!
React는 기본적으로 클라이언트 렌더링(CSR)만 지원하기 때문에 SEO에 약하다.
반면 Next.js는 상황에 따라 SSR/SSG/CSR을 조합할 수 있어 유연하다!
API Routes
pages/api/hello.ts처럼 API를 만들 수 있다!
별도 백엔드 없이, Next.js 안에서 바로 작성 가능하다.
이미지 최적화
next/image 컴포넌트를 쓰면 자동으로 사이즈 조절, 웹 최적화, lazy loading 등 제공
App Router
app/ 디렉토리 기반으로 구성: 레이아웃 중첩, 서버 전용 컴포넌트, 로딩 처리 등 더 유연하게 가능
Middleware (미들웨어)
페이지가 뜨기 전에 사용자의 요청을 먼저보고
보안, 리다이렉트, 조건 검사 같은 작업을 처리할 수 있게 해준다.
풀스택 지원 (서버 액션 & 데이터베이스 연결)
server actions: 폼 처리나 서버 코드를 백엔드 없이 쓸 수 있게 해줌. 함수에 use server만 붙이면 자동으로 서버에서 실행된다.
Edge Functions: 지리적으로 가까운 서버(엣지)에서 코드가 실행되도록 해주는 서버리스 함수
서버리스 환경?
서버를 직접 운영하지 않아도 코드만 올리면 자동으로 실행해주는 환경
서버를 따로 구축하거나 관리할 필요 없이 Next.js + Vercel 같이 서버리스 플랫폼 위에 코드를 올리면 끝!
Why Next?
왜 나는 Next로 기술 블로그를 만들기로 했는가
Next.js는 App Router 기반의 아키텍처를 제공하며, SSR, CSR, SSG 등을 통합적으로 지원한다. 기술 블로그라는 주제로서 페이지 생성과 데이터 관리, 렌더링 방식 등 프론트엔드 개발의 핵심 흐름을 모두 실습해볼 수 있을 것!
SEO 친화적인 SSR 기술 적용
기술 블로그 같은 문서 서비스는 초기 로딩 속도와 검색 최적화(SEO)가 중요하다. Next.js는 페이지를 서버에서 미리 렌더링할 수 있어 검색엔진에 유리하며, 이는 블로그 포스트 노출에 직접적인 영향을 준다.
엄청나게 유명한 블로거가 될건 아니지만 장점이라면 장점 아닐까 ㅎ
확장성과 실용성
블로그는 CRUD(글 생성, 조회, 수정, 삭제), 라우팅, 마크다운 렌더링, 에디터 등이 필요하다.Next.js 14은 서버 액션, 서버 컴포넌트 등 기능으로 이것들의 구현을 간단하게 가능하게 한다.
배포
Next.js는 Vercel을 통해 무료 배포가 쉽고 빠르며, 실제 서비스처럼 운영할 수 있다.
