[250307] Next.js , 프레임워크의 시작

🌟 Next.js의 첫 걸음 🚀

오늘은 Next.js에 대해 처음으로 공부했습니다!
Next.js는 React 기반의 프레임워크로, React의 기능을 확장하여 다음과 같은 강력한 기능을 제공합니다.

✔️ 파일 기반 라우팅 (File-based Routing)
✔️ SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성) 지원
✔️ CSR(클라이언트 사이드 렌더링) 지원
✔️ API 라우트 생성 가능
✔️ 자동 코드 분할 및 최적화
✔️ 이미지 최적화 (next/image) 지원

🔧 프로젝트 생성

Next.js 프로젝트는 다음 명령어로 간단하게 생성할 수 있습니다.

npx create-next-app@latest

🔗 라우팅

Next.js는 파일 기반 라우팅을 지원합니다.
React에서는 react-router-dom을 사용해 라우팅을 처리했지만, Next.js에서는 파일 생성만으로 라우팅이 완료됩니다.

✅ 기본 라우팅

1. /app 디렉토리에 해당 경로에 맞는 파일을 생성합니다.
2. 파일 이름은 page.tsx로 설정합니다.
3. Link 컴포넌트를 사용하면 라우팅이 완료됩니다.

// app/about/page.tsx
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <Link href="/">Go to Home</Link>
    </div>
  );
}

✅ 동적 라우팅

1. [id] 파일 이름을 사용하면 동적 라우팅이 가능합니다.
2. params에서 값 추출이 가능합니다.

// app/post/[id]/page.tsx
interface Props {
  params: {
    id: string;
  };
}

export default function Post({ params }: Props) {
  return <div>Post ID: {params.id}</div>;
}

🌐 렌더링 종류

Next.js에서는 데이터의 캐시 방식에 따라 다음과 같은 렌더링 방식을 지원합니다.

🚀 1. SSG (Static Site Generation)

• 서버에서 미리 HTML 생성 후 제공
• 빌드 시 값이 고정됨
• 캐싱 방식: force-cache

fetch("http://localhost:4000/posts", { cache: "force-cache" });

---

⚡ 2. SSR (Server Side Rendering)

• 매 페이지 요청 시 서버에서 새로 렌더링
• 최신 데이터 제공 가능
• 캐싱 방식: no-store

fetch("http://localhost:4000/posts", { cache: "no-store" });

---

🔄 3. ISR (Incremental Static Regeneration)

• 일정 시간 후 페이지를 다시 생성
• 최신 데이터를 일정 주기마다 반영 가능
• revalidate 옵션 사용

fetch("http://localhost:4000/posts", { next: { revalidate: 3 } });

---

🎯 4. CSR (Client Side Rendering)

• 클라이언트에서 렌더링 진행
• useEffect()에서 데이터 호출
• use client로 명시해야 함

"use client";
import { useEffect, useState } from 'react';
export default function ClientComponent() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("http://localhost:4000/posts")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);
  return <div>{JSON.stringify(data)}</div>;
}

---

🎯 마무리

Next.js는 React의 복잡한 라우팅 및 렌더링 설정을 간소화하고, 서버 사이드 렌더링 및 정적 사이트 생성을 효율적으로 처리할 수 있는 강력한 프레임워크입니다. 앞으로 Next.js의 다양한 기능을 더 깊이 파고들면서 프로젝트에 적용해 볼 예정입니다!