[이제와서 시작하는 React 마스터하기 #16] Next.js 맛보기

React Day 16 - React를 더 쉽고 강력하게 만들어주는 Next.js를 소개해요! SEO가 필요한 웹사이트를 만든다면 꼭 알아두세요.

오늘 배울 내용

• ✅ Next.js가 뭔가요?
• ✅ 왜 사용하나요?
• ✅ 간단한 예제 맛보기
• ✅ 다음 학습 방향

---

Next.js가 뭔가요?

Next.js는 React로 웹사이트를 더 쉽게 만들 수 있게 해주는 프레임워크예요.

일상 비유 🏗️

집을 지을 때:

React = 벽돌과 시멘트

• 집을 지을 수 있는 재료
• 하지만 설계도, 배관, 전기는 직접 해야 해요

Next.js = 조립식 주택 키트

• 벽돌과 시멘트(React)는 기본 포함
• 설계도, 배관, 전기까지 준비되어 있어요
• 빠르게 튼튼한 집을 지을 수 있어요!

---

React vs Next.js

React만 사용할 때

// 라우팅? React Router 설치
// SEO? 복잡한 설정 필요
// 이미지 최적화? 직접 구현
// API? 별도 서버 필요

function App() {
  return <div>안녕하세요!</div>;
}

문제점:

• 검색엔진이 내 사이트를 잘 못 찾아요 (SEO 문제)
• 초기 로딩이 느려요
• 설정할 게 너무 많아요

Next.js 사용할 때

// 라우팅? 폴더만 만들면 끝!
// SEO? 자동으로 최적화!
// 이미지? <Image> 컴포넌트 사용!
// API? pages/api 폴더에 작성!

export default function Home() {
  return <div>안녕하세요!</div>;
}

장점:

• 검색엔진이 내 사이트를 잘 찾아요
• 빠른 초기 로딩
• 설정이 거의 필요 없어요

---

왜 Next.js를 사용하나요?

1. SEO가 좋아요 (검색 최적화)

SEO는 구글에서 내 사이트를 잘 찾을 수 있게 하는 거예요.

// 일반 React: 구글이 내용을 못 봐요 😢
<div id="root"></div>
// → 빈 페이지로 보임!

// Next.js: 구글이 모든 내용을 봐요 ✨
<div>
  <h1>내 블로그</h1>
  <p>React를 배우는 블로그입니다</p>
</div>
// → 구글이 제대로 인식!

언제 중요한가요?

• 블로그, 뉴스 사이트: SEO 필수!
• 쇼핑몰: 상품이 검색되어야 해요
• 회사 홈페이지: 고객이 찾을 수 있어야 해요

2. 빠른 초기 로딩

일반 React:
브라우저 → JavaScript 다운로드 → 실행 → 화면 보임 (느림 🐢)

Next.js:
서버 → 완성된 HTML 전송 → 화면 바로 보임 (빠름 🚀)

3. 파일 기반 라우팅

폴더 구조가 곧 URL이에요!

pages/
├── index.js          → /          (홈페이지)
├── about.js          → /about     (소개 페이지)
└── blog/
    ├── index.js      → /blog      (블로그 목록)
    └── post-1.js     → /blog/post-1

React Router처럼 복잡한 설정이 필요 없어요!

---

Next.js 간단 예제

설치하기

# Next.js 프로젝트 만들기
npx create-next-app@latest my-blog
cd my-blog
npm run dev

브라우저에서 http://localhost:3000 접속!

예제 1: 간단한 홈페이지

// pages/index.js
export default function Home() {
  return (
    <div style=>
      <h1>🎉 내 첫 Next.js 사이트!</h1>
      <p>React보다 쉽죠?</p>
    </div>
  );
}

파일 하나로 끝! 설정 필요 없어요.

예제 2: 페이지 추가하기

// pages/about.js
export default function About() {
  return (
    <div style=>
      <h1>소개</h1>
      <p>Next.js로 만든 웹사이트입니다</p>
    </div>
  );
}

/about로 접속하면 이 페이지가 나와요!

예제 3: 페이지 간 이동

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>홈페이지</h1>

      {/* Next.js의 Link 컴포넌트 */}
      <Link href="/about">
        소개 페이지로 가기
      </Link>

      <Link href="/blog">
        블로그 보기
      </Link>
    </div>
  );
}

Link 컴포넌트 장점:

• 페이지를 미리 로드해요 (빠름!)
• 전체 새로고침 없이 이동해요

예제 4: 이미지 최적화

// pages/index.js
import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>내 프로필</h1>

      {/* Next.js의 Image 컴포넌트 */}
      <Image
        src="/profile.jpg"
        alt="프로필 사진"
        width={300}
        height={300}
      />
    </div>
  );
}

