├── .gitignore
├── README.md
├── next.config.js
├── package.json
├── public
    └── favicon.ico
└── src
    ├── assets
        └── mdb-react-small.png
    ├── components
        ├── Carousel.js
        ├── Footer.js
        ├── Layout.js
        └── NavBar.js
    └── pages
        ├── _app.js
        ├── index.js
        └── register.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | .env*
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # lock files
28 | package-lock.json
29 | yarn.lock


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | <img src='https://github.com/JakubChm/nextjs-mdbreact/blob/master/src/assets/mdb-react-small.png?raw=true'  alt='mdbreact' align='center'>
 3 | <br/>
 4 | <h1>MDB React & Next.js 9.3</h1>
 5 | <h2>MDBReact with create-next-app integration example.</h2>
 6 | <h2>MDBReact v.4.25.5</h2>
 7 | 
 8 | </div>
 9 | 
10 | ## Project setup
11 | 
12 | ```
13 | yarn install
14 | ```
15 | 
16 | ### Compiles and hot-reloads for development
17 | 
18 | ```
19 | yarn dev
20 | ```
21 | 
22 | ### Compiles and minifies for production
23 | 
24 | ```
25 | yarn build
26 | ```
27 | 
28 | ### Lints and hot-reloads for production
29 | 
30 | ```
31 | yarn start
32 | ```
33 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const withFonts = require('next-fonts');
2 | const withImages = require('next-images');
3 | const withPlugins = require('next-compose-plugins');
4 | 
5 | module.exports = withPlugins([withFonts, withImages]);
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-mdb",
 3 |   "version": "4.25.3",
 4 |   "description": "Integration example for MDBReact and Next.js create-next-app",
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "author": "Jakub Chmura",
11 |   "repository": "https://github.com/JakubChm/nextjs-mdbreact.git",
12 |   "license": "MIT",
13 |   "dependencies": {
14 |     "express": "^4.17.1",
15 |     "mdbreact": "^4.25.5",
16 |     "next": "^9.3.4",
17 |     "next-compose-plugins": "^2.2.0",
18 |     "next-fonts": "^1.0.3",
19 |     "next-images": "^1.4.0",
20 |     "react": "^16.13.1",
21 |     "react-dom": "^16.13.1"
22 |   }
23 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakubchmura/nextjs-mdbreact/59b8ac122eb7bc59dbc65014cf2ae7fa9852729c/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/mdb-react-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakubchmura/nextjs-mdbreact/59b8ac122eb7bc59dbc65014cf2ae7fa9852729c/src/assets/mdb-react-small.png


--------------------------------------------------------------------------------
/src/components/Carousel.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   MDBCarousel,
 3 |   MDBCarouselCaption,
 4 |   MDBCarouselInner,
 5 |   MDBCarouselItem,
 6 |   MDBView,
 7 |   MDBMask,
 8 |   MDBContainer
 9 | } from 'mdbreact';
10 | 
11 | const Carousel = () => {
12 |   return (
13 |     <MDBContainer className='mt-5'>
14 |       <MDBCarousel
15 |         activeItem={1}
16 |         length={3}
17 |         showControls={true}
18 |         showIndicators={true}
19 |         className='z-depth-1'
20 |       >
21 |         <MDBCarouselInner>
22 |           <MDBCarouselItem itemId='1'>
23 |             <MDBView>
24 |               <img
25 |                 className='d-block w-100'
26 |                 src='https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg'
27 |                 alt='First slide'
28 |               />
29 |               <MDBMask overlay='black-light' />
30 |             </MDBView>
31 |             <MDBCarouselCaption>
32 |               <h3 className='h3-responsive'>Light mask</h3>
33 |               <p>First text</p>
34 |             </MDBCarouselCaption>
35 |           </MDBCarouselItem>
36 |           <MDBCarouselItem itemId='2'>
37 |             <MDBView>
38 |               <img
39 |                 className='d-block w-100'
40 |                 src='https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg'
41 |                 alt='Second slide'
42 |               />
43 |               <MDBMask overlay='black-strong' />
44 |             </MDBView>
45 |             <MDBCarouselCaption>
46 |               <h3 className='h3-responsive'>Strong mask</h3>
47 |               <p>Second text</p>
48 |             </MDBCarouselCaption>
49 |           </MDBCarouselItem>
50 |           <MDBCarouselItem itemId='3'>
51 |             <MDBView>
52 |               <img
53 |                 className='d-block w-100'
54 |                 src='https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg'
55 |                 alt='Third slide'
56 |               />
57 |               <MDBMask overlay='black-slight' />
58 |             </MDBView>
59 |             <MDBCarouselCaption>
60 |               <h3 className='h3-responsive'>Slight Mast</h3>
61 |               <p>Third text</p>
62 |             </MDBCarouselCaption>
63 |           </MDBCarouselItem>
64 |         </MDBCarouselInner>
65 |       </MDBCarousel>
66 |     </MDBContainer>
67 |   );
68 | };
69 | 
70 | export default Carousel;
71 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MDBIcon, MDBContainer, MDBFooter } from 'mdbreact';
 3 | 
 4 | const FooterPage = () => {
 5 |   return (
 6 |     <MDBFooter
 7 |       color='blue'
 8 |       className='font-small py-3 mt-4 footer-copyright text-center'
 9 |     >
10 |       <MDBContainer fluid>
11 |         &copy; {new Date().getFullYear()} Copyright:
12 |         <a href='https://www.mdbootstrap.com'> MDBootstrap.com </a>
13 |         <MDBIcon fab icon='mdb' />
14 |       </MDBContainer>
15 |     </MDBFooter>
16 |   );
17 | };
18 | 
19 | export default FooterPage;
20 | 


