Skip to content
๐Ÿ  A simple scaffold based on Next.js for quick use with ant-design, redux, redux-saga, fetch and pm2.
JavaScript CSS Dockerfile
Branch: master
Clone or download
Latest commit 2fa4ffa Jan 9, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets layout-css Nov 13, 2019
docs update FAQ Dec 9, 2019
public add dockerfile Jan 9, 2020
src change layout Jan 2, 2020
.babelrc remove babel decorator Mar 26, 2019
.browserslistrc add browserslist Nov 26, 2019
.dockerignore add dockerfile Jan 9, 2020
.editorconfig update readme Jan 17, 2019
.eslintignore add eslint Sep 1, 2018
.eslintrc add eslint rule Aug 15, 2019
.gitignore update package May 27, 2019
.prettierignore add prettier config Jan 22, 2019
.prettierrc.js add prettier config Jan 22, 2019
Dockerfile add dockerfile Jan 9, 2020
LICENSE add MIT license Jan 13, 2019
README.md update readme Dec 31, 2019
README_zh_CN.md update readme Dec 31, 2019
next.config.js optimize css Nov 4, 2019
package.json add browserslist Nov 26, 2019
pm2.config.js friendly english May 14, 2019
server.js node console Dec 11, 2019
yarn.lock change layout Jan 2, 2020

README.md

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.

๐Ÿ“ 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

You canโ€™t perform that action at this time.