April 5, 2017 | Tam Nguyen 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 you can git clone source code at https://github.com/ntamvl/nextjs-material-ui-example Enjoy 😀 Share this:Click to share on Twitter (Opens in new window)Click to share on Facebook (Opens in new window)Click to share on Google+ (Opens in new window) Related