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();

1. 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

• mui/withParts

• 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.