Tentu, berikut adalah markdown yang telah diperbaiki:
npm install next-devTentu, berikut adalah markdown yang telah diperbaiki:
!logo
This CLI tool provides automation for common tasks in a Next.js project. It includes commands for generating and clearing DevBox components, generating API endpoints, generating pages, and more. It also ensures the required project structure and configuration files are present.
- Ensure you have Node.js installed.
- This tool should be run in the root directory of a Next.js project.
Add to project:
``sh`
yarn add next-dev
Global installation:
`sh`
yarn global add next-dev
Add to project:
`sh`
npm i next-dev
Global installation:
`sh`
npm i -g next-dev
You can also run the tool directly with npx:`sh`
npx next-dev
This tool provides several commands that can be run using next-dev.
- gen-box: Generates a DevBox component around JSX elements in .tsx files.DevBox
- clear-box: Clears components from .tsx files.
- gen-api: Generates API endpoints.
- gen-page: Generates new pages.
- gen-tree: Generates a tree structure of the project.
- gen-model: Generates TypeScript models from JSON files, URLs, or directories.
1. Generate DevBox:
`sh`
next-dev gen-box
2. Clear DevBox:
`sh`
next-dev clear-box
3. Generate API:
`sh`
next-dev gen-api
4. Generate Page:
`sh`
next-dev gen-page
5. Generate Tree:
`sh`
next-dev gen-tree --name myTree
6. Generate Model:
`sh`
next-dev gen-model --dir ./path/to/json/files --out ./src/models
Add use dev to the top of the file or below use client to automatically generate DevBox around the first return element.
Example:
`tsx`
return (
size="compact-sm"
variant="subtle"
onClick={logout}
>
);
Call ButtonToogle to activate or deactivate dev mode:`tsx
'use client'
import { Button } from "@mantine/core";
import { ButtonToogle } from "next-dev";
export default function ButtonDev() {
return
{(isDev) => }
}
`
All commands accept the following option:
- --log, -l: Enable logging (default: false)
`sh`
next-dev gen-box --log
1. Project Root Check:
The script checks if it is running in the root directory of a Next.js project by calling isNextJsRootDir(). If the check fails, it exits with an error message.
2. Directory and Configuration File Creation:
If the ./src/util directory does not exist, it creates it. Then, it creates a default configuration file app_config.ts if it does not exist.
- gen-box:
- Generates DevBox components around JSX elements in .tsx files.DevBox
- Adds an import statement for if it does not exist.
- clear-box:
- Removes DevBox components from .tsx files.
- gen-api:
- Generates API endpoint boilerplate.
- gen-page:
- Generates new page boilerplate.
- gen-tree:
- Generates a tree structure of the project.
- gen-model:
- Generates TypeScript models from JSON files, URLs, or directories.
- Saves each JSON file from the input directory to the output directory as separate TypeScript files with corresponding names.
Each command has a try-catch block to handle errors gracefully and log appropriate error messages.
1. Clone the repository.
2. Run npm install to install dependencies.
Run the CLI using next-dev:
`sh`
next-dev
1. Create a New Command:
Add a new command to the yargs configuration and implement the corresponding function.
2. Test the Command:
Run the command using next-dev to ensure it works as expected.
This project is licensed under the MIT License. See the LICENSE file for more details.
Contributions are welcome! Please fork the repository and submit a pull request for review.
---
This README provides an overview of the CLI tool, including installation, usage, and development instructions. Make sure to replace