--------------------------------------------------------------------------------
/src/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import { MDBContainer } from 'mdbreact';
 2 | import NavBar from './NavBar';
 3 | import Footer from './Footer';
 4 | 
 5 | function Layout(props) {
 6 |   return (
 7 |     <>
 8 |       <NavBar />
 9 |       <MDBContainer>{props.children}</MDBContainer>
10 |       <Footer />
11 |       <style jsx global>{`
12 |         #__next {
13 |           min-height: 100vh;
14 |           display: flex;
15 |           flex-direction: column;
16 |           justify-content: space-between;
17 |         }
18 |       `}</style>
19 |     </>
20 |   );
21 | }
22 | 
23 | export default Layout;
24 | 


--------------------------------------------------------------------------------
/src/components/NavBar.js:
--------------------------------------------------------------------------------
  1 | import Link from 'next/link';
  2 | import {
  3 |   MDBNavbar,
  4 |   MDBNavbarBrand,
  5 |   MDBNavbarNav,
  6 |   MDBNavItem,
  7 |   MDBNavbarToggler,
  8 |   MDBCollapse,
  9 |   MDBFormInline,
 10 |   MDBDropdown,
 11 |   MDBDropdownToggle,
 12 |   MDBDropdownMenu,
 13 |   MDBDropdownItem
 14 | } from 'mdbreact';
 15 | 
 16 | class Layout extends React.Component {
 17 |   constructor(props) {
 18 |     super(props);
 19 |     this.state = {
 20 |       isOpen: false
 21 |     };
 22 |   }
 23 | 
 24 |   toggleCollapse = () => {
 25 |     this.setState({ isOpen: !this.state.isOpen });
 26 |   };
 27 | 
 28 |   render() {
 29 |     return (
 30 |       <>
 31 |         <MDBNavbar color='indigo' dark expand='md'>
 32 |           <MDBNavbarBrand>
 33 |             <strong className='white-text'>Navbar</strong>
 34 |           </MDBNavbarBrand>
 35 |           <MDBNavbarToggler onClick={this.toggleCollapse} />
 36 |           <MDBCollapse id='navbarCollapse3' isOpen={this.state.isOpen} navbar>
 37 |             <MDBNavbarNav left>
 38 |               <MDBNavItem>
 39 |                 <Link href='/'>
 40 |                   <a className='nav-link'>Home</a>
 41 |                 </Link>
 42 |               </MDBNavItem>
 43 |               <MDBNavItem>
 44 |                 <Link href='/register'>
 45 |                   <a className='nav-link'>Register</a>
 46 |                 </Link>
 47 |               </MDBNavItem>
 48 |               <MDBNavItem>
 49 |                 <MDBDropdown>
 50 |                   <MDBDropdownToggle nav caret>
 51 |                     <span className='mr-2'>Dropdown</span>
 52 |                   </MDBDropdownToggle>
 53 |                   <MDBDropdownMenu>
 54 |                     <MDBDropdownItem>
 55 |                       <Link href='/'>
 56 |                         <a>Home</a>
 57 |                       </Link>
 58 |                     </MDBDropdownItem>
 59 |                     <MDBDropdownItem>
 60 |                       <Link href='/register'>
 61 |                         <a>Register</a>
 62 |                       </Link>
 63 |                     </MDBDropdownItem>
 64 |                     <MDBDropdownItem>
 65 |                       <Link href='/'>
 66 |                         <a>Home</a>
 67 |                       </Link>
 68 |                     </MDBDropdownItem>
 69 |                     <MDBDropdownItem>
 70 |                       <Link href='/register'>
 71 |                         <a>Register</a>
 72 |                       </Link>
 73 |                     </MDBDropdownItem>
 74 |                   </MDBDropdownMenu>
 75 |                 </MDBDropdown>
 76 |               </MDBNavItem>
 77 |             </MDBNavbarNav>
 78 |             <MDBNavbarNav right>
 79 |               <MDBNavItem>
 80 |                 <MDBFormInline waves>
 81 |                   <div className='md-form my-0'>
 82 |                     <input
 83 |                       className='form-control mr-sm-2'
 84 |                       type='text'
 85 |                       placeholder='Search'
 86 |                       aria-label='Search'
 87 |                     />
 88 |                   </div>
 89 |                 </MDBFormInline>
 90 |               </MDBNavItem>
 91 |             </MDBNavbarNav>
 92 |           </MDBCollapse>
 93 |         </MDBNavbar>
 94 |       </>
 95 |     );
 96 |   }
 97 | }
 98 | 
 99 | export default Layout;
