📌
웹을 위한 React 프레임워크인 Next.js는 고품질 웹 어플리케이션을 만들 수 있도록 도와줍니다.
◼ 고품질(High-Quality)
1. 성능(Performance)
- 서버 사이드 렌더링 (SSR)과 정적 사이트 생성 (SSG) 기능을 제공하여 초기 로드 시간을 단축합니다.
- 코드 스플리팅 및 이미지 최적화와 같은 기능을 통해 런타임 성능을 향상시킵니다.
2. SEO(Search Engine Optimization)
- 서버 사이드 렌더링을 통해 웹페이지의 콘텐츠가 초기 로드 시 완전히 렌더링되므로 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있습니다.
- 정적 사이트 생성을 통해 미리 생성된 HTML 파일을 제공하여 SEO 성능을 극대화합니다.
3. 개발자 경험(Developer Experience)
- 자동 코드 분할 (Automatic Code Splitting), 핫 리로딩 (Hot Reloading), 타입스크립트 지원 등의 기능을 통해 개발자의 생산성을 높입니다.
- API 라우트 기능으로 백엔드와의 통합이 쉬우며, 환경 설정이 적은(configuration-less) 개발 환경을 제공합니다.
4. 확장성(Scalability)
- 서버리스 함수와 데이터 페칭 기능을 활용해 유연한 확장성을 제공합니다.
5. 유연성(Flexibility)
- React와 완전히 호환되며, 다양한 툴 및 라이브러리와 함께 사용할 수 있습니다.
◼ Next.js를 사용하는 이유
1. 환경 설정이 적은 (Configuration-less) 개발 환경
- 개발에만 집중할 수 있도록 프레임워크로서의 역할을 충실히 수행합니다.
- Next.js는 웹 개발에 필요한 거의 모든 기능을 기본적으로 제공하여 개발자의 편의를 도모합니다.
2. 유용한 기법 제공
렌더링 방식(Rendering)
기존의 SPA 라이브러리에서 사용하던 CSR 방식뿐만 아니라 SSR, ISR, SSG와 같은 다양한 렌더링 방식을 제공합니다.
코드 스플리팅(Code splitting)
Next.js는 기본적으로 코드 스플리팅을 지원하므로, React에 비해 초기 웹 페이지 로딩 속도가 빠릅니다.
- 웹 페이지 로딩 시간이 오래 걸리는 이유
- 일반적인 웹사이트는 전체 코드를 한 번에 다운로드하므로 방문하지 않는 페이지까지 모두 다운로드해야 하며, 이로 인해 시간이 오래 걸립니다.
- 사용자가 첫 번째 화면(View)을 보는데 시간이 걸립니다.
- Next.js의 코드 스플리팅
- 각 컴포넌트를 별도의 JavaScript 번들로 분리하여, 사용자가 방문한 페이지에 필요한 부분만 로드하고 나머지 부분은 필요에 따라 로드됩니다.
- 프레임워크인 Next.js는 이러한 작업을 자동으로 처리하므로, 개발자는 애플리케이션 구조 설계와 비즈니스 로직 구현에 집중할 수 있습니다.
- 이로 인해 TTV(Time To View)가 향상되고, 특정 페이지에 오류가 있어도 나머지 페이지는 정상 작동합니다.
TTV란?
TTV는 Time To View의 약자로, 사용자가 첫 번째 화면을 볼 수 있을 때까지 걸리는 시간을 의미합니다. TTV가 짧을수록 사용자가 더 빠르게 콘텐츠에 접근할 수 있으며, 이는 사용자 만족도와 서비스 품질에 직접적인 영향을 미칩니다.
3. 쉬운 서버 로직 개발
API Route,server action등을 지원하여 간단한 서버 개발이 가능합니다.- 그러나 몇 가지 한계점이 존재합니다:
- 복잡한 백엔드 로직(예: WebSocket, WebRTC 등)은 구현이 어렵습니다.
- 프론트엔드와 백엔드 로직이 서로 종속되어 있어, 백엔드 로직만 수정해야 할 경우 프론트엔드도 함께 배포해야 합니다.
- 프론트엔드 서버의 부하가 증가할 수 있습니다.
WebSocket, WebRTC란
WebSocket과 WebRTC는 실시간 통신을 위한 기술로, 채팅, 화상 회의, 파일 공유 등에 사용됩니다. 이 기술들은 HTTP와 비교했을 때 매우 효율적인 실시간 통신을 제공합니다.
4. 매우 쉬운 배포
- Next.js는 Vercel에서 만든 프레임워크로, 배포가 매우 간단합니다.
- Full Stack 애플리케이션 배포 프로세스:
- 기존의 방법:
- 프론트엔드 : Vercel
- 백엔드 : AWS EC2
- Next.js 사용 시 : Vercel로 일괄 배포가 가능합니다.
◼ 시작하기
// 설치
npx create-next-app@latest// 설정
- Ok to proceed? : Y
- TypeScript : Y
- ESLint : Y
- Tailwind CSS : Y
- `/src` directory : Y
- App Router : Y
- import alias : N