NextJS

Server Rendered React and React Native

npm i material-bread

yarn add material-bread

The following guide is for setting up a minimal configuration for NextJSand Material Bread. Please see the example repo for the full code.

Package.json

Init a new project with a package.json like below

{
    "name": "material-bread-next",
    "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
    },
    "dependencies": {
        "babel-plugin-react-native-web": "^0.11.7",
        "material-bread": "^0.2.2",
        "next": "latest",
        "next-fonts": "^0.18.0",
        "next-transpile-modules": "^2.3.1",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "react-native-svg-web": "^1.0.1",
        "react-native-vector-icons": "^6.6.0",
        "react-native-web": "^0.11.6"
    }
}

Then run

npm i

next.config.js

Create the next.config.js to transpile packages, alias react native, and handle fonts.

const withTM = require('next-transpile-modules')
const withFonts = require('next-fonts')
module.exports = withFonts(
  withTM({
    transpileModules: ['material-bread', 'react-native-svg', 'react-native-vector-icons'],
    webpack: config => {
      config.resolve.extensions = ['.web.js', '.js']
      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        'react-native$': 'react-native-web',
        'react-native-svg$': 'react-native-svg-web'
      }
      return config
    }
  })
)

Also Create a file for the app name, app.json

{
    "name": "material-bread-next",
    "displayName": "material-bread-next"
}

Next Document

Create a pages/_document.js file as follows to register the app, setup Roboto, setup Material Icons, and finish setting up NextJs:

import Document, { Head, Main, NextScript } from 'next/document'
import React from 'react'
import { AppRegistry } from 'react-native'
import config from '../app.json'

const normalizeNextElements = `
html,
body,
#__next {
  height: 100%;
  font-family: Roboto, sans-serif;
}
@import url("https://fonts.googleapis.com/css?family=Roboto");
@font-face {
  src: url(/static/MaterialIcons.ttf);
  font-family: MaterialIcons;
}  
`

export default class MyDocument extends Document {
  static async getInitialProps({ renderPage }) {
    AppRegistry.registerComponent(config.name, () => Main)
    const { getStyleElement } = AppRegistry.getApplication(config.name)
    const page = renderPage()

    const styles = [<style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />, getStyleElement()]
    return { ...page, styles: React.Children.toArray(styles) }
  }

  render() {
    return (
      <html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Material Icons

The font-face for Material Icons above references a local MaterialIcons.ttf file. We can download this file from the react-native-vector-icons repo. Add this file to a new static folder at the root.

Create index.js

You should now able to create your first page with Material Bread components. Create pages/index.js as follows:

import React, { Component } from "react";
import { View } from "react-native";
import { Fab } from "material-bread";

class App extends Component {
    render() {
        return (
            <View>
                <Fab />
            </View>
        );
    }
}

export default App;

Simply wrap your app or root in the BreadProvider and start developing. You can learn about customizing on the theme page.

import React, { Component } from "react";
import Root from "./Root";
import { BreadProvider } from "material-bread";

export default class App extends Component {
  render() {
    return (
      <BreadProvider>
        <Root />
      </BreadProvider>
    );
  }
}

If you're confused, check out these example repos with Material Bread set up, graciously provided by @fortezhuo

NextJS Example

NextJS

Install #

Setup #

Package.json

next.config.js

Next Document

Material Icons

Create index.js

Usage #

Examples #