support _app.js; add withthemeApp example;

.babelrc

@@ -1,9 +1,20 @@
 {
   "presets": [
-    "next/babel"
+    "env",
+    "react"
   ],
   "plugins": [
+    "transform-class-properties",
+    "transform-object-rest-spread",
     "react-require",
+    [
+      "transform-runtime",
+      {
+        "helpers": false,
+        "polyfill": false,
+        "regenerator": true
+      }
+    ],
     [
       "module-resolver",
       {
@@ -24,5 +35,7 @@
       ]
     }
   },
-  "ignore": ["node_modules/**"]
+  "ignore": [
+    "node_modules/**"
+  ]
 }

.babelrc.dev

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    "react-require",
+    [
+      "module-resolver",
+      {
+        "root": [
+          "./src/"
+        ],
+        "alias": {
+          "material-ui": "@material-ui/core",
+          "src": "./src"
+        }
+      }
+    ]
+  ],
+  "ignore": ["node_modules/**"]
+}

.travis.yml

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - "6"
+  - "8"

README.md

@@ -55,6 +55,16 @@ 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.
+
+```jsx
+import makeNextApp from 'nextjs-mui-helper/nextjs/makeNextApp';
+
+export default makeNextApp();
+```
+
+
+
 ## Instructions
 
 * **nextjs/makeNextDocument**
@@ -72,6 +82,10 @@ That's it! Want to inject your own theme? See following instructions.
 | 3 |  enable nprogress | false | enable progress bar made by [nprogress](https://github.com/rstacruz/nprogress) |
 | 4 |  enable CssBaseline | true | enable material-ui's default [CssBaseline](https://material-ui-next.com/style/css-baseline/) |
 
+* **nextjs/makeNextApp**
+
+Same with withParts. But can be used to create a _app.js file.
+
 ## Examples
 
 You can find some examples under the [./example](/examples) folder.

examples/simple/src/pages/_app.js

@@ -0,0 +1,3 @@
+import { DefaultNextApp } from 'nextjs-mui-helper/nextjs/makeNextApp';
+
+export default DefaultNextApp;

examples/simple/src/pages/_document.js

@@ -1,3 +1,3 @@
-import makeNextDocument from 'nextjs-mui-helper/nextjs/makeNextDocument';
+import { DefaultNextDocument } from 'nextjs-mui-helper/nextjs/makeNextDocument';
 
-export default makeNextDocument();
+export default DefaultNextDocument;

examples/simple/src/pages/index.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import withParts from 'nextjs-mui-helper/mui/withParts';
 import Button from '@material-ui/core/Button';
 
 const Page1 = () => (
   <Button color="primary">
-    Hello World
+    Hello World, Page1!
   </Button>
 );
 
-export default withParts()(Page1);
+export default Page1;

examples/withTheme/src/client/hoc/withAll.js

@@ -3,4 +3,4 @@ import withParts from 'nextjs-mui-helper/mui/withParts';
 import CommonLayout from '../layout/CommonLayout';
 import theme from '../style/theme';
 
-export default withParts(theme, CommonLayout);
+export default withParts(theme, CommonLayout, true);

examples/withTheme/src/pages/index.js

@@ -1,12 +1,20 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
+import Link from 'next/link';
 
 import withAll from '../client/hoc/withAll';
 
 const Page1 = () => (
-  <Button color="primary">
-    Hello World
-  </Button>
+  <div>
+    <Button color="primary">
+      Hello World Page1!
+    </Button>
+    <div>
+      <Link href="/page2">
+        <Button>To Page2</Button>
+      </Link>
+    </div>
+  </div>
 );
 
 export default withAll(Page1);

examples/withTheme/src/pages/page2.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Link from 'next/link';
+
+import withAll from '../client/hoc/withAll';
+
+const Page2 = () => (
+  <div>
+    <Button color="primary">
+      Hello World Page2!
+    </Button>
+    <div>
+      <Link href="/">
+        <Button>To Page1</Button>
+      </Link>
+    </div>
+  </div>
+);
+
+export default withAll(Page2);

examples/withThemeApp/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

examples/withThemeApp/.gitignore

@@ -0,0 +1,8 @@
+# build output
+npm-debug.log
+.next/
+
+# dependencies
+node_modules/
+
+yarn.lock

examples/withThemeApp/README.md

@@ -0,0 +1,13 @@
+## Description
+
+Example of inject theme and layout with nextjs-mui-helper by using _app.js.
+
+## How to use
+
+[clone the repo](https://github.com/thundermiracle/nextjs-mui-helper)
+
+```sh
+cd examples/withTheme
+npm install    (yarn)
+npm run dev    (yarn run dev)
+```

examples/withThemeApp/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "withthemeapp",
+  "version": "1.0.0",
+  "description": "example of inject theme and layout with nextjs-mui-helper and using app.js instead of hoc",
+  "scripts": {
+    "dev": "next ./src"
+  },
+  "author": "thundermiracle",
+  "license": "MIT",
+  "dependencies": {
+    "@material-ui/core": "latest",
+    "@material-ui/icons": "latest",
+    "next": "latest",
+    "nextjs-mui-helper": "latest",
+    "prop-types": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  }
+}

examples/withThemeApp/src/client/layout/CommonLayout.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+
+const styles = {
+  root: {
+    flexGrow: 1,
+  },
+  flex: {
+    flex: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+};
+
+function ButtonAppBar(props) {
+  const { classes, children } = props;
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="title" color="inherit" className={classes.flex}>
+            Title
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      {children}
+    </div>
+  );
+}
+
+ButtonAppBar.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.any,
+};
+
+ButtonAppBar.defaultProps = {
+  children: null,
+};
+
+export default withStyles(styles)(ButtonAppBar);

