Documentation

Azzle - Saas Software Startup React Next Js

Thank you so much for purchasing our item from themeforest

  • Created: 16 June 2024

Installation

Hello! Welcome to Azzle's official documentation. Simple, Flexible, ready to use React Next Js Template which will bring you so much closer to your end goals. Let’s dive in.

Prerequisites

React Next Js is constructed leveraging Node.js. as its foundation. To initiate your journey with React Next Js, it's essential to have an up-to-date version of Node.js and npm installed on your machine.

Installing Development Environment

We require many packages (dependencies) to run our site. Move into /azzle-next (project root) directory and run command below. 

npm install

After the installation, you should have a folder named /node_modules in the project root directory..

How To Run Development Server

To start our development server run command below:

npm run dev

Open your browser and visit http://localhost:3000!. You should see a page like below.

Voila! You are a genious. Now open the code editor and start hacking!

CLI Commands

Some useful commands to work with the project.

1. npm run dev to Start development server at http://localhost:3000

2. npm run build for Generating production build

3. npm serve To serve build files at http://localhost:9000

File Structure

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /azzle-next folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • azzle-next/styles/css - Css files
    • azzle-next/app - All pages
    • azzle-next/public/images - Images files
    • azzle-next/app/page.js - Root file
  3. You should upload all or specific React Next Js files as per your need.
  4. You are good to go for adding your content now!

Logo Settings



1. Call this Brandlogo to use logo:

You have the option to modify default logo. All you have to do is substitute the custom name at this location.



2. Pass the image for logo as props:

You have the option to pass the custom logo image in any component.


Layout

Documentation and examples for header, footer, grid

Header 1

First header (default) of the website. It contains the logo, menu and login/registration option.

Header 2

Second header of the website. It contains the logo, menu and login/registration information.

Header 3

Third header of the website. It contains the logo, menu and login/registration information.

Header 4

Fourth header of the website. It contains the logo, menu and login/registration information.

FAQ

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

Yes. You can customize our items to fit the needs of your end product
Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.

Please note that there may be some limits placed on uses under the different license types available on the marketplaces.
The item is what you purchase from Envato Market. The end product is what you build with that item.
- You can buy a web template, add your text and images, and use it as your website.
- You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale).
Contact through ui8 support
.

Source & Credits

Images:

  • Freepik
  • Unsplash
  • Pexels

Fonts:

  • Google font

Packages:

  • react
  • react-dom
  • next
  • fslightbox-react
  • jos-animation
  • swiper

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0

Initial Release