티스토리 뷰

project/로컬 LLM + RAG 기반 AI 채팅봇 만들기

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js의 라우팅 시스템 개요

octo54 2025. 2. 27. 13:30

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.1 Next.js의 라우팅 시스템 개요

이번 글에서는 Next.js의 파일 기반 라우팅 시스템을 다룹니다.
✅ Next.js의 pages 및 app 디렉토리를 비교하고, 동적 라우팅과 중첩 라우팅을 설명합니다.

📌 1. Next.js의 파일 기반 라우팅 시스템

Next.js는 기존의 React Router와 달리, **파일 기반 라우팅 시스템(File-based Routing System)**을 사용합니다.
즉, 프로젝트의 pages 또는 app 디렉토리 내에 파일을 생성하면 자동으로 해당 경로에 맞는 페이지가 생성됩니다.

✅ 1.1 Next.js 라우팅 방식 비교

Next.js 13부터는 **새로운 App Router(app 디렉토리)**와 기존의 Page Router(pages 디렉토리)를 지원합니다.

라우팅 방식 특징 주요 기능

pages 디렉토리 (기존 방식)	파일 기반 라우팅 (pages/index.tsx → /)	getServerSideProps, getStaticProps 사용 가능
app 디렉토리 (새로운 방식)	서버 컴포넌트 기반 라우팅 (app/page.tsx → /)	metadata, layout.tsx 등을 활용 가능

📌 Next.js 13 이상에서는 app 디렉토리(App Router)를 사용하는 것이 권장됩니다.

📌 2. 기본적인 Next.js 라우팅 구조

✅ 2.1 정적 라우팅 (Static Routing)

라우팅은 프로젝트 디렉토리 내에 파일을 생성하는 것만으로 자동으로 설정됩니다.

📌 예제 – 정적 페이지 라우팅 (app 디렉토리 사용)

/app
 ├── page.tsx          (→ `/` 페이지)
 ├── about
 │   ├── page.tsx      (→ `/about` 페이지)
 ├── contact
 │   ├── page.tsx      (→ `/contact` 페이지)

📌 각 파일 내용 예시 (app/about/page.tsx)

export default function About() {
  return <h1>About 페이지</h1>;
}

✅ 파일을 생성하는 것만으로 자동으로 해당 페이지가 생성됩니다! 🚀

✅ 2.2 동적 라우팅 (Dynamic Routing)

경로에 변수를 넣어야 할 경우, 대괄호 [ ]를 사용하여 동적 라우팅을 생성할 수 있습니다.

📌 예제 – 동적 라우팅 (app/blog/[id]/page.tsx)

/app
 ├── blog
 │   ├── [id]
 │   │   ├── page.tsx   (→ `/blog/:id` 페이지)

📌 app/blog/[id]/page.tsx 파일 내용

export default function BlogPost({ params }: { params: { id: string } }) {
  return <h1>블로그 게시글 ID: {params.id}</h1>;
}

✅ 이제 /blog/123과 같은 URL로 접근하면 해당 ID 값을 받아서 처리할 수 있습니다! 🚀

✅ 2.3 중첩 라우팅 (Nested Routing)

Next.js는 디렉토리 구조를 활용하여 중첩 라우팅을 지원합니다.

📌 예제 – 중첩된 라우팅 (app/dashboard/settings/page.tsx)

/app
 ├── dashboard
 │   ├── page.tsx       (→ `/dashboard` 페이지)
 │   ├── settings
 │   │   ├── page.tsx   (→ `/dashboard/settings` 페이지)

📌 app/dashboard/settings/page.tsx 파일 내용

export default function Settings() {
  return <h1>대시보드 설정 페이지</h1>;
}

✅ 이제 /dashboard/settings 경로로 이동하면 설정 페이지가 표시됩니다!

📌 3. Next.js 라우팅 관련 추가 기능

✅ 3.1 layout.tsx를 활용한 공통 레이아웃 적용

Next.js의 app 디렉토리를 사용하면 layout.tsx를 활용하여 공통 레이아웃을 설정할 수 있습니다.

📌 예제 – app/layout.tsx 파일 추가

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <nav>공통 네비게이션</nav>
        {children}
        <footer>공통 푸터</footer>
      </body>
    </html>
  );
}

✅ 이제 모든 페이지에서 공통 레이아웃이 적용됩니다! 🚀

📌 4. 결론 및 다음 단계

✅ Next.js의 라우팅 시스템을 이해했습니다.
✅ 정적 라우팅, 동적 라우팅, 중첩 라우팅을 실습했습니다.
✅ 공통 레이아웃(layout.tsx)을 적용하는 방법을 배웠습니다.

🚀 다음 글에서는 "3.2.2 페이지 및 레이아웃 구성"을 진행합니다!

'project > 로컬 LLM + RAG 기반 AI 채팅봇 만들기' 카테고리의 다른 글

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.3 Next.js의 데이터 페칭 전략 (App Router 방식) (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 페이지 및 레이아웃 구성 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Tailwind CSS 및 UI 라이브러리 설정 (DaisyUI + ShadCN 반영) (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 프로젝트 설정 및 필수 패키지 설치 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js 개요 및 특징 (0)	2025.02.27

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

글 보관함

TwentyTwentyOne