[Nextjs] 1장 Next.js란?

✅ 1. NextJS란

Next.js란 React 기반의 풀스택 웹 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트(SSG)를 비롯한 라우팅, API 서버 기능을 지원하는 언어입니다. Next.js의 특징으로는 다음과 같습니다

• 특징
  
  • 서버사이드 렌더링(SSR): React 앱을 서버에 먼저 렌더링해 HTML을 클라이언트에 보내줌 -> 초기 로딩속도 향상 +  SEO(검색엔진 최적화)에 유리
  • 정적 사이트 생성(SSG): 빌드 시 HTML을 미리 생성 -> CDN에 올려두면 빠른 페이지 로딩이 가능
  • 하이브리드 렌더링: 페이지별로 SSR,SSG,CSR(클라이언트 사이드 렌더링) 선택 가능
  • 파일 기반 라우팅: /pages 폴더에 파일을 생성 시 자동으로 라우팅 처리
  • API Routes: pages/api 폴더 안에 JS/TS 파일 생성 시 서버 API로 동작
  • 이미지 최적화: /next/image로 자동 이미지 최적화
  • Hot Reload: 저장 시 자동으로 새로고침 없이 변경사항을 반영
  • TypeScript 지원: 기본적인 TS 환경 설정이 쉬움

---

✅ 2. 장점과 단점

• 🚀 장점
  
  • SEO에 친화적인 언어: SSR과 SSG 덕분에 검색엔진이 콘텐츠를 바로 읽음
  • 초기 로딩이 빠름: 서버에서 HTML을 먼저 렌더링해줌
  • 개발 편의성: 라우팅, API 서버, 이미지 최적화 등 기본적으로 제공되는 것이 많음
  • 유연성: 페이지마다 렌더링 방식 선택 가능
  • Vercel 최적화: Vercel에서 배포 시 속도와 빌드 최적화가 뛰어남
• 🚀 단점
  • 서버 비용 증가: SSR 요청마다 렌더링이 필요하며 이에 따른 서버 비용 증가 가능성
  • 복잡성 증가: CSR만 쓰는 SPA(Single Page Application) 보다는 구조가 복잡함
  • 런타임 의존성: SSR 환경에서 브라우저 전용 API 사용 제한
  • 빌드 시간 증가: SSG에서 페이지 수가 많으면 빌드 시간이 그만큼 길어짐

---

✅ 3. NextJS를 사용하는 프로젝트

• Vercel 홈페이지(Next.js 개발)
• TikTok 웹 페이지
• Notion 공식 블로그
• Hulu
• GitHub Copilot Docs

---

✅ 4. Next.js 설치하기

• NodeJS 설치
  
  • 먼저 NextJS를 사용하려면 Node.js 공식 홈페이지에가서 NodeJS를 설치합니다.
• 터미널에서 다음 명령어로 Next.js 프로젝트 생성

# Next.js 공식 CLI
npx create-next-app@latest next-bloging

# Typescript로 개발시
npx create-next-app@latest next-bloging --typescript

• 실행

cd next-bloging
npm dev
# yarn 사용시
yarn dev
# 또는 
pnpm dev

 

실행 후 브라우저에 http://localhost:3000에 접속하면 기본 페이지를 확인 할 수 있습니다

---

 

GitHub - Koras02/nextjs-bloging: https://thinky.tistory.com/category/Front-End/NextJs