All Projects → luffyZh → Next Antd Scaffold

luffyZh / Next Antd Scaffold

Licence: mit
🏠 A simple scaffold based on Next.js for quick use with ant-design, redux, redux-saga, fetch and pm2.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Next Antd Scaffold

Getlink Next
Get Link!
Stars: ✭ 48 (-78.38%)
Mutual labels:  nextjs, ant-design
Node Blog
🔥✨ A react blog project base on nodejs, nestjs, mongoose, typescript, react, ant-design,nextjs
Stars: ✭ 69 (-68.92%)
Mutual labels:  nextjs, ant-design
Placeline Nextjs
HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku
Stars: ✭ 88 (-60.36%)
Mutual labels:  nextjs, ant-design
React Ant Admin
使用 ant-design react react-hook ts 开发的类 ant-design-pro 管理后台,具有完整的权限系统和配套的node + ts 的 api
Stars: ✭ 199 (-10.36%)
Mutual labels:  ant-design
Next Build Id
Easily set your `next build` BUILD_ID to the latest git commit hash
Stars: ✭ 203 (-8.56%)
Mutual labels:  nextjs
Margarita
[not actively maintained] Mobile and Web application implementing Kiwi.com Tequila API
Stars: ✭ 213 (-4.05%)
Mutual labels:  nextjs
Next Blog Firestore
Example of blog built with React, Next.js, Firebase Firestore, Styled-Component, Mobx State Tree and other cool technologies
Stars: ✭ 219 (-1.35%)
Mutual labels:  nextjs
Timelite
Why is it 5 AM? Isn't there something simple I can use to track what I'm doing with all this time?
Stars: ✭ 201 (-9.46%)
Mutual labels:  nextjs
Firebase Functions Next Example
Host a Next.js SSR React app on Cloud Functions for Firebase with Firebase Hosting
Stars: ✭ 215 (-3.15%)
Mutual labels:  nextjs
Connext Js
A middleware and route handling solution for Next.js.
Stars: ✭ 211 (-4.95%)
Mutual labels:  nextjs
Nobibi
一款基于Next.js+mongo的轻量级开源社区(open community by Next.js & mongo)
Stars: ✭ 209 (-5.86%)
Mutual labels:  nextjs
Kap
An open-source screen recorder built with web technology
Stars: ✭ 14,488 (+6426.13%)
Mutual labels:  nextjs
Ant Plus
🔺 Ant Design 表单简化版
Stars: ✭ 212 (-4.5%)
Mutual labels:  ant-design
Next Routes
Universal dynamic routes for Next.js
Stars: ✭ 2,354 (+960.36%)
Mutual labels:  nextjs
Useauth
The simplest way to add authentication to your React app. Supports various providers.
Stars: ✭ 2,532 (+1040.54%)
Mutual labels:  nextjs
Saas
Build your own SaaS business with SaaS boilerplate. Productive stack: React, Material-UI, Next, MobX, WebSockets, Express, Node, Mongoose, MongoDB. Written with TypeScript.
Stars: ✭ 2,720 (+1125.23%)
Mutual labels:  nextjs
Next Startd
⚡ Free Next.js landing page template for SaaS products, online services and more.
Stars: ✭ 211 (-4.95%)
Mutual labels:  nextjs
Antd Img Crop
🔪 An image cropper for Ant Design Upload
Stars: ✭ 207 (-6.76%)
Mutual labels:  ant-design
Mordred
[Experimental] Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.
Stars: ✭ 208 (-6.31%)
Mutual labels:  nextjs
Typescript Nextjs Starter
TypeScript starter for Next.js that includes all you need to build amazing apps ⚡️
Stars: ✭ 208 (-6.31%)
Mutual labels:  nextjs

A simple scaffold based on Next.js for quick use with ant-design, redux, redux-saga, fetch and pm2.

English | 简体中文

Deploy Status Join the community on Spectrum

🏠 HomePage

Next-Antd-Scaffold-Demo

If you like use the next version is 8.1.0. There is next-antd-scaffold_version8.

🌍 Browser Support

Chrome Edge Firefox IE Safari
Chrome 39.0+ ✔ Edge 12.0+ ✔ Firefox 30.0+ ✔ IE 11+ ✔ Safari 9.1+ ✔

📁 Directory

——————
  | -- assets                    // ant-design global less var
  | -- docs                      // documents directory
  | -- public                    // static files directory
      | -- static                // compatible with < version 9.0
      | -- favicon.ico           // some files examples like seo files
      | -- ...
  | -- src                       // source directory
      | -- components            // React UI component
      | -- constants             // constant directory
          | -- ActionsTypes.js   // save all action type
          | -- ApiUrlForBE.js    // save all apiUrl
          | -- ...
      | -- containers            // React container component
      | -- core                  // mehtod dirctory
          | -- util.js           // project method
          | -- nextFetch.js      // packing unfetch for easy use
      | -- middlewares           // middlewares
          | -- client            // client middlewares, deal redux action
          | -- server            // server middlewares, deal node event
      | -- pages                 // Next.js routes
      | -- redux                 // redux directory
          | -- actions           // deal all project actions
          | -- reducers          // deal all project reducers
          | -- sagas             // sace all project sagas
          | -- store.js          // the store of project
  | -- .babelrc              // babel config file
  | -- .eslintrc             // eslint config file
  | -- .gitignore
  | -- next.config.js        // Next.js config file
  | -- package.json
  | -- server.js             // server file
  | -- pm2.config.js         // pm2 deploy config file
  | ...                      // other files

📖 Usage

development

 1. git clone https://github.com/luffyZh/next-antd-scafflod.git
 2. yarn install
 3. yarn start

The application is ready on http://localhost:3006

production

 1. yarn build
 2. yarn prod

The application is ready on http://localhost:5999

✨ Features

  • React
  • Next.js
  • Redux
  • Redux-Saga
  • Ant-Design
  • Fetch

🔨 How to depoly application by pm2

# 1. install pm2
$ npm install -g pm2

# 2. build project
$ yarn build

# 3. pm2 deploy project
$ pm2 start pm2.config.js

🪂 Deploy By now

💐 More Demo

🤔️ More Questions

  • How to use cssModules in this scaffold?

  • How to listen for routing changes?

  • The solution of min-css-extract-plugin warning in the console!

  • How to polyfill IE10/IE9 in this scaffold?

  • The ant-design style flash when page refresh!

  • The solution of ant-design in the development environment style load is incomplete.

  • How to speed up packing in production?

...

Please check the Faq documentation

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].