Package Exports

next-ts-app
next-ts-app/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-ts-app) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Next.js TypeScript Starter Template

A simple starter template for Next.js projects with useful tools:

Main Features

✅ Next.js 15 (App Router)
✅ TypeScript for better coding
✅ Bun for fast package management
✅ ESLint to check code mistakes
✅ Prettier to format code automatically
✅ Husky for Git checks before commits
✅ Ready for production use
✅ Clean project structure

How to Start

Option 1: Use the CLI `(Recommended)`

Create your Next.js TypeScript project in seconds using our CLI tool. Choose your preferred package manager:

Recommended (Bun) 🌟
```
bunx next-ts-app
```
npm 📦
```
npx next-ts-app
```
yarn 🧶
```
yarn create next-ts-app
```
pnpm ⚡
```
pnpm dlx next-ts-app
```

CLI Options

During project creation, you'll be prompted to:

Project Name: Enter a name for your project (e.g., my-awesome-app)
Package Manager: Choose your preferred package manager:
- bun (Recommended for speed)
- npm (Most common)
- yarn (Alternative to npm)
- pnpm (Fast, disk-space efficient)
Follow the steps shown: For example, if you choose bun:
```
cd my-project
bun install
bun run dev
```
Note: If you pick bun, make sure Bun is installed (visit bun.sh). For pnpm or yarn, install them first if needed.

Prerequisites

For Bun: Install from bun.sh
For pnpm: Install via npm install -g pnpm
For Yarn: Install via npm install -g yarn
For npm: Comes with Node.js

What's Included

After installation, you'll get:

✅ Next.js 15 with App Router
✅ TypeScript configuration
✅ Tailwind CSS setup
✅ ESLint & Prettier
✅ Git hooks with Husky
✅ Project structure ready to go

Option 2: Use GitHub Template

Click Use this template on GitHub.
Name your new repository.
Click Create repository.

Set up locally:

git clone https://github.com/[your-username]/[your-repo].git
cd [your-repo]
bun install
bun run dev

Project Structure

src/
├── app/
│   ├── (landing)/               # Landing Page Route Group (Optional)
│   │   ├── components/          # Page-specific Components
│   │   │   ├── HeroSection.tsx
│   │   │   └── CTASection.tsx
│   │   └── page.tsx             # Landing Page Entry
│   ├── (dashboard)/             # Other Route Groups (Auth, Dashboard etc)
│   ├── layout.tsx               # Root Layout
│   ├── template.tsx             # Optional Template (For per-page layouts)
│   └── providers.tsx            # Global Context Providers
│
├── components/
│   ├── ui/                      # Reusable UI Primitives (ShadCN/ui Style)
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── ...
│   ├── layout/                  # Layout Components
│   │   ├── header.tsx
│   │   ├── footer.tsx
│   │   └── ...
│   └── shared/                  # Cross-Cutting Components
│       ├── ThemeToggle.tsx
│       └── Analytics.tsx
│
├── config/                      # App Configuration
│   ├── site.ts                  # Site Metadata
│   ├── routes.ts                # Route Configurations
│   └── theme.ts                 # Design System Config
│
├── hooks/                       # Custom React Hooks
│   ├── useDebounce.ts
│   └── useLocalStorage.ts
│
├── lib/
│   ├── api/                     # API Clients
│   │   ├── axios.ts
│   │   └── trpc/
│   ├── utils/                   # Utility Functions
│   │   ├── formatter.ts
│   │   └── validators.ts
│   └── constants.ts             # App Constants
│
├── styles/
│   ├── globals.css              # Global CSS
│   ├── theme/                   # CSS Variables & Design Tokens
│   └── tailwind.css             # Tailwind Directives
│
├── types/                       # Global Type Definitions
│   ├── index.d.ts
│   ├── next.d.ts                # Next.js Type Extensions
│   └── custom-types.ts
│
├── public/
│   └── assets/                  # Static Assets
│       ├── images/
│       └── fonts/
│
├── services/                    # Business Logic Layer
│   ├── auth.service.ts
│   └── analytics.service.ts
│
├── contexts/                    # React Contexts
│   ├── ThemeContext.tsx
│   └── AuthContext.tsx
│
├── hooks/                       # Custom Hooks
│   ├── useAuth.ts
│   └── useAnalytics.ts
│
├── icons/                       # SVG Icon Components
│   ├── BrandIcon.tsx
│   └── SocialIcons/
│
└── __tests__/                   # Test Directory
    ├── components/
    └── utils/

Code Quality Tools

These tools keep your code neat:

ESLint: Finds code mistakes.
Prettier: Formats code nicely.
Tailwind CSS: Organizes styles.
Husky: Checks code before commits.
lint-staged: Runs checks on changed files.

Example rule for imports:

"import/order": [
  "error",
  {
    "groups": ["builtin", "external", "internal"],
    "alphabetize": { "order": "asc" }
  }
]

Deployment

This template works with:

Vercel
Netlify
AWS
Docker

Copy .env.example to .env for production settings.

Want to Help?

Check our CONTRIBUTING GUIDE to contribute.

License

Free to use under MIT License. See the LICENSE file for details.

next-ts-app