quickstart-next

Quickstart Next

Quickstart Next is a CLI tool to quickly create a Next.js starter project with optional Tailwind CSS, Material UI (MUI), Shadcn/UI components, and Zustand state management. It automates project setup, cleans default boilerplate, and adds a custom welcome page.

Table of Contents

• Features
• Installation
• Usage
• Project Structure
• Scripts
• Contributing
• License

Features

• Initialize a Next.js project with JavaScript or TypeScript.
• Optionally include:
  • Tailwind CSS
  • Material UI
  • Shadcn/UI components
  • Zustand state management
• Automatically removes default Next.js boilerplate page.
• Adds a custom welcome page showing which features are enabled.
• Allows selecting optional templates for pre-configured setups.
• Provides a final summary showing installed dependencies.

Installation

Run the CLI directly using npx:

npx quickstart-next

Or install globally:

npm install -g quickstart-next
quickstart-next

Usage

• Run the CLI:

npx quickstart-next

• Follow the interactive prompts:

• Choose project name.
• Select language (JavaScript or TypeScript).
• Choose whether to include src folder.
• Select optional features: Tailwind, MUI, Shadcn, Zustand.
• Select optional templates if available.

• After setup, navigate to your project:

cd my-project
npm run dev

• The CLI will display a summary of selected options and installed dependencies.

Project Structure

After running the CLI, your folder quickstart-next will look like this:

quickstart-next/
├─ bin/
│  └─ index.js          # CLI entry point (runs prompts, creates project)
├─ src/
│  ├─ prompts.js        # Inquirer prompts for user input
│  ├─ createProject.js  # Creates the Next.js project folder
│  ├─ cleanBoilerplate.js  # Cleans default pages, adds welcome page, renames layout.js
│  ├─ setupTailwind.js  # Configures Tailwind CSS if selected
│  ├─ setupMui.js       # Installs and configures Material UI
│  ├─ setupShadcn.js    # Initializes Shadcn and adds default components
│  ├─ setupZustand.js   # Installs and configures Zustand state management
│  └─ copyTemplate.js   # Copies optional templates into the project
├─ package.json          # NPM package metadata and dependencies
└─ README.md             # This documentation

Description

• bin/index.js – Main CLI entry point that runs the prompts, sets up the project, and installs dependencies.
• src/ – Contains all the modules that handle specific setup tasks:
  • prompts.js – User input via Inquirer prompts.
  • createProject.js – Creates the Next.js project folder and initial files.
  • cleanBoilerplate.js – Removes default boilerplate pages, adds a custom welcome page, and renames layout.js to layout.jsx.
  • setupTailwind.js – Installs and configures Tailwind CSS.
  • setupMui.js – Installs Material UI and sets up the project.
  • setupShadcn.js – Initializes Shadcn/UI and adds default components like the button.
  • setupZustand.js – Installs Zustand for state management.
  • copyTemplate.js – Copies optional templates into the project.
• package.json – Contains CLI metadata, dependencies, and scripts.
• README.md – Documentation for the CLI and usage instructions.

Scripts

Inside the CLI package:

• npm start – Runs the CLI locally.
• npx quickstart-next – Runs the CLI without installing globally.
• npm test – Placeholder test script.

Inside the generated Next.js project:

• npm run dev – Starts the development server.
• npm run build – Builds the project for production.
• npm start – Runs the production build.

Contributing

• Fork the repository.
• Create your feature branch: git checkout -b feature/my-feature.
• Commit your changes: git commit -m "Add my feature".
• Push to the branch: git push origin feature/my-feature.
• Submit a pull request.

License

This project is licensed under the MIT License.