1.0.2 • Published 6 years ago

nextjs-mui-helper v1.0.2

Weekly downloads
4
License
MIT
Repository
github
Last release
6 years ago

nextjs-mui-helper

npm version Build Status dependencies Status devDependencies Status peerDependencies Status

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
No.ParameterDefaultDescription
1muiTheme{ palette: { primary: blue, secondary: pink, }, }material-ui's theme object
  • mui/withParts
No.ParameterDefaultDescription
1muiTheme{ palette: { primary: blue, secondary: pink, }, }material-ui's theme object
2layoutnullLayout component(like <Layout>{childrend}</Layout>)
3enable nprogressfalseenable progress bar made by nprogress
4enable CssBaselinetrueenable 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.

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-rc.4

6 years ago

1.0.0-rc.3

6 years ago

1.0.0-rc.2

6 years ago

1.0.0-rc.1

6 years ago

1.0.0-rc.0

6 years ago

0.2.8

6 years ago

0.2.7

6 years ago

0.2.6

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago