MDB React & Next.js integration

MDB React & Next.js integration

MDB React integration with Next.js. Installation, various examples of implementation and much more.

Lets see how to integrate Next.js with MDB 5 across our layout, components, and utilities.

Creating Next.js app

Prerequisites

Before starting the project make sure to install Node LTS (12.x.x or higher).

Step 1

Create a new Next.js app.

You can learn more about Next.js in their official documentation.

        
            
      npx create-next-app@latest

Step 2

Navigate to app's directory.

        
            
      cd my-app

MDB installation

Step 1

Setup MDB.

        
            
      npm i mdb-react-ui-kit

Font Awesome

Install Font Awesome. 

        
            
        npm i @fortawesome/fontawesome-free

CSS import

Add the following lines in pages/_app.js file. 

        
            
        import 'mdb-react-ui-kit/dist/css/mdb.min.css'
        import "@fortawesome/fontawesome-free/css/all.min.css"

Roboto font

Create a custom pages/_document.js and import Roboto font in the head section.

You can read more about Document in the official Next.js documentation.

        
            
    import { Html, Head, Main, NextScript } from 'next/document'

    export default function Document() {
      return (
        <Html>
          <Head>
            <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }

Set font family globally in styles/globals.css as in the example: 

        
            
      body {
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }

Step 2

Launch your app.

        
            
      npm run dev

Usage

To use MDB React inside your Next.js app simply navigate to pages/index.js and try the following example.

        
            
    import React from 'react'
    import { MDBCarousel, MDBCarouselItem } from 'mdb-react-ui-kit'
    
    export default function HomePage() {
      return (
        <MDBCarousel showIndicators showControls fade>
          <MDBCarouselItem
            className='w-100 d-block'
            itemId={1}
            src='https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg'
            alt='...'>
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </MDBCarouselItem>
          <MDBCarouselItem
            className='w-100 d-block'
            itemId={2}
            src='https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg'
            alt='...'>
            <h5>Second slide label</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </MDBCarouselItem>
          <MDBCarouselItem
            className='w-100 d-block'
            itemId={3}
            src='https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg'
            alt='...'>
            <h5>Third slide label</h5>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </MDBCarouselItem>
        </MDBCarousel>
      )
    }