Tutorial

License

Copyright (c) 2021 Creative Tim.

When you purchase an item from Creative Tim, you are actually purchasing a license to use that item. All our free items are under MIT license. All our premium items are covered by our Personal and Developer licenses. In order to understand the rights and restrictions that come with your purchase, please read the details from our Official License Page.

Getting started

NextJS Material Kit PRO is built on top of Material UI and Material Kit PRO React using NextJS (at the moment we do not offer support for TypeScript in our React themes).

You can check the versions of this product from our live CHANGELOG.

You can convert our theme to TypeScript support by reading this thread.

Local Development

• Install NodeJs from NodeJs Official Page
• Go to creative tim website and login into your account
• Go to downloads section on creative tim website (be sure to be logged into your account) - after you've bought the theme
• Press the download button near NextJS Material Kit Pro product (this will download onto your computer a zip file)
• Unzip the downloaded file to a folder in your computer
• Open Terminal
• Go to your file project (where you've unzipped the product)
• Run in terminal

npm install

• Then run

  npm start

• Alternatively you can run

  npm run install:clean

  which will delete node_modules, package-lock.json, .next/, automatically run install script and start script
• Navigate to http://localhost:3000
• More information → React
• More information → NextJS
• More information → Material-UI
• More information → Material Kit PRO React

Production

To learn how to deploy a NextJS application you can do the following:

• Check the live docs of NextJS
  • NextJS
  • NextJS Tutorial for Deployment
  • NextJS for GitHub Pages
• Also, you can check StackOverflow for more guidelines.

Observations

We've used absolute paths in our product.

Integrating this app, with another NextJS app that does not make use of absolute paths will break.

Please integrate our next.config.js file with your next.config.js file of your application.

For more details about absolute paths inside NextJS we've used this tutorial on absolute paths in NextJS.

The project was started from Material UI NextJS example and on top of that, we've added Material Kit PRO React.

Files and Folders structure

nextjs-material-kit-pro
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── README.md
├── next.config.js
├── package.json
├── Documentation
│   ├── assets
│   │   ├── css
│   │   ├── img
│   │   │   └── faces
│   │   └── js
│   └── tutorial-components.html
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── _error.js
│   ├── about-us.js
│   ├── blog-post.js
│   ├── blog-posts.js
│   ├── components.js
│   ├── contact-us.js
│   ├── ecommerce.js
│   ├── error-page.js
│   ├── index.js
│   ├── landing-page.js
│   ├── login.js
│   ├── presentation.js
│   ├── pricing.js
│   ├── product.js
│   ├── profile.js
│   ├── sections.js
│   ├── shopping-cart.js
│   └── signup.js
├── assets
│   ├── css
│   │   ├── nextjs-material-kit-pro.css
│   │   ├── nextjs-material-kit-pro.css.map
│   │   └── nextjs-material-kit-pro.min.css
│   ├── img
│   │   ├── assets-for-demo
│   │   │   ├── example-pages
│   │   │   ├── ourClients
│   │   │   ├── presentationViewSectionComponent
│   │   │   └── sections
│   │   │       └── imgs.js
│   │   ├── examples
│   │   ├── faces
│   │   ├── flags
│   │   └── sections
│   ├── jss
│   │   ├── nextjs-material-kit-pro
│   │   │   ├── components
│   │   │   └── views
│   │   │       ├── aboutUsSections
│   │   │       ├── blogPostSections
│   │   │       ├── blogPostsSections
│   │   │       ├── componentsSections
│   │   │       ├── ecommerceSections
│   │   │       ├── landingPageSections
│   │   │       ├── presentationSections
│   │   │       ├── pricingSections
│   │   │       ├── sectionsSections
│   │   └── nextjs-material-kit-pro.js
│   └── scss
│       ├── core
│       │   ├── mixins
│       │   └── variables
│       ├── plugins
│       └── nextjs-material-kit-pro.scss
├── components
│   ├── Accordion
│   │   └── Accordion.js
│   ├── Badge
│   │   └── Badge.js
│   ├── Card
│   │   ├── Card.js
│   │   ├── CardAvatar.js
│   │   ├── CardBody.js
│   │   ├── CardFooter.js
│   │   └── CardHeader.js
│   ├── Clearfix
│   │   └── Clearfix.js
│   ├── CustomButtons
│   │   └── Button.js
│   ├── CustomDropdown
│   │   └── CustomDropdown.js
│   ├── CustomFileInput
│   │   └── CustomFileInput.js
│   ├── CustomInput
│   │   └── CustomInput.js
│   ├── CustomLinearProgress
│   │   └── CustomLinearProgress.js
│   ├── CustomTabs
│   │   └── CustomTabs.js
│   ├── CustomUpload
│   │   └── ImageUpload.js
│   ├── Footer
│   │   └── Footer.js
│   ├── Grid
│   │   ├── GridContainer.js
│   │   └── GridItem.js
│   ├── Header
│   │   ├── Header.js
│   │   └── HeaderLinks.js
│   ├── InfoArea
│   │   └── InfoArea.js
│   ├── Instruction
│   │   └── Instruction.js
│   ├── Media
│   │   └── Media.js
│   ├── NavPills
│   │   └── NavPills.js
│   ├── PageChange
│   │   └── PageChange.js
│   ├── Pagination
│   │   └── Pagination.js
│   ├── Parallax
│   │   └── Parallax.js
│   ├── Snackbar
│   │   └── SnackbarContent.js
│   ├── Table
│   │   └── Table.js
│   └── Typography
│       ├── Danger.js
│       ├── Info.js
│       ├── Muted.js
│       ├── Primary.js
│       ├── Quote.js
│       ├── Rose.js
│       ├── Small.js
│       ├── Success.js
│       └── Warning.js
└── pages-sections
    ├── about-us
    │   ├── SectionContact.js
    │   ├── SectionDescription.js
    │   ├── SectionOffice.js
    │   ├── SectionServices.js
    │   └── SectionTeam.js
    ├── blog-post
    │   ├── SectionBlogInfo.js
    │   ├── SectionComments.js
    │   ├── SectionSimilarStories.js
    │   └── SectionText.js
    ├── blog-posts
    │   ├── SectionImage.js
    │   ├── SectionInterested.js
    │   ├── SectionPills.js
    │   └── SubscribeLine.js
    ├── components
    │   ├── SectionBasics.js
    │   ├── SectionCards.js
    │   ├── SectionCarousel.js
    │   ├── SectionContentAreas.js
    │   ├── SectionFooter.js
    │   ├── SectionJavascript.js
    │   ├── SectionNavbars.js
    │   ├── SectionNotifications.js
    │   ├── SectionPills.js
    │   ├── SectionPreFooter.js
    │   ├── SectionTabs.js
    │   └── SectionTypography.js
    ├── ecommerce
    │   ├── SectionBlog.js
    │   ├── SectionLatestOffers.js
    │   └── SectionProducts.js
    ├── landing-page
    │   ├── SectionProduct.js
    │   ├── SectionTeam.js
    │   └── SectionWork.js
    ├── presentation-page
    │   ├── SectionCards.js
    │   ├── SectionComponents.js
    │   ├── SectionContent.js
    │   ├── SectionDescription.js
    │   ├── SectionExamples.js
    │   ├── SectionFreeDemo.js
    │   ├── SectionOverview.js
    │   ├── SectionPricing.js
    │   └── SectionSections.js
    ├── pricing-page
    │   ├── SectionFeatures.js
    │   └── SectionPricing.js
    └── sections-page
        ├── SectionBlogs.js
        ├── SectionContacts.js
        ├── SectionFeatures.js
        ├── SectionHeaders.js
        ├── SectionPricing.js
        ├── SectionProjects.js
        ├── SectionTeams.js
        └── SectionTestimonials.js