CNAP - Create Next App Page with Tailwind Css

cnap (Create Next App Page) is a CLI tool designed to quickly scaffold Next.js pages for app router using tailwind css. It generates a directory structure with predefined files, including loader.js, template.js, page.js, and layout.js, each filled with basic component templates to jumpstart your Next.js development.

Installation

To install cnap globally on your machine via npm, run the following command:

npm install -g @airoom/create-next-app-page

This allows you to use the cnap command from anywhere on your system.

Usage

To use cnap, provide a path and component name. The command creates a new directory structure at the specified location with predefined component templates. The path can include both the base directory and the component name, enabling you to specify exactly where in your project's directory structure you want the new components to be created.

Basic Usage

To create a new component structure:

cnap

This will ask you to enter path name and page name to create a directory within app/pageName with the following structure:

• loader.js - Basic loading component.
• template.js - Basic template component.
• page.js - Basic page component.
• layout.js - Basic layout component.

Each file will contain a simple Next.js component template to get you started.

Example File Content

For example, page.js might contain:

export default function Page() {
  return <div>Page Component</div>;
}

Contributing

We welcome contributions to make cnap even better! Here are some ways you can contribute:

1. Report bugs and propose feature enhancements.
2. Review the source code and enhance the templates.
3. Improve documentation.

Steps to Contribute

1. Fork the repository on GitHub.
2. Create a new branch for your feature or bug fix.
3. Commit your changes.
4. Push your branch and submit a pull request.

License

cnap is open source software licensed as GNU GPLv3. The project is free to use and modify in accordance with the license.

Support

If you encounter any issues or have suggestions for improvement, please open an issue on the project's GitHub issue tracker. We appreciate your feedback and contributions!