next-mui-helper

Description

material-ui version support

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

• makeNextApp

• withParts

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

• useThemeManagerContext hook for manage 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

6. changeTheme:　[changeTheme] in CodeSandbox

License

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