examples/withThemeApp/src/client/style/theme.js

@@ -0,0 +1,10 @@
+import { deepOrange, teal } from '@material-ui/core/colors';
+
+const theme = {
+  palette: {
+    primary: deepOrange,
+    secondary: teal,
+  },
+};
+
+export default theme;

examples/withThemeApp/src/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  distDir: '../.next',
+};

examples/withThemeApp/src/pages/_app.js

@@ -0,0 +1,6 @@
+import makeNextApp from 'nextjs-mui-helper/nextjs/makeNextApp';
+
+import CommonLayout from '../client/layout/CommonLayout';
+import theme from '../client/style/theme';
+
+export default makeNextApp(theme, CommonLayout, true);

examples/withThemeApp/src/pages/_document.js

@@ -0,0 +1,5 @@
+import makeNextDocument from 'nextjs-mui-helper/nextjs/makeNextDocument';
+
+import theme from '../client/style/theme';
+
+export default makeNextDocument(theme);

examples/withThemeApp/src/pages/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Link from 'next/link';
+
+const Page1 = () => (
+  <div>
+    <Button color="primary">
+      Hello World Page1!
+    </Button>
+    <div>
+      <Link href="/page2">
+        <Button>To Page2</Button>
+      </Link>
+    </div>
+  </div>
+);
+
+export default Page1;

examples/withThemeApp/src/pages/page2.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Link from 'next/link';
+
+const Page2 = () => (
+  <div>
+    <Button color="primary">
+      Hello World Page2!
+    </Button>
+    <div>
+      <Link href="/">
+        <Button>To Page1</Button>
+      </Link>
+    </div>
+  </div>
+);
+
+export default Page2;

package.json

@@ -1,15 +1,15 @@
 {
   "name": "nextjs-mui-helper",
   "version": "1.0.2",
-  "description": "hocs for making material-ui project with nextjs(SSR)",
+  "description": "hocs for making material-ui project with next.js(SSR)",
   "main": "./src/mui/withParts.js",
   "scripts": {
     "eslint": "eslint ./src",
-    "build:rm": "rimraf dist/",
+    "build:rm": "rm -rf dist/",
     "build:cp": "node ./scripts/copyFiles dist/ package.json README.md LICENSE",
-    "build": "npm run build:rm && NODE_ENV=production babel src --out-dir ./dist && npm run build:cp",
+    "build": "npm run build:rm && NODE_ENV=production babel src --compact=true --out-dir ./dist && npm run build:cp",
     "jest": "jest",
-    "dev": "next ./src",
+    "dev": "next",
     "test": "npm run eslint && npm run jest"
   },
   "repository": {
@@ -24,10 +24,10 @@
     "util"
   ],
   "dependencies": {
-    "jss": "^9.5.1",
+    "jss": "^9.8.7",
     "nprogress": "^0.2.0",
     "ramda": "^0.25.0",
-    "react-jss": "^8.2.1"
+    "react-jss": "^8.6.1"
   },
   "peerDependencies": {
     "@material-ui/core": "^1.0 || ^3.0",
@@ -45,7 +45,7 @@
     "babel-plugin-react-require": "^3.0.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -59,11 +59,10 @@
     "eslint-plugin-react": "^7.8.2",
     "jest": "^23.5.0",
     "next": "^6.1.2",
-    "prop-types": "^15.6.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "regenerator-runtime": "^0.12.1",
-    "rimraf": "^2.6.2"
+    "prop-types": "^15.6.2",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0",
+    "regenerator-runtime": "^0.12.1"
   },
   "jest": {
     "transform": {}

pages/_app.js

@@ -0,0 +1,3 @@
+import { DefaultNextApp } from '../src/nextjs/makeNextApp';
+
+export default DefaultNextApp;

pages/_document.js

@@ -0,0 +1,3 @@
+import { DefaultNextDocument } from '../src/nextjs/makeNextDocument';
+
+export default DefaultNextDocument;