Next.js 오프라인 템플릿¶
에어갭(폐쇄망) 환경에서 웹 애플리케이션 개발을 빠르게 시작할 수 있도록 설계된 Next.js + shadcn/ui 기반의 프로젝트 템플릿입니다.
주요 특징
- 완전한 오프라인 환경 지원: 외부 CDN(Google Fonts 등) 의존성 제거 및 로컬 리소스 사용
- 풍부한 UI 컴포넌트: 35종 이상의 shadcn/ui 및 커스텀 컴포넌트 사전 탑재
- 시각화 도구 통합: Recharts 차트 라이브러리 및 데모 포함
- 보안 최적화: Next.js 텔레메트리 비활성화 및 외부 네트워크 호출 차단 설정
📦 포함된 구성 요소¶
1. UI 컴포넌트 (shadcn/ui)¶
실무에서 자주 사용되는 33종 이상의 컴포넌트가 src/components/ui에 사전 설치되어 있습니다.
| 카테고리 | 컴포넌트 목록 |
|---|---|
| 기본/레이아웃 | Button, Badge, Avatar, Card, Separator, Sheet, Tabs, Accordion |
| 폼 요소 | Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider, Form, Label |
| 피드백/알림 | Alert, Dialog, Toast(Sonner), Tooltip, Popover, Progress, Skeleton |
| 데이터/기타 | Table, Calendar, Pagination, Scroll Area, Command, Navigation Menu |
2. 커스텀 컴포넌트 및 라이브러리¶
기본 shadcn/ui 외에 추가로 구현된 기능들입니다.
- SelectCards: 카드 형태의 직관적인 선택 UI (보고서 유형 선택 등)
- Toast System: Context 기반의 커스텀 토스트 알림 시스템 (Success, Error, Info, Warning 지원)
- Recharts: 데이터 시각화를 위한 차트 라이브러리 (AreaChart, BarChart 데모 포함)
- Lucide React: 1000개 이상의 아이콘 라이브러리 (로컬 내장)
🚀 설치 및 실행 가이드¶
이 템플릿은 인터넷 연결이 없는 폐쇄망 환경에서 즉시 실행 가능하도록 패키징되어 있습니다.
1. 프로젝트 설정¶
제공된 압축 파일(nextjs-template.tar.gz)을 서버로 전송한 후 압축을 해제합니다.
# 1. 압축 해제
tar -xzvf nextjs-template.tar.gz
# 2. 프로젝트 폴더로 이동
cd nextjs-template
# 3. 환경 변수 설정 (Optional)
cp .env.example .env.local
2. 개발 서버 실행¶
모든 의존성(node_modules)이 포함되어 있으므로 별도의 npm install 없이 바로 실행이 가능합니다.
http://localhost:3000으로 접속하여 데모 페이지를 확인할 수 있습니다.
📂 프로젝트 구조¶
nextjs-template/
├── public/
│ ├── fonts/ # 로컬 호스팅 폰트
│ └── *.svg # 로컬 이미지 리소스
├── src/
│ ├── app/
│ │ ├── globals.css # Tailwind CSS 및 테마 설정
│ │ ├── layout.tsx # 전역 레이아웃 (폰트 설정 포함)
│ │ └── page.tsx # 컴포넌트 데모 페이지
│ ├── components/
│ │ └── ui/ # UI 컴포넌트 소스 코드 (35+)
│ │ ├── select-cards.tsx # [Custom] 카드 선택 컴포넌트
│ │ └── toast-custom.tsx # [Custom] 토스트 시스템
│ └── lib/ # 유틸리티 함수
├── next.config.ts # Next.js 설정 (에어갭 최적화)
└── package.json
🧪 데모 페이지 기능¶
서버 실행 시 제공되는 데모 페이지(page.tsx)에서 템플릿의 주요 기능을 미리 확인해볼 수 있습니다.
- Components 탭: 버튼, 배지, 카드 등 기본 UI 요소 확인
- Forms 탭: 다양한 입력 도구 및 유효성 검사 폼 예시
- Feedback 탭: 알림 팝업 및 진행 상태 표시줄 예시
- Charts 탭: Recharts를 활용한 데이터 시각화 예시 및 SelectCards 컴포넌트 데모
- Icons 탭: 카테고리별로 분류된 100+ lucide 아이콘 검색 및 확인
부록: 온라인 환경에서 템플릿 재생성 방법
만약 이 템플릿을 처음부터 다시 만들어야 한다면 아래 과정을 따릅니다. (인터넷 연결 필요)
1. Next.js 프로젝트 생성
npx -y create-next-app@latest ./my-airgap-template \
--typescript --tailwind --eslint --app --src-dir --use-npm --yes
2. shadcn/ui 초기화 및 컴포넌트 설치
cd my-airgap-template
npx -y shadcn@latest init -y --defaults --force
# 핵심 컴포넌트 일괄 설치
npx -y shadcn@latest add button card input dialog select table form ... --yes
3. 필수 라이브러리 설치
4. 압축 전 정리