🚀 React 6단계: Next.js 같은 프레임워크 활용하기

✅ 1️⃣ Next.js란 무엇인가?
✅ 2️⃣ Next.js 설치 및 기본 설정
✅ 3️⃣ Next.js 주요 기능 및 사용법
✅ 4️⃣ 실전 프로젝트: Next.js로 블로그 만들기
✅ 5️⃣ Next.js의 장점과 React 대비 차이점

---

1️⃣ Next.js란 무엇인가?

🔹 Next.js 개요

• Next.js는 React 기반의 프레임워크로 서버 사이드 렌더링(SSR) 및 **정적 사이트 생성(SSG)**을 지원해.
• SEO 최적화와 빠른 페이지 로딩 속도를 제공하며, 풀스택 개발에도 사용 가능!
• Vercel에서 개발 및 유지보수 중이며, React 팀과 긴밀하게 협력하여 최신 기능을 빠르게 적용함.

🔹 Next.js가 React보다 유리한 이유

✅ 서버 사이드 렌더링 (SSR) → 페이지가 서버에서 렌더링되어 SEO에 유리
✅ 정적 사이트 생성 (SSG) → 빌드 시 HTML을 생성하여 초고속 로딩
✅ 파일 기반 라우팅 → 디렉토리 구조만으로 자동으로 페이지 생성
✅ API Routes → Next.js 내부에서 백엔드 API를 쉽게 작성 가능

🔥 Next.js는 React의 확장판으로, React에 익숙하다면 배우기 쉽게 할 수 있음

---

2️⃣ Next.js 설치 및 기본 설정

🔹 설치 및 프로젝트 생성

📌 터미널에서 실행

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

 

• npx create-next-app@latest: Next.js 최신 버전으로 프로젝트 생성
• npm run dev: 개발 서버 실행 (http://localhost:3000)

---

🔹 디렉토리 구조 설명

my-next-app/
├── pages/        # 라우팅을 담당하는 페이지 디렉토리
│   ├── index.js  # 기본 홈 페이지
│   └── about.js  # /about 경로로 접근 가능
├── public/       # 정적 파일 (이미지, 폰트 등)
└── styles/       # CSS 및 스타일 관련 파일

 

✅ Next.js는 pages 디렉토리 내부의 파일명이 URL 경로가 됨

---

🔹 첫 번째 페이지 만들기 (pages/about.js)

📌 코드 (pages/about.js)

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my Next.js app!</p>
    </div>
  );
}

• pages/about.js 파일을 생성하면 /about 경로에서 페이지를 확인할 수 있음
• 파일 이름 = URL 경로이기 때문에 React Router 설정이 필요 없음!

---

3️⃣ Next.js 주요 기능 및 사용법

🔹 1. 파일 기반 라우팅 (File-based Routing)

• Next.js는 파일 이름을 URL로 자동 매핑
• React Router를 사용할 필요 없이, pages 폴더 구조만으로 라우팅이 자동 설정

📌 예시 디렉토리 구조

pages/
├── index.js      # 홈 페이지 (/)  
└── blog/
    ├── index.js  # 블로그 목록 페이지 (/blog)  
    └── [id].js   # 동적 라우팅 (/blog/[id])

 

• pages/blog/index.js → /blog URL로 매핑
• pages/blog/[id].js → /blog/1, /blog/2 등 동적 라우팅

---

🔹 2. 동적 라우팅 (Dynamic Routing)

📌 코드 (pages/blog/[id].js)

import { useRouter } from "next/router";

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>블로그 포스트 {id}</h1>
      <p>블로그 포스트 내용...</p>
    </div>
  );
}

 

✅ URL에서 파라미터를 가져와서 동적으로 페이지를 렌더링

• /blog/1 → id: 1
• /blog/2 → id: 2

---

🔹 3. 서버 사이드 렌더링 (Server Side Rendering, SSR)

• Next.js는 getServerSideProps 함수를 사용하여 서버 측에서 데이터를 가져와 페이지를 렌더링
• 실시간 데이터가 필요한 페이지에 적합

📌 예제 코드 (pages/products/[id].js)

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://fakestoreapi.com/products/${id}`);
  const product = await res.json();

  return { props: { product } };
}

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
      <p>가격: ${product.price}</p>
    </div>
  );
}

✅ 서버에서 데이터를 가져와 페이지에 바로 전달! SEO에도 유리!

---

🔹 4. 정적 사이트 생성 (Static Site Generation, SSG)

• **getStaticProps**로 빌드 시에 데이터를 가져와 정적 HTML 생성
• 정적인 콘텐츠를 빠르게 제공할 때 사용

📌 예제 코드 (pages/products/index.js)

export async function getStaticProps() {
  const res = await fetch("https://fakestoreapi.com/products");
  const products = await res.json();

  return { props: { products } };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>상품 목록</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    </div>
  );
}

✅ 정적 사이트 생성은 속도가 매우 빠르고 SEO에 최적화됨!

---

4️⃣ 실전 프로젝트: Next.js로 블로그 만들기

📌 프로젝트 기능

✅ 메인 페이지 (index.js) → 블로그 포스트 목록 표시
✅ 포스트 상세 페이지 ([id].js) → 포스트 내용 표시 (SSR 활용)
✅ 글 작성 페이지 (create.js) → API Routes로 백엔드 연동

---

5️⃣ Next.js의 장점과 React 대비 차이점

🔹 Next.js의 장점

✅ SEO 최적화 → 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원
✅ 페이지 로딩 속도 향상 → 정적 사이트 생성(SSG) 및 하이브리드 렌더링
✅ 파일 기반 라우팅 → pages 디렉토리 구조만으로 라우팅 설정
✅ API Routes → 백엔드 서버 없이 API 생성 가능

🔹 React 대비 차이점

구분ReactNext.js

라우팅	react-router-dom 필요	파일 기반 라우팅 (자동)
SEO	클라이언트 사이드 렌더링	서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG)
데이터 페칭	useEffect	getStaticProps, getServerSideProps
프로젝트 유형	SPA (Single Page Application)	SSR, SSG, CSR 혼합 가능 (다양한 SEO 전략)

---

🎯 마무리: Next.js로 React의 한계를 넘어서기

🔥 Next.js는 React를 확장하여 SEO, 성능, 백엔드 연동까지 해결해주는 강력한 프레임워크!
✅ React에 익숙하다면 Next.js는 배우기 쉬우며, 생산성이 크게 향상됨!
✅ 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 적극 활용해보자!

🚀 이제 Next.js를 활용한 실전 프로젝트를 만들어보자!