@flownet/lib-to-nextjs

Introduction

@flownet/lib-to-nextjs is a utility designed to help developers set up and configure a basic Next.js application with ease. This tool streamlines the process of creating a Next.js project by handling initial configuration, package management, and file structuring. Its primary value lies in helping users get started with a well-structured Next.js app, saving them time and effort on preliminary setup tasks.

How It Works

The tool accepts various parameters to customize the setup of a Next.js application, such as specifying the app's name, entry point, version, and more. It checks for the presence of necessary directories and dependencies, creates output and package directories, and copies required project files. Additionally, it installs essential dependencies like React and Next.js, and runs a build process to ensure the application is ready for development.

Key Features

• Automates the setup of a basic Next.js project.
• Allows configuration of project name, version, and author.
• Handles directory creation and management for source, output, and package files.
• Ensures essential dependencies are installed.
• Supports template rendering to include custom configurations.
• Executes a build process to finalize the application setup.

Conclusion

@flownet/lib-to-nextjs is a straightforward tool that facilitates the initial setup of a Next.js application. By automating many of the routine tasks involved in project configuration, it enables users to quickly and efficiently get started with their Next.js projects, focusing on development rather than setup logistics.

Developer Guide: @flownet/lib-to-nextjs

Overview

The @flownet/lib-to-nextjs library is designed to streamline the process of setting up a Next.js application. It automates the configuration and initialization of a new Next.js project by configuring project files and managing necessary dependencies such as Next.js, React, and React-DOM. The library's primary function is to render templates based on the specified configuration and ensure the project structure is appropriately set up.

Installation

To install the @flownet/lib-to-nextjs library, run the following command using npm or yarn:

npm install @flownet/lib-to-nextjs

Or using yarn:

yarn add @flownet/lib-to-nextjs

Usage

The core functionality of the library is exposed through its main export function, which sets up a Next.js project based on specified parameters. Below is a sample structure demonstrating how to use this function effectively:

Setting Up a Next.js App

First, import the module and set up the function with the necessary properties:

import setupNextJsApp from '@flownet/lib-to-nextjs';

(async () => {
  try {
    await setupNextJsApp({
      params: {
        name: 'my-nextjs-app',
        entry: 'src/esm',
        author: 'Your Name',
      },
      src: './source-directory',
      dest: './destination-directory',
    });

    console.log('Next.js app setup completed successfully.');
  } catch (error) {
    console.error('Error setting up Next.js app:', error);
  }
})();

Parameters

• params.name: string - The name of your Next.js application.
• params.entry: string - The entry directory for your application code.
• src: string - The source directory path containing your application files.
• dest: string - The destination directory where the Next.js project will be generated.

Considerations

• Ensure that your source (src) and destination (dest) directories exist and are accessible.
• The function manages dependencies automatically, including next, react, and react-dom.

Examples

Below are some example usages illustrating how to configure a project:

import setupNextJsApp from '@flownet/lib-to-nextjs';

// Basic configuration with default options
async function createBasicApp() {
  await setupNextJsApp({
    params: { name: 'basic-app' },
    src: './project-source',
    dest: './project-output',
  });
}

// Custom configuration with additional metadata
async function createCustomApp() {
  await setupNextJsApp({
    params: {
      name: 'custom-app',
      author: 'Developer Name',
      version: '1.0.0',
    },
    src: './custom-source',
    dest: './custom-output',
  });
}

Run these functions to generate different setups for your Next.js app using the specified configurations.

Acknowledgement

@flownet/lib-to-nextjs leverages internally various Node.js standard modules and community-driven tools like shelljs and @flownet/lib-render-templates-dir for enhanced project management and template rendering. These contributions are crucial for the library's operational effectiveness.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  params:
    type: object
    properties:
      name:
        type: string
        description: The name of the application.
        default: nextjs
      entry:
        type: string
        description: The entry point of the application.
        default: app/esm
      id:
        type: string
        description: The identifier for the application.
        default: com.example.nextjs
      version:
        type: string
        description: The version of the application.
        default: 0.1.0
      title:
        type: string
        description: The title of the application.
        default: NextJs App
      package_name:
        type: string
        description: The package name of the application.
      author:
        type: string
        description: The author of the application.
        default: Flownet
      description:
        type: string
        description: The description of the application.
        default: NextJs App built with Flownet
      vendor:
        type: string
        description: The vendor of the application.
        default: flownet.ai
      include_css:
        type: boolean
        description: Include CSS extraction option.
        default: false
      bundle_name:
        type: string
        description: The bundle name for the application.
      package_dir:
        type: string
        description: The directory for the package.
        default: ./.package/nextjs
      out_dir:
        type: string
        description: The output directory.
        default: ./.out/nextjs
      dependencies:
        type: array
        description: List of dependencies for the application.
        items:
          type: object
          properties:
            package:
              type: string
              description: The name of the package.
            version:
              type: string
              description: The version of the package.
  config:
    type: object
    description: Configuration object to be passed to the function.
  src:
    type: string
    description: The source directory path.
  dest:
    type: string
    description: The destination directory path.
required:
  - params
  - src
  - dest