next16-ts-template-fullstack - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #golang #go #machine-learning #deep-learning #java #kubernetes #vue #pytorch #security #openai

next16-ts-template-fullstack

(★ 114)

⚡ Fullstack Next.js 16 + TypeScript + MongoDB Template (with SEO)

파일 탐색기

최종 버전 다운로드 (.zip)

- - test.yml
- extensions.json
- settings.json
- vercel.svg
- - favicon.ico
  - layout.tsx
  - not-found.tsx
  - provider.tsx
  - template.tsx
- - client-only.tsx
- - useCustomHook.ts
- - auth.ts
  - client.ts
- - useStore.ts
- - global.css
- - global-nav.test.tsx
- TestWrapper.tsx
.gitignore
biome.json
jest.config.js
jest.setup.js
license.md
next-env.d.ts
next.config.js
package.json
pnpm-lock.yaml
postcss.config.js
README.md
tailwind.config.js
tsconfig.json

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd next16-ts-template-fullstack

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

pnpm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

pnpm dev

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Next.js 16 Fullstack Template

A feature-rich, production-ready template for building full-stack applications with Next.js 16 and TypeScript.

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/TypeScript-blue?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Next.js](https://img.shields.io/badge/Next.js-black?logo=next.js&logoColor=white)](https://nextjs.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
[![React Query](https://img.shields.io/badge/-React%20Query-FF4154?logo=react-query&logoColor=white)](https://tanstack.com/query/latest)
[![NextAuth.js](https://img.shields.io/badge/NextAuth.js-black?logo=next.js&logoColor=white)](https://next-auth.js.org/)

> This template is designed to kickstart your next full-stack project, providing a solid foundation with modern technologies and best practices. It includes everything you need from authentication to data fetching and styling.

## ✨ Features

-   **Framework**: [Next.js 16](https://nextjs.org/) (App Router)
-   **Language**: [TypeScript](https://www.typescriptlang.org/)
-   **Authentication**: [NextAuth.js](https://next-auth.js.org/) for robust and easy-to-implement authentication.
-   **Database**: Integrated with [MongoDB](https://www.mongodb.com/) using `@auth/mongodb-adapter`.
-   **Styling**: [Tailwind CSS 4](https://tailwindcss.com/) for a utility-first CSS framework.
-   **Data Fetching**: [TanStack Query (React Query) v5](https://tanstack.com/query/latest) for server-state management.
-   **State Management**: [Zustand](https://github.com/pmndrs/zustand) for minimal and boilerplate-free client-side state management.
-   **Linting & Formatting**: [Biome](https://biomejs.dev/) for fast and comprehensive code linting and formatting.
-   **Testing**: [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/) for unit and component testing.
-   **Package Manager**: Uses `pnpm` for efficient package management.

## 🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

### Prerequisites

-   [Node.js](https://nodejs.org/en/) (v18.0.0 or higher)
-   [pnpm](https://pnpm.io/installation)

### Installation

1.  **Clone the repository:**
    ```bash
    git clone https://github.com/bysxx/next13-ts-template-fullstack.git
    cd next13-ts-template-fullstack
    ```

2.  **Install dependencies:**
    ```bash
    pnpm install
    ```

3.  **Set up environment variables:**
    Create a `.env.local` file in the root of the project and add the necessary environment variables.
    ```env
    # Auth
    NEXTAUTH_SECRET= # openssl rand -hex 32
    NEXTAUTH_URL=http://localhost:3000

# MongoDB
    MONGODB_URI= # Your MongoDB connection string

# Kakao OAuth
    KAKAO_CLIENT_ID=
    KAKAO_CLIENT_SECRET=
    ```

4.  **Run the development server:**
    ```bash
    pnpm dev
    ```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## 📜 Available Scripts

In the project directory, you can run:

-   `pnpm dev`: Runs the app in development mode.
-   `pnpm build`: Builds the app for production.
-   `pnpm start`: Starts a production server.
-   `pnpm lint`: Lints the code using Biome.
-   `pnpm format`: Formats the code using Biome.
-   `pnpm check`: Runs Biome linter and formatter.
-   `pnpm check:fix`: Fixes linting and formatting errors automatically.
-   `pnpm type`: Runs the TypeScript compiler to check for type errors.
-   `pnpm test`: Runs the test suite using Jest.

## 🛠️ Tech Stack

-   **Frontend**: React 19, Next.js 15
-   **Backend**: Next.js API Routes
-   **Database**: MongoDB
-   **Authentication**: NextAuth.js
-   **Styling**: Tailwind CSS
-   **Data Fetching**: TanStack Query (React Query)
-   **State Management**: Zustand
-   **Tooling**: TypeScript, Biome, Jest, pnpm

## 📄 License

This project is licensed under the MIT License - see the [license.md](license.md) file for details.

## 🧑‍💻 Author

-   **bysxx** - [GitHub](https://github.com/bysxx)