100 | 


--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import App from 'next/app';
 3 | import '@fortawesome/fontawesome-free/js/all';
 4 | import 'bootstrap-css-only/css/bootstrap.min.css';
 5 | import 'mdbreact/dist/css/mdb.css';
 6 | import Layout from '../components/Layout';
 7 | 
 8 | export default class MyApp extends App {
 9 |   static async getInitialProps({ Component, ctx }) {
10 |     let pageProps = {};
11 | 
12 |     if (Component.getInitialProps) {
13 |       pageProps = await Component.getInitialProps(ctx);
14 |     }
15 | 
16 |     return { pageProps };
17 |   }
18 | 
19 |   render() {
20 |     const { Component, pageProps } = this.props;
21 | 
22 |     return (
23 |       <Layout>
24 |         <Component {...pageProps} />
25 |       </Layout>
26 |     );
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Carousel from '../components/Carousel';
 2 | import ReactImage from '../assets/mdb-react-small.png';
 3 | 
 4 | const WelcomePage = () => (
 5 |   <>
 6 |     <h1 className='text-center mt-5'>Welcome to Next.js</h1>
 7 |     <img
 8 |       src={ReactImage}
 9 |       alt='MDBReact'
10 |       className='img-fluid d-block mx-auto mt-3'
11 |     />
12 |     <Carousel />
13 |   </>
14 | );
15 | 
16 | export default WelcomePage;
17 | 


--------------------------------------------------------------------------------
/src/pages/register.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   MDBBtn,
 3 |   MDBCard,
 4 |   MDBCardBody,
 5 |   MDBCardImage,
 6 |   MDBInput,
 7 |   MDBCol,
 8 |   MDBRow
 9 | } from 'mdbreact';
10 | 
11 | const Example = () => (
12 |   <React.Fragment>
13 |     <MDBRow className='mt-5'>
14 |       <MDBCol md='6' className='mx-auto'>
15 |         <MDBCard>
16 |           <MDBCardImage
17 |             className='img-fluid'
18 |             src='https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg'
19 |             waves
20 |           />
21 |           <MDBCardBody>
22 |             <form>
23 |               <p className='h5 text-center mb-4'>Sign up</p>
24 |               <div className='grey-text'>
25 |                 <MDBInput
26 |                   label='Your name'
27 |                   icon='user'
28 |                   group
29 |                   type='text'
30 |                   validate
31 |                   error='wrong'
32 |                   success='right'
33 |                 />
34 |                 <MDBInput
35 |                   label='Your email'
36 |                   icon='envelope'
37 |                   group
38 |                   type='email'
39 |                   validate
40 |                   error='wrong'
41 |                   success='right'
42 |                 />
43 |                 <MDBInput
44 |                   label='Confirm your email'
45 |                   icon='exclamation-triangle'
46 |                   group
47 |                   type='text'
48 |                   validate
49 |                   error='wrong'
50 |                   success='right'
51 |                 />
52 |                 <MDBInput
53 |                   label='Your password'
54 |                   icon='lock'
55 |                   group
56 |                   type='password'
57 |                   validate
58 |                 />
59 |               </div>
60 |               <div className='text-center'>
61 |                 <MDBBtn color='primary'>Register</MDBBtn>
62 |               </div>
63 |             </form>
64 |           </MDBCardBody>
65 |         </MDBCard>
66 |       </MDBCol>
67 |     </MDBRow>
68 |   </React.Fragment>
69 | );
70 | 
71 | export default Example;
72 | 


--------------------------------------------------------------------------------