next-dev v1.2.8

Tentu, berikut adalah markdown yang telah diperbaiki:

CLI Tool for Next.js Project Automation

Overview

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.

Prerequisites

• Ensure you have Node.js installed.
• This tool should be run in the root directory of a Next.js project.

Installation

Using Yarn

Add to project:

yarn add next-dev

Global installation:

yarn global add next-dev

Using npm

Add to project:

npm i next-dev

Global installation:

npm i -g next-dev

Using npx

You can also run the tool directly with npx:

npx next-dev

Usage

This tool provides several commands that can be run using next-dev.

Commands

• gen-box: Generates a DevBox component around JSX elements in .tsx files.
• clear-box: Clears DevBox 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.

Example Usage

1. Generate DevBox:

   next-dev gen-box

2. Clear DevBox:

   next-dev clear-box

3. Generate API:

   next-dev gen-api

4. Generate Page:

   next-dev gen-page

5. Generate Tree:

   next-dev gen-tree --name myTree

6. Generate Model:

   next-dev gen-model --dir ./path/to/json/files --out ./src/models

Adding DevBox Components Automatically

Add use dev to the top of the file or below use client to automatically generate DevBox around the first return element.

Example:

return (
    <DevBox path="dnNjb2RlOi8vZmlsZS8vVXNlcnMvYmlwL0RvY3VtZW50cy9wcm9qZWN0cy9iaXAvd2lidS1zZXJ2ZXIvc3JjL3VpL2NvbXBvbmVudC9CdXR0b25Mb2dvdXQudHN4OjE3OjE=">
      <Button
        loading={loading}
        size="compact-sm"
        variant="subtle"
        onClick={logout}
      >
        <Badge>Logout</Badge>
      </Button>
    </DevBox>
);

Toggling Dev Mode with a Button

Call ButtonToogle to activate or deactivate dev mode:

'use client'
import { Button } from "@mantine/core";
import { ButtonToogle } from "next-dev";

export default function ButtonDev() {
    return <ButtonToogle>
        {(isDev) => <Button size='compact-xs' color={isDev ? "red" : "blue"}>{isDev ? "DEV" : "PROD"}</Button>}
    </ButtonToogle>
}

Options

All commands accept the following option:

• --log, -l: Enable logging (default: false)

Example with Options

next-dev gen-box --log

Script Details

File Structure and Configuration

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.

Command Definitions

• gen-box:

  • Generates DevBox components around JSX elements in .tsx files.
  • Adds an import statement for DevBox 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.

Error Handling

Each command has a try-catch block to handle errors gracefully and log appropriate error messages.

Development

Setup

1. Clone the repository.
2. Run npm install to install dependencies.

Running the CLI

Run the CLI using next-dev:

next-dev <command>

Example Development Flow

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.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

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 <command> with the actual command you want to run when using the tool.