Welcome to Ailng Next.js template!
We would like to thank you for choosing our template -
Ailng.
Ailng is a Creative Consulting & Business Agency Next js Template. This Next js Template is suitable for all type of business, consulting and creative & digital agency’s. This Next js Template Can be easily Customizable.Which fits for all agencies whether you are a business agency, web agency, freelancer, portfolio agency, web design company, web designer, digital marketing or any type of design agency websites and businesses. We got you covered. We created with component-based , easy to customize and developer friendly modern pure JavaScript, not jQuery. Its comes with modern design and a faster loading Next js template. By following multiple component you can build a website as you like. Ailng is well documented, very easy to use, Easily Customized, loads faster and provides better performance.
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 Ailng template and its components properly. Make
sure that you are installed
Node.js version~18.20.4 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 Ailng template on themeforest.net
with your themeforest account, go to your Download
page. You can download Ailng template. Ailng template
package which contains the following files:
The contents of the template package downloaded from
themeforest:
Ailng.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 Ailng 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 img
there we have all the images to use
From the project folder go to
src ComponentsheaderHeader.tsxOpen 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 ComponentsheaderHeader.tsx
Create new menu option in a li tag
and always use li before end
ul tag .
And for routing Next.js provide us
Link tag, import it from next/link
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 ComponentsThen 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 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 assets css style.css
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.
