MDB React & Next.js integration

How to use React with Next.js - free starter

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 (14.6.x or higher).

Create a new Next.js app and navigate to its directory

npx create-next-app@latest
cd my-app
MDB installation

Step 1

Install MDB and Font Awesome

npm i mdb-react-ui-kit
npm i @fortawesome/fontawesome-free

Step 2

CSS import

Add these lines in app/layout.tsx file. 

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

Roboto font (optional)

Copy the code from this snippet to change font: 

import 'mdb-react-ui-kit/dist/css/mdb.min.css'
import "@fortawesome/fontawesome-free/css/all.min.css"
import { Roboto } from "next/font/google";

const roboto = Roboto({ weight: "400", subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={roboto.className}>{children}</body>
    </html>
  );
}

Step 3

Launch your app.

npm run dev

Prerequisites

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

Create a new Next.js app and navigate to its directory

npx create-next-app@latest
cd my-app
MDB installation

Step 1

Install MDB and Font Awesome

npm i mdb-react-ui-kit
Install Font Awesome.

CSS import

Add these 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 (optional)

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 app/page.tsx or pages/index.js and try the following example.

import React from 'react';
import { MDBCarousel, MDBCarouselItem, MDBCarouselCaption } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBCarousel showIndicators showControls fade>
      <MDBCarouselItem itemId={1}>
        <img src='https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg' className='d-block w-100' alt='...' />
        <MDBCarouselCaption>
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </MDBCarouselCaption>
      </MDBCarouselItem>

      <MDBCarouselItem itemId={2}>
        <img src='https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg' className='d-block w-100' alt='...' />
        <MDBCarouselCaption>
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </MDBCarouselCaption>
      </MDBCarouselItem>

      <MDBCarouselItem itemId={3}>
        <img src='https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg' className='d-block w-100' alt='...' />
        <MDBCarouselCaption>
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </MDBCarouselCaption>
      </MDBCarouselItem>
    </MDBCarousel>
  );
}

Troubleshooting

When using a component which refers to window, document or any object undefined on the server side, this error may show up: 

ReferenceError: window is not defined

The solution is to use our MDBClientOnly component, or a dynamic import with SSR disabled for problematic components. 

import { MDBClientOnly, MDBModal } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBClientOnly>
      <MDBModal open={true}>
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>Modal title</MDBModalTitle>
              <MDBBtn className='btn-close' color='none' onClick={toggleOpen}></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>...</MDBModalBody>

            <MDBModalFooter>
              <MDBBtn color='secondary' onClick={toggleOpen}>
                Close
              </MDBBtn>
              <MDBBtn>Save changes</MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </MDBClientOnly>
  )
}
import dynamic from 'next/dynamic'

const MDBModal = dynamic(() => import('mdb-react-ui-kit').then((mod) => mod.MDBModal), { ssr: false })