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 (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 })