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
-
use ES6 module in
_document.jsand_app.js;import { makeNextDocument } from 'next-mui-helper/es'; export default makeNextDocument();import { makeNextApp } from 'next-mui-helper/es'; export default makeNextApp(); -
include next-mui-helper in
next.config.jsfor 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
-
Create _document.js in the pages folder.
import { makeNextDocument } from 'next-mui-helper'; export default makeNextDocument(); -
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:
-
simple: [simple] in CodeSandbox
-
withTheme: [withTheme] in CodeSandbox
-
withThemeApp: [withThemeApp] in CodeSandbox
-
use ES6: [ES6] in CodeSandbox
-
withRedux: [withRedux] in CodeSandbox
-
changeTheme: [changeTheme] in CodeSandbox
License
This project is licensed under the terms of the
MIT license.