Quick Start

To start using this product 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.

  • Install NodeJS LTS version from NodeJs Official Page
  • Go to creative tim website and login into your account
  • Go to product page (be sure to be logged into your account)
  • Press the download button (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 config files 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 Notus NextJS to your own project
    • Also, if you have issues with integrating your project with our product, please check that you have our config integrated with yours as well
    • Here is a useful thread on integrating our products with other projects
  • Navigate to https://localhost:3000
  • More information → React
  • More information → NextJS
  • More information → Tailwind CSS

Live Production

NOTE! Creative Tim unfortunately cannot help you with deploying your app.

One of the recurrent issues with our products is the fact that when deploying, you will need to delete the homepage prop from inside the package.json file, or in some cases, you will need to configure it to your own domain.

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, pages/_document.js and tailwind.config.js.

CSS

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 "@fortawesome/fontawesome-free/css/all.min.css";
import "assets/styles/tailwind.css";

Important Globals

Notus Nextjs 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

This product 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" />