Quick start

To start using this dashboard you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).

Local development

If you do not want to use our template as base for your project, and want to integrate our template into your own project, please skip this part and the Live production one, and go straight to Packages. You might also find useful this link here.

Follow the next steps to start using our product:

  • Install NodeJS LTS version 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)
  • Press the download button near NextJS Material Dashboard (FREE or 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 run dev
  • Or you can simply run npm run install:clean (if you use a linux based terminal) which will install node_modules and also will start your project.
  • If you have an error something containing Module not found please make sure your next.config.js file is configured as that from our product
  • (Optional) You can create a new nextjs application
    • Check their official docs here: https://nextjs.org/learn/basics/create-nextjs-app
    • Copy what you need from NextJS Material Dashboard (FREE or PRO) to your own project)
    • Also, if you have issues with integrating your project with our product, please check that you have our config (nextjs.config.js, pages/_app.js and pages/_document.js) integrated with yours as well
    • Here is a useful thread on integrating our product with other projects
  • Navigate to https://localhost:3000
  • More information → react

Live Production

NOTE! Creative Tim unfortunately cannot help you with deploying your app. If you need help on deploying your app to gh-pages we are more than happy to help you with that, but unfortunately we have no other knowledge of deploying a NextJS app.

These are some free open source tutorial on how to deploy a NextJS app on some servers. Please note that your project might need some additional configs to deploy it on these servers:

Packages

If you want to add our template over your own project, please add all contents of the packaje.json file to your own package.json file. And also, please configure your next.config.js like our own config file.

CSS

FREE

First of all, you will need to add to your own pages/_document.js file the following: 

{/* Fonts and icons */}
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
/>
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>

Or, you can copy our whole pages/_document.js file on top of your own one.

After that, you will need to import our styles into your own pages/_app.js like so: 

import "assets/css/nextjs-material-dashboard.css?v=1.0.0";

PRO

First of all, you will need to add to your own pages/_document.js file the following: 

{/* Fonts and icons */}
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
/>
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.4/jquery-jvectormap.css"
  type="text/css"
  media="screen"
/>
<link
  rel="stylesheet"
  href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"
  type="text/css"
  media="screen"
/>
<link
  href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Or, you can copy our whole pages/_document.js file on top of your own one.

After that, you will need to import our styles into your own pages/_app.js like so: 

import "assets/scss/nextjs-material-dashboard-pro.scss?v=1.0.0";

Important globals

NextJS Material Dashboard FREE & PRO employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. This is done by our scss or css file that we’ve talked above.

Material-UI components

Material-UI comes with 12 required dependencies, however, once you install @material-ui/core, all its dependencies are installed together with it, so you do not have to worry about this.