frontend

⚙️ Next.js로 웹사이트 만드는 과정 한눈에 보기

mirabo01 2025. 11. 4. 09:03

“React는 배웠는데, 요즘 다들 Next.js로 넘어간다던데… 왜일까?”
React를 배우다 보면 반드시 마주치는 이름이 바로 Next.js다.
React로도 웹사이트를 만들 수 있는데,
굳이 Next.js를 써야 하는 이유는 뭘까?

이번 글에서는 Next.js의 개념, 구조, 장점, 그리고 실제 프로젝트 구축 흐름을
입문자 눈높이에서 차근차근 정리했다.

#Nextjs기초 #Nextjs공부법 #프론트엔드개발

💡 1. Next.js란?

“React를 더 빠르고 효율적으로 사용할 수 있게 만든 프레임워크”

React는 화면을 구성하는 라이브러리지만,
Next.js는 전체 웹사이트를 완성할 수 있는 프레임워크다.

React만으로는 라우팅(페이지 이동), SEO, 서버 통신 등을 직접 구현해야 하지만,
Next.js는 이런 기능들이 이미 내장되어 있다.

즉,

“React로 만든 웹사이트를 실제 서비스 수준으로 끌어올려주는 도구”

🧱 2. React와 Next.js의 차이

비교 항목 React Next.js

역할 UI 라이브러리 웹 프레임워크
렌더링 방식 CSR (Client Side Rendering) SSR / SSG / ISR 지원
라우팅 직접 구현 필요 자동 라우팅 시스템
SEO (검색 노출) 약함 강함
초기 로딩 속도 느림 빠름
설정 수동 세팅 필요 대부분 자동 구성

💡 한 줄 요약

React는 “프론트엔드 화면 제작용”,
Next.js는 “실제 서비스 운영용”이다.

🌍 3. 렌더링 방식 3가지 이해하기

Next.js가 강력한 이유는 다양한 렌더링 옵션을 제공하기 때문이다.

🔹 1) CSR (Client Side Rendering)

React의 기본 방식
모든 렌더링이 브라우저에서 이루어짐
➡ 첫 화면이 늦게 뜰 수 있음

🔹 2) SSR (Server Side Rendering)

서버에서 HTML을 먼저 만들어 전송
➡ 초기 로딩 빠름, SEO에 유리

🔹 3) SSG / ISR (Static Site Generation / Incremental Static Regeneration)

페이지를 미리 생성해두고, 일정 주기로 갱신
➡ 블로그, 뉴스, 쇼핑몰 등 대규모 페이지에 적합

📘 예시

  • CSR → SPA(단일 페이지 앱)
  • SSR → 로그인 페이지, 검색엔진 노출용 페이지
  • ISR → 블로그, 상품 상세 페이지

📂 4. Next.js 기본 폴더 구조

Next.js는 폴더 구조 자체가 라우팅 규칙이다.

📦 my-next-app
 ┣ 📁 app/ (또는 pages/)
 ┃ ┣ 📄 page.tsx     → 메인 페이지
 ┃ ┣ 📄 about/page.tsx  → /about 경로
 ┣ 📁 components/   → 재사용 컴포넌트
 ┣ 📁 public/       → 이미지, 정적 파일
 ┣ 📁 styles/       → CSS, Tailwind 설정
 ┣ 📄 next.config.js → 환경설정
 ┗ 📄 package.json

💡 폴더 이름이 곧 URL 경로다!
예: /about/page.tsx → https://example.com/about

⚙️ 5. Next.js 설치 및 실행 방법

# 1. 프로젝트 생성
npx create-next-app my-next-app

# 2. 폴더 이동
cd my-next-app

# 3. 개발 서버 실행
npm run dev

✅ 브라우저에서 http://localhost:3000
→ 기본 페이지가 뜨면 성공!

🧩 6. 컴포넌트 예시 (App Router 기준)

// app/page.tsx
export default function Home() {
  return (
    <main className="flex flex-col items-center mt-10">
      <h1 className="text-3xl font-bold">Hello Next.js 👋</h1>
      <p className="text-gray-600 mt-2">Next.js는 React보다 빠르고 똑똑합니다.</p>
    </main>
  );
}

💬 App Router에서는 더 이상 import React from 'react'를 작성하지 않아도 된다.
TypeScript, TailwindCSS, Server Component 등이 기본 지원된다.

🌐 7. API Route (백엔드 기능 내장)

Next.js는 프론트엔드이지만,
간단한 API 서버 기능도 함께 제공한다.

// app/api/hello/route.ts
export async function GET() {
  return Response.json({ message: "Hello Next.js API!" });
}

➡ /api/hello로 접속하면
{ "message": "Hello Next.js API!" }가 반환된다.

💡 즉, 간단한 서버 로직은 Next.js 안에서 바로 구현 가능하다.

🔍 8. SEO(검색엔진 최적화)에 강한 이유

React의 단점은 “빈 HTML”로 시작한다는 점이다.
검색엔진이 읽을 내용이 없으니 SEO가 약하다.

하지만 Next.js는 SSR/SSG를 통해 미리 렌더링된 HTML을 제공한다.

즉, 구글·네이버 크롤러가 콘텐츠를 바로 읽을 수 있다.

export const metadata = {
  title: "기범의 개발 블로그",
  description: "Next.js로 만든 블로그 예시입니다.",
};

💡 이런 메타데이터는 자동으로 <head>에 삽입되어
검색 노출에 큰 도움이 된다.

🧠 9. Next.js에서 자주 쓰는 핵심 기능 5가지

기능 설명

App Router 폴더 기반 라우팅 (Next.js 13 이후)
Layout.tsx 페이지 간 공통 레이아웃 구성
Server Component 서버에서 렌더링되는 컴포넌트
Static Generation 정적 HTML 미리 생성
Dynamic Route [id].tsx 형태로 동적 URL 생성

💬 이 기능들을 이해하면, Next.js 프로젝트 구조가 완벽히 잡힌다.

🚀 10. Next.js 프로젝트 학습 로드맵

  1. React 기초 문법 복습
    (컴포넌트, Props, useState, useEffect)
  2. Next.js 설치 및 기본 페이지 구성
  3. 라우팅 & Layout.tsx 구조 이해
  4. 서버 컴포넌트 / 클라이언트 컴포넌트 구분
  5. API Route로 데이터 통신 연습
  6. ISR로 블로그 게시글 캐싱 구현
  7. Vercel로 무료 배포

💡 하루 2시간씩 투자하면,
일주일 만에 개인 포트폴리오 사이트 완성 가능하다.

🏁 마무리 — “Next.js는 React의 완성형이다”

React가 웹 개발의 뼈대라면,
Next.js는 그 위에 살을 입힌 실무형 프레임워크다.

  • SEO까지 고려한 프로덕션급 환경
  • 페이지, 서버, API까지 통합된 구조
  • 빠른 빌드 속도와 자동 최적화

💬 “Next.js를 이해하는 순간, 프론트엔드의 시야가 넓어진다.”

이제 npx create-next-app을 실행해보자.
그 한 줄이 당신의 프론트엔드 커리어를 한 단계 끌어올릴 것이다.