Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tyecode/cc-next
CLI tool to create a Next.js app with custom setup for Tailwind CSS, TypeScript, and ESLint + Prettier.
https://github.com/tyecode/cc-next
cli font-end next script tailwind typescript web
Last synced: about 20 hours ago
JSON representation
CLI tool to create a Next.js app with custom setup for Tailwind CSS, TypeScript, and ESLint + Prettier.
- Host: GitHub
- URL: https://github.com/tyecode/cc-next
- Owner: tyecode
- License: mit
- Created: 2024-09-07T20:15:30.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T18:20:45.000Z (about 2 months ago)
- Last Synced: 2024-10-30T21:12:12.298Z (8 days ago)
- Topics: cli, font-end, next, script, tailwind, typescript, web
- Language: TypeScript
- Homepage:
- Size: 87.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# tyecode/cc-next
This project is a Node.js script that automates the setup of a Next.js project with TypeScript, Tailwind CSS, Prettier, and ESLint. It allows the user to select their preferred package manager and handles all necessary configurations, including setting up Prettier and ESLint with Tailwind CSS formatting, creating essential directories, and installing helpful packages like clsx and tailwind-merge.
## Contents
- [**Feature**](#feature)
- [**Getting Started**](#getting-started)
- [**Usage**](#usage)
- [**Project Structure**](#project-structure)
- [**Dependencies**](#dependencies)
- [**Configuration**](#configuration)
- [**Contributing**](#contributing)
- [**License**](#license)
## Feature
- **Automated Next.js Project Setup:** Quickly set up a new Next.js project with TypeScript and Tailwind CSS.
- **Customizable Package Manager:** Choose between npm, yarn, or pnpm as your preferred package manager.
- **Prettier and ESLint Configuration:** Prettier and ESLint are installed and configured with rules tailored for Tailwind CSS.
- **Utilities:** Installs clsx and tailwind-merge for optimized class management in Tailwind CSS.
## Getting Started
You can use `npx` to run the setup script without cloning the repository.
1. Run the following command:
```bash
npx @tyecode/cc-next
```
2. Follow the prompts to specify your project name and select a package manager.
> This will automatically set up your Next.js project and install all necessary configurations, including TypeScript, Tailwind CSS, Prettier, and ESLint.
## Usage
When you run the script, you will be prompted with the following questions:
1. Project Name: The name of your Next.js project (default: my-next-app).
2. Package Manager: Select the package manager you’d like to use `npm`, `yarn`, or `pnpm`.
Based on your input, the script will:
- Create a new Next.js project using the selected package manager.
- Set up TypeScript, Tailwind CSS, and various project structure elements.
- Install Prettier and ESLint, along with the necessary plugins and configuration files.
- Install utility packages (i.e. clsx, tailwind-merge).
- Create essential directories (i.e. components, hooks, utils).
## Project Structure
The script creates the following project structure:
```
my-next-app/
├── src/
│ ├── components/ # Directory for React components
│ ├── hooks/ # Directory for custom React hooks
│ └── utils/
│ └── cn.ts # Utility for managing Tailwind CSS classes
├── .eslintrc.json # ESLint configuration file
├── .prettierrc.json # Prettier configuration file
└── package.json # Project dependencies and scripts
```
## Dependencies
The following dependencies are installed during the setup process:
- Next.js
- TypeScript
- Tailwind CSS
- Prettier
- ESLint
- clsx
- tailwind-merge
## Configuration
Prettier Configuration `.prettierrc.json`
```json
{
"$schema": "https://json.schemastore.org/prettierrc",
"singleQuote": false,
"trailingComma": "all",
"semi": true,
"bracketSpacing": true,
"tabWidth": 2,
"printWidth": 100,
"plugins": ["prettier-plugin-tailwindcss"]
}
```
ESLint Configuration `.eslintrc.json`
```json
{
"extends": [
"next/core-web-vitals",
"next/typescript",
"plugin:prettier/recommended"
]
}
```
## Contributing
Contributions are welcome, and this project is a great starting point for anyone looking to get involved in open-source development. Whether you’re new to contributing or a seasoned developer, your input is valued!
Please read the [Contributing guideline](https://github.com/tyecode/cc-next/blob/main/CONTRIBUTING.md).
## License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/tyecode/cc-next/blob/main/LICENSE) file for details.