next-mui-helper

Description

material-ui version support

version	material-ui's version
~0.2.8	material-ui@beta
~2.0.0	@material-ui 1.0 ~ 3.9.4
3.0.0~	@material-ui 4.0.0 ~

next-mui-helper is a package for making a project with next.js and material-ui easier.

There are several steps to enable SSR in next.js with material-ui which may be little bit confusing for beginners to implement.

This package wraps those steps and you can achieve the goal with only two steps.

Used By

• next-boilerplate simple boilerplate of next.js. With material-ui, google analytics, customizable export, simple layout support.

• react-sunflower drawing sunflower by using next.js.

Installation

next-mui-helper is available as an npm package.

npm install --save next-mui-helper

!!Important!! from next@9.0.0

As described here, next.js@9 needs ES6 Class syntax in server side but transpiled one in client.

So you MUST use files in es6 folder and tell webpack to transpiled it in client.

Steps from next@9.0.0

Full example is here

1. use ES6 module in _document.js and _app.js;

   import { makeNextDocument } from 'next-mui-helper/es';
    
   export default makeNextDocument();

   import { makeNextApp } from 'next-mui-helper/es';
    
   export default makeNextApp();

2. include next-mui-helper in next.config.js for transpile(by using next-transpile-modules)

   const withTM = require('next-transpile-modules');
    
   module.exports = withTM({
     transpileModules: ['next-mui-helper'],
   });

Steps until next@8.0.0

1. Create _document.js in the pages folder.

   import { makeNextDocument } from 'next-mui-helper';
    
   export default makeNextDocument();

2. Create _app.js in the pages folder.

   import { makeNextApp } from 'next-mui-helper';
    
   export default makeNextApp();

That's it! Want to inject your own theme? See following instructions.

About step2, without make a _app.js file, you also can inject theme by hoc.

import React from 'react';
import { withParts } from 'next-mui-helper';
import Button from '@material-ui/core/Button';
 
const Page1 = () => (
  <Button color="primary">
    Hello World
  </Button>
);
 
export default withParts()(Page1);

Instructions

You can import functions from next-mui-helper/es if ES6 is preferable.

• makeNextDocument

No.	Parameter	Default	Description
1	muiTheme	{ palette: { primary: blue, secondary: pink, }, }	material-ui's theme object
2	Document	next/document

• makeNextApp

No.	Parameter	Default	Description
1	muiTheme	{ palette: { primary: blue, secondary: pink, }, }	material-ui's theme object
2	layout	null	Layout component(like <Layout>{childrend}</Layout>)
3	enable nprogress	false	enable progress bar made by nprogress
4	enable CssBaseline	true	enable material-ui's default CssBaseline
5	App	next/app

• withParts

No.	Parameter	Default	Description
1	muiTheme	{ palette: { primary: blue, secondary: pink, }, }	material-ui's theme object
2	layout	null	Layout component(like <Layout>{childrend}</Layout>)
3	enable nprogress	false	enable progress bar made by nprogress
4	enable CssBaseline	true	enable material-ui's default CssBaseline

• withProgressBar | No. | Parameter | Default | Description | |:---|:-------------:|:--------------|:-----------| | 1 | BaseComponent | | add NProgress bar to BaseComponent |

• useThemeManagerContext hook for manage theme.

No.	Parameter	Default	Description
1			returns theme object and setTheme(theme). call setTheme(theme) to change the project's theme

• withThemeManager hoc to inject theme object and setTheme(theme) function

• deepCompareObj deep compare two objects, return true if they're the same.

Examples

You can find some examples under the ./example folder.

OR

Open them in CodeSandbox:

1. simple:　[simple] in CodeSandbox

2. withTheme:　[withTheme] in CodeSandbox

3. withThemeApp:　[withThemeApp] in CodeSandbox

4. use ES6:　[ES6] in CodeSandbox

5. withRedux:　[withRedux] in CodeSandbox

License

This project is licensed under the terms of the MIT license.