Image 컴포넌트 장점:

• 자동으로 이미지를 최적화해요
• 화면 크기에 맞게 조절해요
• 느린 인터넷에서도 빠르게 로드돼요

---

언제 Next.js를 배워야 하나요?

🟢 지금 당장 배우면 좋은 경우

• 블로그나 뉴스 사이트를 만들고 싶어요
• 쇼핑몰이나 회사 홈페이지를 만들어요
• SEO(검색 최적화)가 중요해요
• 실무 프로젝트를 준비해요

🟡 나중에 배워도 되는 경우

• React 기초가 아직 부족해요
• 관리자 페이지처럼 로그인 후에만 쓰는 사이트 (SEO 불필요)
• 개인 연습용 작은 프로젝트

결론:

• SEO 필요 → Next.js 사용!
• SEO 불필요 → React만으로도 충분해요!

---

Next.js vs Create React App

기능	Create React App	Next.js
SEO	❌ 어려움	✅ 자동 지원
초기 로딩	느림	빠름
라우팅	React Router 설치 필요	파일 기반 (자동)
이미지 최적화	직접 구현	자동
API 만들기	별도 서버 필요	pages/api 사용
배우기	쉬움	조금 어려움
적합한 프로젝트	개인 프로젝트, 연습	실무, SEO 필요한 사이트

---

실무에서는 어떻게 쓰나요?

많이 만드는 프로젝트

1. 블로그 - 검색이 잘 되어야 해요
2. 쇼핑몰 - 상품이 구글에 노출되어야 해요
3. 회사 홈페이지 - 고객이 찾을 수 있어야 해요
4. 뉴스 사이트 - 기사가 검색되어야 해요

유명한 Next.js 사이트들

• Vercel (Next.js 만든 회사의 홈페이지)
• Netflix Jobs (넷플릭스 채용 사이트)
• TikTok (일부 페이지)
• Twitch (일부 페이지)

---

정리

Next.js란?

• React를 더 쉽고 강력하게 만들어주는 프레임워크
• SEO와 성능이 자동으로 최적화돼요
• 실무에서 많이 사용해요

장점

✅ SEO 자동 최적화 (검색 잘 됨) ✅ 빠른 초기 로딩 ✅ 파일 기반 라우팅 (쉬움) ✅ 이미지 자동 최적화 ✅ API도 만들 수 있어요

단점

❌ React보다 배울 게 조금 더 많아요 ❌ 서버가 필요해요 (Vercel은 무료!) ❌ SEO가 필요 없으면 오버스펙

---

다음 학습 로드맵

Next.js를 더 배우고 싶다면?

1단계: 기본 기능

• 파일 기반 라우팅 (pages 폴더)
• Link와 Image 컴포넌트
• CSS 스타일링

2단계: 데이터 가져오기

• getStaticProps (정적 생성)
• getServerSideProps (서버 사이드 렌더링)
• API Routes

3단계: 실전 프로젝트

• 블로그 만들기
• 마크다운 글 작성
• Vercel에 배포하기

추천 학습 자료

📚 공식 문서:

• Next.js 공식 문서
• Next.js Learn - 무료 튜토리얼!

🎥 온라인 강의:

• “Next.js 블로그 만들기” 유튜브 검색
• Vercel의 공식 튜토리얼 영상

💻 실습:

• Next.js 예제 모음
• Vercel에 무료로 배포해보기

---

다음 포스트 예고

다음 시간에는 React 테스팅을 가볍게 소개할게요!

테스트 코드를 작성하면 버그를 미리 잡을 수 있고, 코드 수정할 때 걱정이 줄어들어요. 실무에서 필수인 기술이에요!

“늦었다고 생각할 때가 가장 빠를 때입니다. Next.js로 SEO 완벽한 사이트 만들어보세요! 🚀”

---

React 완벽 가이드 시리즈

1. React란 무엇인가?
2. 첫 React 앱 만들기
3. useState - 클릭하면 바뀌는 화면
4. Props - 컴포넌트끼리 대화하기
5. useEffect - 컴포넌트 생명주기
6. 조건부/리스트 렌더링
7. Context API - Props 지옥에서 탈출하기
8. Custom Hooks 만들기
9. React Router 완벽 가이드
10. 폼 처리와 유효성 검증
11. React 성능 최적화
12. 에러 바운더리와 Suspense
13. 상태 관리 라이브러리
14. 서버 상태 관리
15. React와 TypeScript 맛보기
16. Next.js 맛보기 ← 현재 글
17. React 테스팅 입문
18. 고급 패턴 소개
19. 실전 프로젝트 아이디어
20. React 배포하기

---

관련 자료

• Next.js 공식 문서
• Next.js Learn 튜토리얼
• Vercel 배포 가이드