Skip to content

ntamvl/nextjs-material-ui-example

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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:

.
├── LICENSE
├── README.md
├── 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}>
        <div>
          <Head>
            <title>Next.js 2 with Material-UI Example</title>
            <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
          </Head>

          <AppBar
            title="Page Title"
            iconClassNameRight="muidocs-icon-navigation-expand-more"
          />

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

        </div>
      </MuiThemeProvider>
    )
  }
}

Run Next.js app

npm run dev

Enjoy :D

About

Next.js 2 with Material-UI Example

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published