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 installnode_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
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:
- official NextJS docs on deploying
- tutorial for deploying on heroku
- tutorial for deploying on AWS S3
- tutorial for deploying on gh-pages
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
):
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.