[Next.js] Next.js란? 기본 파일 구조와 라우팅, 렌더링

1. Next.js란?

📌 React (UI 라이브러리)

• React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
• 라이브러리는 내가 사용하는 도구
  원하는 폴더 구조, 함수 방식, 객체 방식 등 내 마음대로 개발할 수 있음
• React 자체는 UI를 컴포넌트화해서 만들 수 있도록 도와줄 뿐,
  라우팅이나 데이터 처리, SSR 기능은 직접 구현

📌 Next.js (프레임워크)

• Next.js는 React를 기반으로 만들어진 프레임워크
• 프레임워크는 반대로 내 코드를 호출하는 주체
  내가 코드를 작성하면, Next.js가 적절한 타이밍에 그 코드를 찾아서 실행
• 따라서 정해진 폴더 구조, 파일 이름, 컴포넌트 위치를 따라야 합니다.
• 예: app/page.tsx는 반드시 그 이름 그대로 위치해야 Next.js가 인식

1.2 왜 Next.js를 써?

• SEO가 필요할 때
• 페이지 전환이 빠르고 자연스럽게 하고 싶을 때
• 프로젝트를 빠르게 배포하고 싶을 때
• React보다 구조적으로 안정된 방식으로 프로젝트를 만들고 싶을 때

2. 폴더 구조 이해

app/about/page.tsx → /about
app/blog/[slug]/page.tsx → /blog/123

 

• 폴더 = 경로
• page.tsx = 해당 경로의 진입 컴포넌트
• layout.tsx = 해당 경로 및 자식 경로에 적용되는 공통 레이아웃(헤더, 푸터, 사이드바)
• not-found.tsx = 존재하지 않는 경로에 접근했을 때 보여줄 페이지
• [slug]: URL 파라미터, 예: /blog/my-post

 

🔧 기본 구조 예시

/app
 └── page.tsx          → 해당 경로의 페이지 (기본 진입점)
 └── layout.tsx        → 하위 모든 페이지에 공통 적용되는 레이아웃
 └── loading.tsx       → 페이지 로딩 중 보여줄 UI
 └── error.tsx         → 에러 발생 시 보여줄 UI
 └── /about/page.tsx   → /about 경로의 페이지
 └── /blog/[slug]/page.tsx → /blog/hello 같은 동적 경로

 

3. 라우팅 (Routing)

- 자동 라우팅이란?

• React에서는 react-router-dom 같은 라이브러리를 따로 써야 했지만,
• Next.js는 폴더 구조만 잘 짜면 자동으로 URL 경로가 만들어짐

/app/page.tsx        → 도메인 루트 경로 `/`
/app/about/page.tsx  → `/about`
/app/blog/page.tsx   → `/blog`

 

- 동적 라우팅

/app/blog/[slug]/page.tsx → /blog/hello, /blog/post-1, 등

파일명에 [] 대괄호를 쓰면 변수처럼 동작

 

4. 렌더링 방식 (CSR / SSR / SSG / ISR)

용어	의미	예시
CSR (Client Side Rendering)	브라우저에서 JS로 그리는 방식	React 기본 방식
SSR (Server Side Rendering)	요청할 때마다 서버에서 HTML 생성	실시간 뉴스, 로그인
SSG (Static Site Generation)	빌드할 때 미리 HTML 생성	블로그, 문서 페이지
ISR (Incremental Static Regeneration)	SSG + 주기적 재생성	빠르면서도 업데이트가 필요한 사이트

// SSG (기본)
export const dynamic = 'force-static'

// SSR
export const dynamic = 'force-dynamic'

// ISR
export const revalidate = 60 // 60초마다 새로고침

 

5. 서버 컴포넌트 vs 클라이언트 컴포넌트

구분	특징	언제 사용?
Server Component	기본값, 서버에서 렌더링, 빠름	데이터 fetch, 무거운 연산
Client Component	use client 선언 필수	상태 관리, 클릭 이벤트, useState, useEffect 사용할 때

// 클라이언트 컴포넌트 예시
'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

 

 

🔗 페이지 이동과 경로 정보

▶️ 페이지 이동

import Link from 'next/link' <Link href="/about">About 페이지로 이동</Link>

📍 현재 경로 확인

'use client' 
import { usePathname } from 'next/navigation' 
const pathname = usePathname() 
console.log(pathname) // 현재 경로 출력

 

⚠️ 이 Hook은 클라이언트 컴포넌트에서만 사용 가능하므로 use client 선언이 필수