Next.js 16 풀스택 템플릿

Next.js 16과 TypeScript를 사용하여 풀스택 애플리케이션을 구축하기 위한 기능이 풍부하고 프로덕션 준비가 된 템플릿입니다.

TypeScript

Next.js

Tailwind CSS

React Query

NextAuth.js

이 템플릿은 사용자의 다음 풀스택 프로젝트를 시작할 수 있도록 설계되었으며, 최신 기술과 모범 사례로 견고한 기반을 제공합니다. 인증부터 데이터 가져오기 및 스타일링에 이르기까지 필요한 모든 것을 포함하고 있습니다.

✨ 기능 (Features)

• 프레임워크: Next.js 16 (App Router)
• 언어: TypeScript
• 인증(Authentication): 강력하고 구현하기 쉬운 인증을 위한 NextAuth.js.
• 데이터베이스 (Database): @auth/mongodb-adapter를 사용하여 MongoDB와 통합되었습니다.
• 스타일링 (Styling): 유틸리티 우선 CSS 프레임워크인 Tailwind CSS 4.
• 데이터 가져오기 (Data Fetching): 서버 상태 관리를 위한 TanStack Query (React Query) v5.
• 상태 관리 (State Management): 최소한의 코드와 보일러플레이트가 없는 클라이언트 측 상태 관리를 위한 Zustand.
• 린팅 및 포맷팅 (Linting & Formatting): 빠르고 포괄적인 코드 린팅 및 포맷팅을 위한 Biome.
• 테스트 (Testing): 단위 및 컴포넌트 테스트를 위한 Jest와 React Testing Library.
• 패키지 관리자 (Package Manager): 효율적인 패키지 관리를 위해 pnpm을 사용합니다.

🚀 시작하기 (Getting Started)

다음 지침에 따라 프로젝트를 로컬 환경에서 개발 및 테스트 목적으로 실행할 수 있도록 설정하세요.

사전 요구 사항 (Prerequisites)

• Node.js (v18.0.0 이상)
• pnpm

설치 (Installation)

1. 저장소 클론(Clone the repository):

git clone https://github.com/bysxx/next13-ts-template-fullstack.git
cd next13-ts-template-fullstack

2. 의존성 설치(Install dependencies):

pnpm install

3. 환경 변수 설정(Set up environment variables):
   프로젝트 루트에 .env.local 파일을 생성하고 필요한 환경 변수를 추가합니다.

# Auth
NEXTAUTH_SECRET= # openssl rand -hex 32
NEXTAUTH_URL=http://localhost:3000
...

4. 개발 서버 실행(Run the development server):

pnpm dev

브라우저에서 http://localhost:3000을 열어 결과를 확인하세요.

📜 사용 가능한 스크립트(Available Scripts)

프로젝트 디렉토리에서 다음 명령어를 실행할 수 있습니다:

• pnpm dev: 앱을 개발 모드(development mode)로 실행합니다.
• pnpm build: 프로덕션용으로 앱을 빌드합니다.
• pnpm start: 프로덕션 서버를 시작합니다.
• pnpm lint: Biome을 사용하여 코드를 린트(lint)합니다.
• pnpm format: Biome을 사용하여 코드를 포맷합니다.
• pnpm check: Biome linter와 formatter를 실행합니다.
• pnpm check:fix: 린팅 및 포매팅 오류를 자동으로 수정합니다.
• pnpm type: TypeScript 컴파일러를 실행하여 타입 오류를 확인합니다.
• pnpm test: Jest를 사용하여 테스트 스위트를 실행합니다.

🛠️ 기술 스택(Tech Stack)

• 프론트엔드: React 19, Next.js 15
• 백엔드: Next.js API Routes
• 데이터베이스: MongoDB
• 인증: NextAuth.js
• 스타일링: Tailwind CSS
• 데이터 가져오기(Data Fetching): TanStack Query (React Query)
• 상태 관리(State Management): Zustand
• 도구(Tooling): TypeScript, Biome, Jest, pnpm

📄 라이선스(License)

이 프로젝트는 MIT License 하에 라이선스가 부여되었으며, 자세한 내용은 license.md 파일을 참조하세요.

🧑‍💻 작성자(Author)

• bysxx - GitHub