NOTE: This repository will no longer receive updates. I made the project more generic and compatible with other frameworks besides Next.js. That's why I've created a new repository https://github.com/raphox/poly-scaffold

next-scaffold

The gem next_rails_scaffold uses this repository to generate the page routing system to consume the RESTful API generated by the command bin/rails generate scaffold Post title:string body:text.

To get more information about the page routing system and the static export for Next.js, access https://nextjs.org/docs/pages/building-your-application/deploying/static-exports. To learn more about the Rails scaffold generator, access https://guides.rubyonrails.org/command_line.html#bin-rails-generate.

Attention: This package is a flexible and extensible project template that can consume any RESTful API, regardless of the backend technology used. While the sample application is integrated with a Ruby on Rails API, the project is not limited to it. You can easily connect it to any other RESTful service, making it adaptable to various backend implementations.

Templates

_templates/scaffold/
└── javascript
    ├── [id]
    |   ├── edit.ejs.t
    |   └── show.ejs.t
    ├── components
    |   ├── resource.ejs.t
    |   └── resource_form.ejs.t
    ├── _app.ejs.t
    ├── _document.ejs.t
    ├── home.ejs.t
    ├── index.js
    ├── list.ejs.t
    ├── new.ejs.t
    ├── providers.ejs.t
    └── services.ejs.t
├── typescript
    ├── [id]
    |   ├── edit.ejs.t
    |   └── show.ejs.t
    ├── components
    |   ├── resource.ejs.t
    |   └── resource_form.ejs.t
    ├── _app.ejs.t
    ├── _document.ejs.t
    ├── home.ejs.t
    ├── index.js
    ├── list.ejs.t
    ├── new.ejs.t
    ├── providers.ejs.t
    ├── services.ejs.t
└── shadcn-ui (TODO)

Frontend tech stack:

• Next.js (https://nextjs.org) - The React Framework for the Web
  • Elevate our frontend development by leveraging Next.js, a powerful React Framework tailored for the web. Join us in creating and managing a dynamic and responsive web application with enhanced performance and developer-friendly features.
• Axios (https://axios-http.com) - Promise based HTTP client for the browser and node.js
  • Empower our application with Axios, a versatile and promise-based HTTP client. Contribute to setting up a global request configuration, defining custom headers, and handling exceptions and success responses. Ensure smooth communication between the browser and node.js.
• React Query (https://tanstack.com/query/latest) - Powerful asynchronous state management for TS/JS, React, Solid, Vue, and Svelte
  • Transform the way we handle asynchronous state management using React Query. Collaborate with us to seamlessly load and update data through RESTful requests. Bring your expertise in TypeScript/JavaScript, React, Solid, Vue, or Svelte to enhance our application's state management capabilities.
• React Hook Form (https://react-hook-form.com) - Performant, flexible, and extensible forms with easy-to-use validation
  • Contribute to building high-performance, flexible, and extensible forms with React Hook Form. Your role involves defining and implementing robust form validations, ensuring an effortless and error-free user experience. Join us in creating dynamic and user-friendly forms.
• Zod (https://zod.dev) - TypeScript-first schema validation with static type inference
  • Enhance our application's integrity with Zod, a TypeScript-first schema validation tool. Work with us to define and enforce validation rules, leveraging static type inference for a more secure and type-safe codebase. Ensure data consistency and reliability.
• Hygen (https://www.hygen.io) - The scalable code generator that saves you time
  • Optimize our development workflow with Hygen, a scalable code generator designed to save time. Play a crucial role in defining and utilizing templates for our code generation process. Improve code consistency and reduce repetitive tasks by incorporating Hygen into our project.

Using

yarn install
npx hygen-add next-scaffold
npx hygen scaffold typescript post title:string body:text

Result

Generated files strutucture:

src
├── components
|   ├── Post.tsx
|   └── PostForm.tsx
├── pages
|   └── posts
|       ├── [id]
|       |   ├── edit.tsx
|       |   └── index.tsx
|       ├── index.tsx
|       └── new.tsx
├── _app.tsx
├── _document.tsx
├── index.tsx
├── providers.tsx
└── services.ts

Sample app https://github.com/raphox/next-rails-app.