Next.js 프로젝트 구조와 구성

Next.js는 개발자들이 효율적으로 작업할 수 있도록 폴더와 파일 구조에 명확한 규칙을 제공합니다.
덕분에 프로젝트 규모가 커져도 체계적인 코드 관리가 가능하죠.

---

✅ 기본 폴더 구조

예를 들어:

• app 폴더
  • 파일 기반 라우팅
  • 폴더/파일 이름이 URL 경로가 됨
  • ex) app/about/page.tsx → /about 라우트 생성
• public 폴더
  • 정적 파일(이미지, 폰트, favicon 등) 관리
  • public 폴더 안의 파일은 URL로 접근 가능
    • 예) /public/images/logo.png → /images/logo.png
• components 폴더
  • UI 컴포넌트 모아두는 폴더
  • 재사용성과 유지보수에 유리

---

✅ 라우트(Route)란?

라우트(Route) = 웹 애플리케이션에서 특정 리소스에 접근하기 위한 경로나 주소

• /about → About 페이지
• /blog/123 → 블로그 글 상세 페이지

---

✅ 세그먼트(Segment)란?

URL 경로에서 슬래시(/)로 구분되는 각각의 부분

예) /blog/posts/123 경로에서

• blog → 세그먼트
• posts → 세그먼트
• 123 → 세그먼트
• 루트 세그먼트
  • 웹사이트의 시작점
  • 경로: /
• 리프 세그먼트
  • URL 경로의 마지막 부분
  • 예) /blog/posts/123 → 123이 리프 세그먼트

---

✅ 페이지 간 링크 연결

Next.js에서 라우트 간 이동은 <Link> 컴포넌트로 처리합니다.
HTML의 <a> 태그와 비슷하지만, 추가 기능이 있습니다:

✅ <Link>의 특징

• 클라이언트 사이드 내비게이션
  • 전체 페이지 새로고침 없이 화면만 바뀜
• Prefetching
  • 사용자가 클릭하기 전에 필요한 페이지 데이터를 미리 로드
  • UX가 매우 빨라짐

---

✅ 사용 예시

예) 블로그 포스트 목록 만들기

// app/blog/page.tsx

import Link from "next/link";

export default function BlogPage() {
  const posts = [
    { id: 1, title: "Next.js 라우팅 이해하기" },
    { id: 2, title: "Next.js API Routes 완전정복" },
  ];

  return (
    <div>
      <h1>블로그 목록</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.id}`}>
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

---

✅ 결과

위 코드를 실행하면 /blog 페이지에서:

• “Next.js 라우팅 이해하기” 클릭 → /blog/1로 이동
• “Next.js API Routes 완전정복” 클릭 → /blog/2로 이동

모두 새로고침 없이 부드럽게 이동합니다.

---

✅ 한 줄 요약

Next.js는 폴더 구조 기반 라우팅 + 클라이언트 내비게이션으로
웹앱 개발을 쉽고 빠르게 만들어줍니다!