create-next-app-boilerplate

A CLI tool to quickly create a Next.js application with TypeScript, Tailwind CSS, and essential development tools.

Features

• Next.js 15.5.3 with App Router
• TypeScript for type safety
• Tailwind CSS 3.4.17 for styling
• TanStack Query for data fetching
• Axios for HTTP requests
• ESLint for code linting
• Pre-configured project structure
• Environment-based configuration system

Usage

With npx (recommended)

npx create-next-app-boilerplate my-project

With pnpm

pnpm create next-app-boilerplate my-project
# or
pnpm dlx create-next-app-boilerplate my-project

With yarn

yarn create next-app-boilerplate my-project

Global installation

# npm
npm install -g create-next-app-boilerplate
create-next-app-boilerplate my-project

# pnpm
pnpm add -g create-next-app-boilerplate
create-next-app-boilerplate my-project

# yarn
yarn global add create-next-app-boilerplate
create-next-app-boilerplate my-project

Interactive mode

If you don't specify a project name, the CLI will ask for it:

npx create-next-app-boilerplate
# ? What is your project name? my-awesome-app

What gets created

my-project/
├── src/
│   ├── app/              # Next.js App Router pages
│   ├── configs/          # Application configuration
│   │   └── app.config.ts # Environment-based config
│   ├── lib/              # Utility functions and helpers
│   │   ├── api.ts        # Axios instance
│   │   ├── get-env-config-factory.ts
│   │   └── reactQuery.ts # TanStack Query utilities
│   ├── models/           # TypeScript interfaces and types
│   ├── services/         # API services and data fetching
│   └── utils/            # Utility functions
│       └── storage.ts    # Local/Session storage utilities
├── tailwind.config.js    # Tailwind CSS configuration
├── postcss.config.mjs    # PostCSS configuration
└── package.json          # Project dependencies

After creation

1. Navigate to your project:

   cd my-project

2. Start the development server:

   # The CLI automatically detects your package manager
   npm run dev    # if using npm
   pnpm run dev   # if using pnpm
   yarn dev       # if using yarn

3. Customize your app:

   • Update the storage prefix in src/utils/storage.ts
   • Set up environment variables in .env.local
   • Configure API endpoints in src/configs/app.config.ts

Environment Configuration

The boilerplate includes an environment-based configuration system. Set the VITE_ENV environment variable to:

• dev - Development environment
• beta - Beta environment
• prod - Production environment

Available Scripts

# Development
npm run dev / pnpm run dev / yarn dev

# Production build
npm run build / pnpm run build / yarn build

# Start production server
npm start / pnpm start / yarn start

# Linting
npm run lint / pnpm run lint / yarn lint

The CLI automatically detects your preferred package manager (pnpm > yarn > npm) and installs dependencies accordingly.

Requirements

• Node.js 18 or higher
• Git (for cloning the template)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT