luffyzh / next-antd-scaffold Goto Github PK

View Code? Open in Web Editor NEW

292.0 9.0 57.0 2.4 MB

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

Home Page: https://next-antd-scaffold.luffyzh.now.sh/

License: MIT License

JavaScript 98.59% Dockerfile 0.60% CSS 0.72% Shell 0.09%

react nextjs redux ant-design next

next-antd-scaffold's Introduction

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

English | 简体中文

🏠 HomePage

Next-Antd-Scaffold-Demo

If you like use the next version is lower version 11. Please check more version from there 🌲 Versions History.

🌍 Browser Support


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
          | -- ...
      | -- 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

🌲 Versions History

next_version_11

webpack 5

next_version_10

All hooks API (Component/Redux)

next_verion_9.3.5

next_verion_8.1.0

💐 More Demo

Full Stack Demo —— Branch_backend
Auth && Verify Demo —— Branch_auth
Server Error Demo —— Branch_server-error

🤔️ More Questions

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

next-antd-scaffold's People

Contributors

Stargazers

Watchers

next-antd-scaffold's Issues

the ssr doesnt load the css

the antd css doesnt apply to the elment in ssr render

能否加入antd v4 的动态切换light / dark 主题色功能?

类似 https://next.ant.design/components/button-cn/ 中的功能:

Ant design style flash when page refresh and low performance

hi @luffyZh, sorry for this open issue, anyway it is not completely related to your repo! (:

i'm working with next js and with and-design i have several issues:

the ant-design ui flashing when page refresh, i use css modules
poor performance

you can help me to fix? I add my code: https://codesandbox.io/s/priceless-heyrovsky-0pu29?file=/pages/index.js

github page 上部署后路由无法跳转

// next.config.js

    assetPrefix: '/amai_mayoi.github.io/',
    publicRuntimeConfig: {
      staticFolder: '/amai_mayoi.github.io/static',
      linkPrefix: '/amai_mayoi.github.io',
      isDev, 
    }

// 使用了Link的地方

<ul>
  <Link href='/' passHref as={`${linkPrefix}/`}>
    <li>
      <a>
        <span>首页</span>
      </a>
    </li>
  </Link>
  <Link href='/about' passHref as={`${linkPrefix}/about`}>
    <li>
      <a>
        <span>关于我</span>
      </a>
    </li>
  </Link>
</ul>

然后 next export 在 gh page（不使用 jekyll）部署后，如果我是地址输入首页（index）地址进入的话是可以点击链接路由跳转到 about 的，但是如果从 about 页面进入的话则无法点击链接进入首页。这个问题在本地环境没有出现。

Unexpected token: punc ())

Hi!
I cloned the 8 version.
when type yarn run build I get the error above unexpected token punc ()). I tryed find the solution on google, stackoverflow, etc. But no success.

I changed the next.config to target: 'serverless'

Some idea?

为啥要集成redux呢

服务端渲染感觉集成graphql 更好一点，redux更适合 spa 应用