nextjs-mui-helper

Description

ONLY Support @material-ui/core. If you want to use material-ui@beta version, please use v0.2.8 instead.

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

There are several steps to enable SSR in nextjs 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.

Installation

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

npm install --save nextjs-mui-helper

Steps

1. Create a _document.js under the pages folder.

import makeNextDocument from 'nextjs-mui-helper/nextjs/makeNextDocument';

export default makeNextDocument();

2. Use hoc to inject material-ui to your page. Example: make a page1.js under pages folder.

import React from 'react';
import withParts from 'nextjs-mui-helper/mui/withParts';
import Button from 'material-ui/Button';

const Page1 = () => (
  <Button color="primary">
    Hello World
  </Button>
);

export default withParts()(Page1);

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

About step2, you also can create a _app.js under the pages folder.

import makeNextApp from 'nextjs-mui-helper/nextjs/makeNextApp';

export default makeNextApp();

Instructions

• nextjs/makeNextDocument

| No. | Parameter | Default | Description | |:---|:-------------:|:--------------|:-----------| | 1 | muiTheme | { palette: { primary: blue, secondary: pink, }, } | material-ui's theme object |

• mui/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 |

• nextjs/makeNextApp

Same with withParts. But can be used to create a _app.js file.

Examples

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

License

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