Skip to main content
  1. All Posts/

zwap-ecommerce-nextjs

eCommerce CSS

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/