Skip to content
Demo about integration between examples of next.js and also fix some issues during development
JavaScript CSS
Branch: master
Clone or download
Latest commit d7fd4ca Jun 21, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
components init project Jun 15, 2017
middlewares init project Jun 15, 2017
pages init project Jun 15, 2017
reducer init project Jun 15, 2017
styles init project Jun 15, 2017
utils init project Jun 15, 2017
.babelrc init project Jun 15, 2017
index.js init project Jun 15, 2017
next.config.js init project Jun 15, 2017
package.json update next version Jun 21, 2017
postcss.config.js init project Jun 15, 2017
yarn.lock init project Jun 15, 2017

Fetching data with Material UI & Dynamic Import

This example allow you to fetch data from api get news from techcrunch using api service:

In this example, I use:

  • Babel config
  • PostCSS config
  • Webpack config: to add plugins allow develop CSS using SCSS
  • Redux
  • Material UI
  • Custom Document
  • Custom Server
  • Next Routes
  • Data fetching
  • Gulp
  • Dynamic import

Basically, Next.JS allow you to use style-jsx package to develop CSS, but in the production mode, html is not minified. I resolved it using gulp allow you to bundle final all scss into css & with postCSS to auto prefix the final css.

You can visit here to know detail about problems that I met during development:

Prefix Domain

go to utils/constants change prefix name whatever you want. In this demo, I choose /news. Then just browse to:


Note: Currently, there is no offical way to configure prefix in next.js. This demo worked well in next.js 3 beta version.



npm i nodemon -g


npm i
npm start


yarn install
yarn start



npm i
npm run production


yarn install
yarn run production


You can’t perform that action at this time.