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:
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.
Let's set up our simple server. Create server.js
file in your root directory and simply paste below code there.
Add a script to your package.json
like this:
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
andregister.js
- You can set up routing by simply using `next/link` module
- Your first Next.js app is now alive!
To run our server on development mode hit:
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 loadingnext-images
which will help with imagesnext-compose-plugins
to simplify our configuration of 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.
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:
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.
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'sLink
- Attach
class="nav-link"
to theelement
At the and MDBNavItem
should look like below:
And the whole code for our basic Layout component:
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
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.
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 acustom App
component, with externalLayout
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! :)
Hi,
How do I use my mdbreact pro into nextjs ? Your help very appreciate. Thanks