Welcome to Furnisy Next.js template!
We would like to thank you for choosing our template -
Furnisy.
Furnisy is a clean professional Financial Business Next JS Template which fits for all kind of
Financial, Business, consulting etc website. It has built with almost all the Financial, business,
corporate, consulting features that need a company. My package includes 8 well-organized xd page.
Files are well organized and you can customize very easily.
It is a clean, creative and professional business, finance, corporate design. It is based Bootstrap
5 grid. The width is 1920px.
we have a strong support team which 24/7 days available to support you.
Requirements
There are system requirements in order to install and
setup furnisy template and its components properly. Make
sure that you are installed
Node.js version~22.17.0 or newer.
Recommended node
If you are familiar to NPM !
First , install NPM globally
-
Open you command prompt
npm install --save npm-install-global
Check installation :
npm --version
What's Included
After purchasing Furnisy template on themeforest.net
with your themeforest account, go to your Download
page. You can download Furnisy template. Furnisy template
package which contains the following files:
The contents of the template package downloaded from
themeforest:
Furnisy.zip - An Installable Next.js
template zip file. this file you need to upload to
Next.js.
Documentation - This folder contains
what you are reading now :)
Run Next.js Template
Please follow the instructions how you can run next.js
template on your hosting:
For local host
-
Open you command prompt
npm install
npm run dev (will start the dev server)
For locally build
-
Open you command prompt
npm run build (will build locally and
generate public directory)
Just upload build folder on your server
Change Site Title, Favicon and
To change your Site title and Favicon open Furnisy folder
in your editor and go to the location by following
screenshot which are given bellow.
layout.tsx is root file & every components/page will
render in this file . And we can use meta ,
link , title etc. in head tag
for every pages .
Change Logo
To change logo and customize other header data do the
following:
From the project folder go to
public images
there we have all the images to use
From the project folder go to
src ComponentsSectionsHeaderOpen the header where you want to use
Then change the logo as well as you can also change
other data
In Footer we can change logo by the same way.
To change your logo following screenshot which are given
bellow.
By folllowing this screenshot you can change your Logo
Customize Menu
To customize menu do the following:
From the project folder go to
src ComponentsSectionsnavbar.tsx
Create new menu option in a li tag
and always use li before end
ul tag .
And for routing React.js provide us
Link tag, import it from react-router-dom
Then in Link >href ="" use
page's folder name
Then customize the menu data following the screenshot
Use same way to change menu data for mobile devices
Customize the menu
Create a new component
To create a new component do the following:
From the project folder go to
src ComponentsSections/UIThen create [your-component-name].tsx file
Inner the file create a function and write your code
Then return your all data as a jsx code
At last you have to export this function where you put
your data
then import that file to select folder/file where you want to put
Create a new section
Create a new page
To create a new page do the following:
From the project folder go to
src apppage-name as a folderpage.tsx
Inner the file create a function and write your code
Then return your all data as a tsx code
At last you have to export this function where you put
your data
Now you have to link in the menu or where you want to
go to this page by clicking
To done this process follow the screenshots which are
given bellow.
Create a new page
Change Styles
To change Global style
src app global.css
Change Global Color Options Setting
Customize Next Config
If you don't need the custom image loader and other configurations, then remove the configuration.
Change Global Color Options Setting
Change Log
Our team never stops Improving, bug fixes, and
improvements. See What's New. We recommend you to read the
changelog for every update.
