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.

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.

  • 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 Argon 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 files (nextjs.config.js, pages/_app.js and pages/_document.js) are 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
  • More information → nextjs

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. You will also need our configs from the next.config.js, pages/_app.js and pages/_document.js.

CSS

FREE

To get our look, if you’ve started a new app, you will need to import our styles inside your app like so (in our case, these are imported inside pages/_app.js): 

import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";
import "assets/scss/nextjs-argon-dashboard.scss";

Or you can import our pre-compiled css like so:

import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";
import "assets/css/nextjs-argon-dashboard.css";
// or the min.css file
// import "assets/css/nextjs-argon-dashboard.min.css";
// if you also wish to add the css.map file
// import "assets/css/nextjs-argon-dashboard.css.map";

PRO

To get our look, if you’ve started a new app, you will need to import our styles inside your app like so (in our case, these are imported inside pages/_app.js): 

// plugins styles from node_modules
import "react-notification-alert/dist/animate.css";
// plugins styles downloaded
import "assets/vendor/fullcalendar/dist/fullcalendar.min.css";
import "assets/vendor/sweetalert2/dist/sweetalert2.min.css";
import "assets/vendor/select2/dist/css/select2.min.css";
import "assets/vendor/quill/dist/quill.core.css";
import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";
// core styles
import "assets/scss/nextjs-argon-dashboard-pro.scss";

Or you can import our pre-compiled css like so:

// plugins styles from node_modules
import "react-notification-alert/dist/animate.css";
// plugins styles downloaded
import "assets/vendor/fullcalendar/dist/fullcalendar.min.css";
import "assets/vendor/sweetalert2/dist/sweetalert2.min.css";
import "assets/vendor/select2/dist/css/select2.min.css";
import "assets/vendor/quill/dist/quill.core.css";
import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";
// core styles
import "assets/css/nextjs-argon-dashboard-pro.css";
// or the min.css file
// import "assets/css/nextjs-argon-dashboard-pro.min.css";
// if you also wish to add the css.map file
// import "assets/css/nextjs-argon-dashboard-pro.css.map";

Fonts and Icons

If you’ve started a new project and are copying our product there, be sure to add the following lines of code inside your pages/_document.js file: 

{/* Fonts and icons */}
<link
  href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
  rel="stylesheet"
/>

Important Globals

NextJS Argon 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. Let’s dive in.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <Head> inside the pages/_app.js file. 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

Reactstrap components

Reactstrap comes with 5 required dependencies, however, once you install reactstrap, all its dependencies are installed together with it, so you do not have to worry about this.

Bootstrap components

Many of Bootstrap’s components and utilities are built with @each loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.

Bootstrap tutorial

Please check our official Youtube channel for more tutorials.