Topic: Materialize your Next.js project with MDBootstrap for React

Published 04.02.2019 Updated 18.02.2019

Jakub Mandra posted 2 weeks ago

Materialize your Next.js project with MDBootstrap for React

Think about the app where you create some files, write JS code, and then simply deploy it with no worries about routing. And by default, it is rendered on the server.

That's how the Next.js works.
It uses JavaScript and React with Node.js to build the app. Here are the features it offers to you as a developer:

Server-rendered by default
Automatic code splitting for faster page loads
Simple client-side routing (page based)
Webpack-based dev environment with Hot Module Replacement support
Able to implement with Express or any other Node.js HTTP server
Customizable with your own Babel and Webpack configurations

Since v.4.10.0 MDB React package supports SSR and tree-shaking, so it is the best time to mix those two cool products together.

I'm Jakub, I work as a Front-End Developer in MDBootstrap.com, and I want to share with you this quick guide on how to integrate MDBReact into your Next.js project.

Project setup

Before we start make sure you have Node.js installed on your machine. All you need to know, you can find here. Mine is 10.15.0

Initialize project with npm. Hit:

bash

npm init -y

Now we can install our dependencies vianpm We will of course need Next, React and ReactDOM to manage our Document Object Model. Also, we want to easily set our server code. We will use Express - fast and minimalist framework for Node.

bash

npm install --save next react react-dom express

Let's set up our simple server. Create server.js file in your root directory and simply paste below code there.

server.js

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
    const server = express()

    server.get('*', (req, res) => {
        return handle(req, res)
    })

    server.listen(3000, (err) => {
        if (err) throw err
        console.log('> Ready on http://localhost:3000')
    })
})
.catch((ex) => {
    console.error(ex.stack)
    process.exit(1)
})

Add a script to your package.json like this:

package.json

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
},

Now you can use Next.js for building your application. You can try this simple example:

Create pages folder inside your project root directory
Inside pages create those two simple files: index.js and register.js
You can set up routing by simply using `next/link` module
Your first Next.js app is now alive!

index.js

import Link from 'next/link';

const Index = () => (
    <div>
        <p>Hello Next.js</p>
        <Link href="/register">
            <a>Register</a>
        </Link>
    </div>
)

export default Index

register.js

import Link from 'next/link';

export default () => (
    <div>
        <div>Register page here.</div>
        <Link href="/">
            <a>Home</a>
        </Link>
    </div>
)

To run our server on development mode hit:

bash

npm run dev

Now you can open localhost:3000 in your browser to see your app running.

MDBReact setup

But we want to work with MDBootsrap UI components, right? We will use here the free version of mdbreact. We will have to import styles. NextJS supports importing `.css`, `.scss`, `.less`, `.styl` files with some external modules. You can read more in Next.js documentation.

For mdbreact purposes, we will use @zeit/next-css module. Also to support fonts and images imports we will need to install some additional plugins.

`next-fonts` made to manage font loading
next-images which will help with images
next-compose-plugins to simplify our configuration of plugins

bash

npm install --save mdbreact @zeit/next-css next-fonts next-images next-compose-plugins

Then we will have to set up our next configuration. Create next.config.js file in your project root directory and paste the code below.

next.config.js

const withCSS = require('@zeit/next-css');
const withFonts = require('next-fonts');
const withImages = require('next-images');
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins([withCSS, withFonts, withImages]);

From now we can use MDBootstrap styles and components in our application. You just simply need to import those styles in your desired component, like so:

import

import "@fortawesome/fontawesome-free/css/all.min.css";
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

Let's try it out in our index.js file. Let's replace the link with the material button.

Just like a button, you can place any of your custom React components or even a div within a Link.
The only requirement for components placed inside a Link is they should accept an onClick prop.

index.js

import "@fortawesome/fontawesome-free/css/all.min.css";
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import Link from 'next/link';

import { MDBBtn } from 'mdbreact';

const Index = () => (
    <div>
        <p>Hello Next.js</p>
        <Link href="/register">
            <MDBBtn>Register</MDBBtn>
        </Link>
    </div>
)

export default Index;

Problematic components

Nothing is perfect, Next.js uses its own routing modules, so we can't use NavLink from MDBReact, because it is implemented with react-router-dom, which Next doesn't support.

But we can handle it. We will use example Navbar component from mdbreact documentation.

Copy and paste the component's code into your index.js file
Replace MDBNavLink's with Next's Link
Attach class="nav-link" to the element

At the and MDBNavItem should look like below:

NavItem

<MDBNavItem>
    <Link href="/">
        <a className="nav-link">Home</a>
    </Link>
</MDBNavItem>

And the whole code for our basic Layout component:

index.js

import "@fortawesome/fontawesome-free/css/all.min.css";
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import Link from 'next/link';
import {
    MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavbarToggler, MDBCollapse, MDBFormInline,
    MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBContainer
} from "mdbreact";

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false
        };
    }

    toggleCollapse = () => {
        this.setState({ isOpen: !this.state.isOpen });
    }

    render() {
        return (
            <MDBNavbar color="indigo" dark expand="md">
                <MDBNavbarBrand>
                <strong className="white-text">Navbar</strong>
                </MDBNavbarBrand>
                <MDBNavbarToggler onClick={this.toggleCollapse} />
                <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
                <MDBNavbarNav left>
                    <MDBNavItem>
                    <Link href="/">
                        <a className="nav-link">Home</a>
                    </Link>
                    </MDBNavItem>
                    <MDBNavItem>
                    <Link href="/register">
                        <a className="nav-link">Register</a>
                    </Link>
                    </MDBNavItem>
                    <MDBNavItem>
                    <MDBDropdown>
                        <MDBDropdownToggle nav caret>
                        <span className="mr-2">Dropdown</span>
                        </MDBDropdownToggle>
                        <MDBDropdownMenu>
                        <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                        <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                        <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                        <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                        </MDBDropdownMenu>
                    </MDBDropdown>
                    </MDBNavItem>
                </MDBNavbarNav>
                <MDBNavbarNav right>
                    <MDBNavItem>
                    <MDBFormInline waves>
                        <div className="md-form my-0">
                        <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                        </div>
                    </MDBFormInline>
                    </MDBNavItem>
                </MDBNavbarNav>
                </MDBCollapse>
            </MDBNavbar>
        );
    }
}

export default Index;

Custom component

There is one more thing I want to discuss here. NextJS d have an index.js file like in React project (f.e. create-react-app) where you can import your styles, your App.js component and dive into code with no worries. You have to import styles etc every time you write a new component.

But it provides custom component to initialize pages. You can read more here.

Add _app.js file into your pages folder, and paste there below code. MyApp component automatically wraps up your pages during page initialization and attach our styles.

_app.js

import React from 'react';
import App, { Container } from 'next/app';
import "@fortawesome/fontawesome-free/css/all.min.css";
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

export default class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx)
        }

        return { pageProps };
    };

    render() {
        const { Component, pageProps } = this.props;

        return (
            <Container>
                <Component {...pageProps} />
            </Container>
        );
    }
}

Delete style imports from your index.js file and restart your application to see the magic happens.

I have built a simple starter for Next.js with MDBReact, which is called nextjs-with-mdbreact. And you can find it here, on my GitHub.
There is a custom App component, with external Layout component implementation, which we have coded together previously.

Don't hesitate to leave a comment. Every suggestion, mistake report, or 'pull request' is also kindly seen.

Keep hacking! :)

Write