{"id":16532640,"url":"https://github.com/rimsila/next-dev-template","last_synced_at":"2025-10-28T11:30:59.938Z","repository":{"id":161363438,"uuid":"328597589","full_name":"rimsila/next-dev-template","owner":"rimsila","description":"An out-of-box UI solution for enterprise applications as a React boilerplate using React 17x, typescript 4x, umi 3x antd 4.x ,ahooks , antd pro-component and @next-dev library (core/component/hooks/provider).","archived":true,"fork":false,"pushed_at":"2021-01-26T20:32:45.000Z","size":470,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T23:13:07.483Z","etag":null,"topics":["antd","cli","dev-boilerplate","enterprise-applications","react-generator-cli","umi"],"latest_commit_sha":null,"homepage":"https://next-dev-template.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rimsila.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":"ant-design","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-01-11T08:33:27.000Z","updated_at":"2024-02-25T13:06:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"6ff241ee-5956-4ce7-a132-052e625b7df7","html_url":"https://github.com/rimsila/next-dev-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rimsila%2Fnext-dev-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rimsila%2Fnext-dev-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rimsila%2Fnext-dev-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rimsila%2Fnext-dev-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rimsila","download_url":"https://codeload.github.com/rimsila/next-dev-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238638483,"owners_count":19505610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","cli","dev-boilerplate","enterprise-applications","react-generator-cli","umi"],"created_at":"2024-10-11T18:13:06.862Z","updated_at":"2025-10-28T11:30:59.492Z","avatar_url":"https://github.com/rimsila.png","language":"TypeScript","funding_links":["https://opencollective.com/ant-design"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWelcome to Next-dev-Boilerplate\u003c/h1\u003e\n\nAn out-of-box UI solution for enterprise applications as a React boilerplate using React 17x, typescript 4x, [umi 3x](https://umijs.org/docs#create-react-app) antd 4.x ,ahooks , antd pro-component and @next-dev library (core/component/hooks/provider).\n\n\u003cdiv align=\"center\"\u003e\n\nAn out-of-box UI solution for enterprise applications as a React boilerplate.\n\n![Github Action](https://github.com/ant-design/ant-design-pro/workflows/Node%20CI/badge.svg) ![Deploy](https://github.com/ant-design/ant-design-pro/workflows/Deploy%20CI/badge.svg) [![Dependencies](https://img.shields.io/david/ant-design/ant-design-pro.svg)](https://david-dm.org/ant-design/ant-design-pro) [![Gitter](https://img.shields.io/gitter/room/ant-design/pro-english.svg?style=flat-square\u0026logoWidth=20\u0026logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/pro-english?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)[![Build With Umi](https://img.shields.io/badge/build%20with-umi-028fe4.svg?style=flat-square)](http://umijs.org/) ![](https://badgen.net/badge/icon/Ant%20Design?icon=https://gw.alipayobjects.com/zos/antfincdn/Pp4WPgVDB3/KDpgvguMpGfqaHPjicRK.svg\u0026label)\n\n![](https://user-images.githubusercontent.com/8186664/44953195-581e3d80-aec4-11e8-8dcb-54b9db38ec11.png)\n\n\u003c/div\u003e\n\n# Contents\n\n- [Project Structure](#Structure)\n- [Doc and Demo](#Document)\n- [Features](#Features)\n- [Installations](#Installation)\n- [Development / Script](#Development)\n- [Generator Antd Pro Templates](#Templates)\n- [Custom Generator CLI](#Generator/CLI)\n- [Tutorial / Usage](#Tutorial)\n- [Contributing](#Contributing)\n\n## Features\n\n[Back Contents](#Contents)\n\n- :bulb: **TypeScript**: A language for application-scale JavaScript\n- :scroll: **Blocks**: Build page with block template\n- :gem: **Neat Design**: Follow [Ant Design specification](http://ant.design/)\n- :triangular_ruler: **Common Templates**: Typical templates for enterprise applications\n- :rocket: **State of The Art Development**: Newest development stack of React/umi/dva/antd\n- :iphone: **Responsive**: Designed for variable screen sizes\n- :art: **Theming**: Customizable theme with simple config\n- :globe_with_meridians: **International**: Built-in i18n solution\n- :gear: **Best Practices**: Solid workflow to make your code healthy\n- :1234: **Mock development**: Easy to use mock development solution\n- :white_check_mark: **UI Test**: Fly safely with unit and e2e tests\n\n## Document\n\n[Back Contents](#Contents)\n\n- next-dev-boilerplate Preview: https://next-dev-boilerplate.vercel.app the every first time it will slow and it will remove photo except db we store on MLab and token because we use `Heroku` as free services.\n- next-dev library(processing): https://rimsila.github.io/next-dev/\n- Antd Pro Preview: https://preview.pro.ant.design/\n- Antd Pro Documentation: http://pro.ant.design/docs/getting-started -Antd Pro FAQ: http://pro.ant.design/docs/faq\n\n## Installation\n\n[Back Contents](#Contents)\n\n- `Node Js`: required \u003e=10.x: it is a JavaScript runtime environment download [Here](https://nodejs.org/en/download/).\n\n- `Yarn`: is package manager. shouldn't use mixup with npm the same one project.\n\n  ```bash\n    $ npm install -g yarn\n  ```\n\n- `serve`: for run production local.\n  ```bash\n    $ yarn global add serve\n  ```\n- `Yalc`: (required only who want to develop library see in .yalc folder) for develop npm library local and it separate project library (next-dev).\n\n  ```bash\n    $ yarn global add yalc\n  ```\n\n- `yeoman generator`: (required only who want to use CLI auto crete starter template)\n  ```bash\n    $ yarn global add yo\n  ```\n\n## Development\n\n[Back Contents](#Contents)\n\nuse Gitpod, a free online dev environment for GitHub.\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rimsila/next-dev-boilerplate)\n\nOr clone locally:\n\n```bash\n$ git clone https://github.com/rimsila/next-dev-boilerplate.git\n$ cd next-dev-boilerplate\n\n# install project node_module\n$ yarn install\n\n#  start development\n$ yarn start\n\n\n```\n\nOpen your browser and visit http://127.0.0.1:9000 or http://localhost:9000\n\n## Templates\n\n[Back Contents](#Contents)\n\n```\n- Dashboard\n  - Analytic\n  - Monitor\n  - Workspace\n- Form\n  - Basic Form\n  - Step Form\n  - Advanced From\n- List\n  - Standard Table\n  - Standard List\n  - Card List\n  - Search List (Project/Applications/Article)\n- Profile\n  - Simple Profile\n  - Advanced Profile\n- Account\n  - Account Center\n  - Account Settings\n- Result\n  - Success\n  - Failed\n- Exception\n  - 403\n  - 404\n  - 500\n- User\n  - Login\n  - Register\n  - Register Result\n```\n\n- Usage Template\n\n```bash\n$ yarn create umi  # or npm create umi\n\n  # Choose ant-design-pro:\n  Select the boilerplate type (Use arrow keys)\n  ❯\n    block           - Create a umi block.\n    library         - Create a library with umi.\n    plugin          - Create a umi plugin.\n\n```\n\n## Generator/CLI\n\n[Back Contents](#Contents)\n\n-(coming soon)\n\n- we using Yeoman generator for build different React components, creating a skeleton for the different files.\n\n  - create page with auto config route / page access / locale\n\n    ```bash\n      yarn page\n    ```\n\n  - create model / CRUD\n\n    ```bash\n      yarn model\n          or\n      yarn modelCr\n    ```\n\n  - create service / CRUD\n\n    ```bash\n    yarn com\n    ```\n\n  - create global component / specifics page folder / locale\n\n    ```bash\n    yarn com\n    ```\n\n## Structure\n\n[Back Contents](#Contents)\n\n```\nNext-Dev-Boilerplate\n|\n├── config -- Configuration files (routes, themes, plugins, etc.)\n│    └── plugin.config.ts --Plug-in configuration (such as less merge, unpacking)\n│    └── router.ts --Routing configuration (route, access page etc.)\n│    └── theme.config.ts --Theme configuration\n│    └── defaultSettings.ts - layout (theme color, title, whether to enable pwa, icon remote ,address)\n|\n├── src\n│    ├── components\n│    │   │\n│    │   ├── global -- For global component like button, tabs etc.\n│    │   │      └── Button\n│    │   │            ├──  index.tsx\n│    │   │            └── SubButton.tsx\n│    │   │\n│    │   └── pages -- Components for specific page also can share for another page\n│    │   │    ├── auth\n│    │   │    │    └── login\n│    │   │    │         └── index.tsx\n│    │   │    │         └── subLogin\n│    │   │    │                └── SubLogin.tsx\n│    │   │    └── dashboard\n│    │   │            └── index.tsx\n│    │   │            └── useDashBoard.tsx -- can use inline custom hook for logic\n│    │   │            └── report\n│    │   │                  └── SubReport.tsx\n│    │   └──index.ts -- export both components and pages as global share\n│    │\n│    └── hooks -- common custom hook (router etc )\n│    └── utils --common utilize (request,func, also extend from @next-dev/core)\n│    └── locales-- i18n localization (common locale can extend from @next-dev/provider)\n│    └── typings.d.ts -- global type for whole project\n│    └── themes -- style variable, mixin (can extend from @next-dev/component/styles)\n│    └── constants -- all constants common use here (env , routeApi, routePath)\n│    └── assets --resource file (image,font etc.)\n│    └── global.less -- global style file (will be automatically use)\n│    │\n│    └── pages -- import page from component/pages it already dynamic import in config\n│    │      ├── document.ejs -- the same CRA public/index.html\n│    │      ├── login\n│    │      ├── dashboard\n│    │      └─ 404.tsx --page not found\n│    │\n│    └── models -- global model start with useName (context with selector avoid re-render)\n│    └── services -- all api services here (services/userApi.ts)\n│    └── e2e -- e2e test\n│    └── app.tsx -- Root app but work only runtime (init core / provider / initGlobal State /layout)\n│    └── access.ts -- authority role permission to page\n│    └── wrappers -- is a HOC we use in route.ts\n│\n└── .umirc.ts -- Project Configuration also import from config\n└── tsconfig.jsons -- config for ts compile\n└── .env\n\n```\n\n## 🖥 Environment Support\n\n[Back Contents](#Contents)\n\n- Modern browsers and Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11))\n- Server-side Rendering\n- [Electron](https://www.electronjs.org/)\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png\" alt=\"Electron\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eElectron |\n| --- | --- | --- | --- | --- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n## Contributing\n\n[Back Contents](#Contents)\n\nAny type of contribution is welcome, here are some examples of how you may contribute to this project:\n\n- Use Ant Design Pro in your daily work.\n- Submit [issues](https://github.com/rimsila/next-dev-boilerplate/issues) to report bugs or ask questions.\n- Propose [pull requests](https://github.com/rimsila/next-dev-boilerplate/pulls) to improve our code.\n\n## Tutorial\n\n[Back Contents](#Contents)\n\n### State Management / useRequest + Axios\n\n- `useRequest + nextRequest( Custom Axios)`: useRequest with ahook provided loading refetch,data,onSuccess, onError etc and `nextRequest` it a utilize base on `Axios` it include global handler error and success, refresh token, global auth header, etc.\n  - `Example`\n\n```tsx\n//services/global.d.ts\nexport type IRegister = {\n  email: string;\n  password: string;\n};\n\n//services/users.ts\nimport { httpRequest } from '@/utils/httpRequest';\n\nexport const usersApi = {\n  register: (data: IRegister) =\u003e nextRequest.post(\"user/register, data),\n};\n\n//see the usage in Global State section\n\n```\n\n- Global State\n\n  - `useModel` must be inside folder model: it is a custom hooks that provide developer the ability to consume hooks model as global state and it can better performance with re-render on demand by it will select only what we need see the example bellow：\n\n```tsx | pure\n//models/useAuth.tsx see full example in folder model\nexport default function useAuthModel() {\n  /**\n   * register then redirect to login page\n   */\n\n  // * ------------ request async --------------\n  const {\n    run: runRegister, // call func with param of register api\n    data: registerData,\n    loading: loadingRegister, //loading\n    refresh: refreshRegister, // re-call runRegister\n  } = useRequest(usersApi.register, {\n    manual: true, // call runRegister manual\n    onSuccess: (res) =\u003e {\n      if (res?.status === 1) {\n        history.push('/login');\n      }\n    },\n  });\n\n  // * ------------ onSubmitRegister --------------\n  const onSubmitRegister = (value: any) =\u003e {\n    const registerModel = {\n      fullName: value?.user,\n      email: value?.email,\n      password: value?.password,\n      confirmPassword: value['confirm-password'],\n    };\n    runRegister(registerModel);\n  };\n\n  return {\n    onSubmitRegister,\n    registerData,\n    loadingRegister,\n  };\n}\n\n//page/register.tsx\nimport { useModel } from 'umi';\n\n/** @note\n *  useModel(name of file in model folder)\n *  for better performance should user updater function (like redux-selector) like bellow it will select\n *  only what we need to re-render on demand\n */\nconst { loadingRegister, logOut } = useModel('useAuth', (model) =\u003e ({\n  loadingRegister: model.loadingRegister,\n  logOut: model.logOut,\n}));\n\n//usage in component\nconsole.log(loadingRegister);\n//output: false-\u003etrue-\u003efalse\n\u003cButton onClick={logOut}\u003eLog out\u003c/Button\u003e;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frimsila%2Fnext-dev-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frimsila%2Fnext-dev-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frimsila%2Fnext-dev-template/lists"}