티스토리 뷰

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

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 페이지 및 레이아웃 구성

octo54 2025. 2. 27. 14:03

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 페이지 및 레이아웃 구성

이번 글에서는 Next.js에서 페이지를 구성하는 방법과 layout.tsx를 활용한 공통 레이아웃 적용 방법을 다룹니다.
✅ SEO 최적화를 위한 metadata 설정과 함께, layout.tsx를 사용하여 재사용 가능한 레이아웃을 구성합니다.

📌 1. Next.js에서 페이지 구성하기

Next.js는 파일 기반 라우팅 시스템을 사용하여 페이지를 자동으로 생성합니다.
✅ app 디렉토리 내에 각각의 페이지 파일을 추가하면 해당 경로로 자동 매핑됩니다.

✅ 1.1 기본적인 페이지 구성

📌 예제 – 페이지 구조 (app 디렉토리 사용)

/app
 ├── layout.tsx       (공통 레이아웃)
 ├── page.tsx         (메인 페이지 `/`)
 ├── about
 │   ├── page.tsx     (About 페이지 `/about`)
 ├── contact
 │   ├── page.tsx     (Contact 페이지 `/contact`)

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

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

✅ 이제 /about 경로로 이동하면 해당 페이지가 자동으로 렌더링됩니다! 🚀

📌 2. layout.tsx를 활용한 공통 레이아웃 구성

Next.js의 app 디렉토리를 사용하면 layout.tsx를 활용하여 공통 레이아웃을 설정할 수 있습니다.
✅ 이 방식은 헤더, 푸터, 네비게이션 바와 같은 공통 UI 요소를 한 곳에서 관리할 수 있어 유지보수가 용이합니다.

✅ 2.1 layout.tsx 파일 생성 및 설정

📌 파일 구조 (app/layout.tsx 추가)

/app
 ├── layout.tsx   (공통 레이아웃 파일)
 ├── page.tsx     (메인 페이지)
 ├── about
 │   ├── page.tsx
 ├── contact
 │   ├── page.tsx

📌 app/layout.tsx 파일 내용

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header className="bg-blue-600 text-white p-4">
          <h1>FastAPI 기반 로컬 LLM + RAG 챗봇</h1>
        </header>
        <main className="p-6">{children}</main>
        <footer className="bg-gray-800 text-white text-center p-4">
          &copy; 2025 RAG 챗봇 프로젝트
        </footer>
      </body>
    </html>
  );
}

✅ 이제 모든 페이지에서 header, footer가 자동으로 포함됩니다! 🚀

📌 3. metadata를 활용한 SEO 최적화

Next.js에서는 metadata 객체를 활용하여 SEO(검색 엔진 최적화)를 강화할 수 있습니다.
✅ 각 페이지의 page.tsx에서 metadata를 설정하면 검색 엔진 크롤러가 페이지 정보를 쉽게 인식할 수 있습니다.

✅ 3.1 기본적인 metadata 설정

📌 app/about/page.tsx 파일 수정

export const metadata = {
  title: "About - FastAPI 기반 로컬 LLM + RAG 챗봇",
  description: "FastAPI, Next.js, PostgreSQL 기반의 RAG 챗봇 프로젝트의 소개 페이지",
};

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

✅ 이제 /about 페이지에 접속하면, SEO 최적화된 메타 데이터가 자동으로 설정됩니다!

✅ 3.2 layout.tsx에서 글로벌 metadata 설정

📌 app/layout.tsx 파일 수정

export const metadata = {
  title: "FastAPI 기반 로컬 LLM + RAG 챗봇",
  description: "FastAPI, Next.js, PostgreSQL 및 pgvector를 활용한 RAG 챗봇 프로젝트",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header className="bg-blue-600 text-white p-4">
          <h1>FastAPI 기반 로컬 LLM + RAG 챗봇</h1>
        </header>
        <main className="p-6">{children}</main>
        <footer className="bg-gray-800 text-white text-center p-4">
          &copy; 2025 RAG 챗봇 프로젝트
        </footer>
      </body>
    </html>
  );
}

✅ 이제 모든 페이지에 글로벌 metadata가 적용됩니다! 🚀

📌 4. Tailwind CSS 및 UI 라이브러리 적용

✅ 4.1 Tailwind CSS 활용

Tailwind CSS를 사용하여 페이지를 꾸밀 수 있습니다.

📌 예제 – Tailwind CSS 적용 (app/contact/page.tsx)

export default function Contact() {
  return (
    <div className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-lg">
      <h1 className="text-3xl font-bold text-blue-600">Contact Us</h1>
      <p className="text-gray-700 mt-2">문의사항이 있다면 언제든지 연락하세요!</p>
      <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">
        문의하기
      </button>
    </div>
  );
}

✅ Tailwind CSS를 활용하여 손쉽게 반응형 UI를 구성할 수 있습니다! 🚀

📌 5. 프로젝트 실행 및 확인

✅ 5.1 개발 서버 실행

아래 명령어를 실행하여 Next.js 프로젝트를 실행합니다.

npm run dev

✅ http://localhost:3000에서 Tailwind CSS와 SEO가 적용된 페이지를 확인할 수 있습니다!

📌 6. 결론 및 다음 단계

✅ Next.js에서 layout.tsx를 활용하여 공통 레이아웃을 설정했습니다.
✅ SEO 최적화를 위해 metadata를 활용하였습니다.
✅ Tailwind CSS를 사용하여 페이지 스타일을 꾸몄습니다.

🚀 다음 글에서는 "3.2.3 Next.js의 데이터 페칭 전략"을 진행합니다!

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

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js에서의 상태 관리 개요 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.3 Next.js의 데이터 페칭 전략 (App Router 방식) (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js의 라우팅 시스템 개요 (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Tailwind CSS 및 UI 라이브러리 설정 (DaisyUI + ShadCN 반영) (0)	2025.02.27
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 프로젝트 설정 및 필수 패키지 설치 (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

티스토리 뷰