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 [email protected]

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 [email protected]

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 [email protected]

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.