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