Techlab - IT Solutions and Services React Nextjs Template v2.0

First of all, thank you for purchasing the Techlab Nextjs Template. You can find the detailed information about the template in this document.
If there is anything you cannot find in this document, you can send an e-mail via the Profile page.

Techlab in a Brief

Techlab Responsive Nextjs Template.
In download folder you will find Two folders:

Documentation (Documentation for main template)
Techlab (Main Template)

Remember, when you want to add or remove section in any pages you need to adjust the section spacing by giving margin or padding. Don't get panic if you messed up anything when you edit the template. We are always available to support our customer.

01Installation

You will get techlab-next.zip file from Themeforest. First need to unzip the file you will find one folder, Contain techlab-next.

Go to techlab-next-v1.0 folder
run npm install on techlab-next-v1.0
run command: npm run dev

if you are facing trouble with the package Installation process, try this command: npm i -f

Then , please go to address localhost:3000 on your browser and You will find default landing page.

If node.js is not installed in your local machine then please consider to download it from node js official website here: Node.js

02Basic site settings

Change logo

Change Favicon

Customize menu data

Customize hero data

03Fonts: @next/font

              
                {/* Fonts directory */}
                import { Poppins, Rajdhani } from 'next/font/google';
            
                // Set up Tailwind CSS font config accordingly.
                // Pass the font.variable and the Tailwind font variable in the body classname.
                export const primary = Poppins({
                  subsets: ['latin'],
                  variable: '--font-primary',
                });
            
                export const secondary = Rajdhani({
                  subsets: ['latin'],
                  variable: '--font-secondary',
                  weight: ['300', '400', '500', '600', '700'],
                });
            
                {/* If you update the font-family, follow these steps: */}
                {/* For example, updating the font from Rubik to Poppins: */}
                {/*
                    1. Update the import statement:
                       import { Poppins, Rajdhani } from 'next/font/google';
                    
                    2. Update the font function call:
                       export const primary = Poppins({
                         subsets: ['latin'],
                         variable: '--font-primary',
                       });
                */}

For more information, check the Next.js documentation on how to use next/font.

04Themes: System/dark/light

Theme Options

System Theme: The application automatically adjusts its theme based on the user's system preferences. This ensures a seamless experience across different devices and environments
Dark Theme (Default): The dark theme presents a sleek and modern interface with darker colors, suitable for low-light environments or users who prefer a darker aesthetic.
Light Theme: The light theme features a clean and bright interface with lighter colors, ideal for well-lit environments or users who prefer a traditional design.

Note: If you change the default theme, you will make some adjustments.

Please navigate to the root layout: app/layout.
Change the HTML className from 'dark' to your desired theme ('system' or 'light').
Change the ThemeProvider's defaultTheme value to your desired theme ('system' or 'light').

Change default theme value

05Contact us form submission

Form submission

Environment variables

No need to fret! The Gmail address provided here is your email address, and the password isn't your regular Gmail password; it's an app password. If you're unsure how to create an app password, please refer to our documentation.

We utilize Google's SMTP service. If you need help creating an app password for SMTP, check out this guide: Sign in with app passwords

For more information, check the nodemailer documentation on how to use this.

06Deploy & Static build

next.js Deploy

Navigate to techlab-next
for deploying to vercel using terminal you need to install vercel-cli on your machine Read more...
npm install vercel --save-dev
run command:
vercel login
After the login process is done. run command:
vercel
after the deploy process is done. then deploy the production version
vercel --prod

For more information How to Deploy a Next.js Site with Vercel

For other hosting provider please visit next.js app deployment

next.js static build

Navigate to techlab-next
run command: npm run export
after the export is done you will get a folder called out. Host that folder anywhere you want
to see the export build, run command: npm run start

07Credits

nextjs
tailwindcss
shadcn-ui
react-countup
react-icons
swiper
keen-slider
react-transition-group
yet-another-react-lightbox
react-visibility-sensor
formik
yup

Techlab - IT Solutions and Services React Nextjs Template