kickstart-next

KickStart Next

A modern, feature-rich Next.js boilerplate with best practices and a clean architectural approach. Get your Next.js project up and running in seconds!

Quick Start

Create a new Next.js project with one command:

npx kickstart-next my-next-app

Then follow the on-screen instructions to get started. The CLI will:

• Create your project structure
• Install dependencies
• Set up Git repository
• Configure development environment
• Set file permissions

Features

• Next.js 15+ - The latest React framework with App Router
• TypeScript - Static type checking
• Internationalization (i18n) - Multi-language support structure
• Theme Support - Light, dark, and system theme options
• State Management - Zustand for lightweight global state
• TailwindCSS - Utility-first CSS framework
• shadcn/ui - Accessible and customizable component system
• ESLint & Prettier - Code quality tools
• Husky & lint-staged - Git hooks for code quality
• VS Code Integration - Preconfigured settings and extensions

Project Structure

my-next-app/
├── .husky/              # Git hooks
├── .vscode/             # VS Code settings
├── public/              # Static assets
├── scripts/             # Build and utility scripts
├── src/
│   ├── app/             # Next.js app router
│   ├── assets/          # Asset files (SVG, images)
│   ├── components/      # React components
│   │   ├── common/      # Common components
│   │   ├── providers/   # Context providers
│   │   └── ui/          # UI components
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Core libraries
│   ├── locales/         # Translation files
│   ├── services/        # API services
│   ├── store/           # Global state management
│   ├── styles/          # Global styles
│   └── types/           # TypeScript type definitions
├── middleware.ts        # Next.js middleware
├── next.config.mjs      # Next.js configuration
├── eslint.config.mjs    # ESLint configuration
├── postcss.config.mjs   # PostCSS configuration
├── prettier.config.js   # Prettier configuration
└── tsconfig.json        # TypeScript configuration

Available Scripts

Once your project is created, you can run the following commands in your project directory:

Development

• yarn dev - Start development server
• yarn dev:clean - Start with clean cache
• yarn dev:inspect - Start with Node inspector
• yarn dev:profile - Start with profiling enabled
• yarn dev:verbose - Start with verbose logging

Quality Tools

• yarn lint - Run ESLint
• yarn lint:fix - Fix ESLint issues
• yarn format - Format code with Prettier
• yarn type:check - Check TypeScript types
• yarn check-all - Run all quality checks
• yarn fix-all - Fix all quality issues

Internationalization

• yarn i18n:audit - Check translation files
• yarn i18n:extract - Extract translation keys
• yarn i18n:missing - Show missing translations
• yarn i18n:validate - Validate translation structure

Code Standards

• TypeScript: Strong typing for all components and functions
• File naming: Use kebab-case for all files
• Zustand usage: Do not destructure store values to prevent hook errors
• Internationalization: Use the i18n helpers for all user-facing text

Configuration

The template includes preconfigured settings for:

• ESLint with Next.js, TypeScript, and Tailwind CSS plugins
• Prettier with import sorting
• VS Code extensions and settings
• PostCSS with TailwindCSS, nesting, and imports
• TypeScript with strict type checking

Documentation

Comprehensive documentation is available in the project:

• GETTING-STARTED.md - Basic setup and commands
• PROJECT-DOCS.md - Detailed project structure
• CONTRIBUTING.md - Contribution guidelines

Advanced Documentation

• docs/npx-guide.md - Detailed guide for using the CLI
• docs/project-setup.md - Project configuration details
• docs/jsdoc-examples.md - JSDoc usage examples

CLI Options

The KickStart Next CLI supports several options:

npx kickstart-next my-next-app [options]

Options:

• --verbose - Show detailed logs during creation
• --no-git - Skip git repository initialization
• --package-manager=<yarn|npm|pnpm> - Specify package manager

For more information, see the NPX Guide.

License

MIT