Next.js 2 with Material-UI Example

Init node project

mkdir nextjs-material-ui-example && cd nextjs-material-ui-example
npm init -y
npm i -S next react react-dom material-ui react-tap-event-plugin

with structure files:

├── package.json
└── pages
    └── index.js

Add script to package.json

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start",
  "test": "echo \"Error: no test specified\" && exit 1"

Create index page

mkdir pages && cd pages
touch index.js

with content in file index.js

import React                from 'react';
import Head                 from 'next/head';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider     from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme          from 'material-ui/styles/getMuiTheme';
import AppBar               from 'material-ui/AppBar';

try { injectTapEventPlugin(); } catch (e) {  }

const muiTheme = getMuiTheme({ userAgent: false });

export default class extends React.Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
            <title>Next.js 2 with Material-UI Example</title>
            <meta name="viewport" content="initial-scale=1.0, width=device-width"/>

            title="Page Title"

          <h1>Page content</h1>
          <p>Next.js 2 with Material-UI Example</p>


Run Next.js app

npm run dev

you can git clone source code at

Enjoy 😀