Fetching data with Material UI & Dynamic Import

This example allow you to fetch data from api get news from techcrunch using api service: https://newsapi.org/.

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:

https://medium.com/@nndung179/next-js-at-chotot-ca9c1520f436

Prefix Domain

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

http://localhost:3000/news

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

development

require

npm i nodemon -g

npm

npm i
npm start

yarn

yarn install
yarn start

production

npm

npm i
npm run production

yarn

yarn install
yarn run production

Reference

• https://github.com/zeit/next.js/