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
Permalink
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
.gitignore
README.md
gulpfile.js
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
routes.js
server.js
store.js
yarn.lock init project Jun 15, 2017

README.md

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

You can’t perform that action at this time.