NexVera - Technology & IT Solutions Next.js Template

Thank you for purchasing NexVera! This documentation covers everything you need to install, configure, customize, and deploy the Next.js edition of the template. Please read through it before reaching out to support — most common questions are answered here.

1. Item Name: NexVera - Technology & IT Solutions Next.js Template
2. Framework: Next.js 16 (App Router) + React 19
3. Version: 1.1.0
4. Author: ThemiVerse
5. Support: https://helpdesk.themiverse.com/

Introduction

NexVera is a modern, fully responsive Technology & IT Solutions template. This is the Next.js edition of the NexVera HTML template — every page from the HTML version is included and looks the same, now built as React components using the Next.js App Router. It is perfect for IT companies, software houses, startups, SaaS products, AI/ML agencies, digital agencies, and tech consulting firms.

Main features included:

• Next.js 16 (App Router, Turbopack) + React 19
• Plain JavaScript — no TypeScript knowledge required
• Bootstrap 5.3 grid & utilities with the original main.css
• 14 Ready Pages & 2 Homepage Variations
• Every page pre-rendered as static HTML — great for SEO and speed
• Fully Responsive Layout (all devices)
• Self-hosted fonts via Fontsource — no requests to Google
• AOS Scroll Animations
• Swiper Testimonials Slider
• Filterable Portfolio (no extra library)
• GLightbox Image / Video Lightbox
• Typed.js Animated Headline
• CountUp Animated Statistics
• Monthly / Annual Pricing Toggle
• Working Contact Form API Route (Nodemailer / SMTP)
• Per-page SEO metadata
• Component-based, well-organized code
• Custom 404 Page
• Font Awesome Icons

What's Included

After downloading the package from your ThemeForest account you will receive a ZIP file. Once extracted you will find:

• nexvera-nextjs/ — The complete Next.js project (source code, components, styles, and images).
• Documentation/ — This documentation site, license, and setup instructions.

Note: The node_modules folder is not included. It is created when you run npm install (see Installation).

Pages & Routes

Every HTML page has a matching Next.js route. In the App Router, each folder inside app/ that contains a page.js becomes a URL.

File Structure

nexvera-nextjs/
├── app/
│   ├── layout.js              Root layout: global CSS, fonts, header, footer, preloader
│   ├── template.js            Re-runs page effects (AOS, lightbox) on every navigation
│   ├── page.js                Home (IT Solutions)
│   ├── <route>/page.js        One folder per page (see table above)
│   ├── not-found.js           404 page
│   └── api/contact/route.js   Contact form endpoint (Nodemailer)
│
├── components/
│   ├── layout/                Header, Footer, InfoPanel, Preloader, BackToTop,
│   │                          ClientEffects (Bootstrap JS), PageEffects (AOS + GLightbox)
│   ├── common/PageHero.jsx    Inner-page hero with breadcrumb
│   ├── sections/<page>/      Each page section as its own component
│   ├── sections/shared/       Sections used on more than one page
│   ├── ui/                    TypedText, CountUp, TestimonialsSlider,
│   │                          PortfolioFilter, PricingBilling, FaqScrollSpy
│   └── forms/                 ContactForm, CommentForm, NewsletterForm
│
├── data/navigation.js         Header menu items
├── styles/
│   ├── main.css               Original template stylesheet
│   └── custom.css             Rules for React components + your own overrides
├── public/assets/img/         All images (logo, favicon, page images)
│
├── .env.example               Contact form (SMTP) settings template
├── next.config.mjs            Next.js configuration
├── jsconfig.json              "@/..." import alias
└── package.json               Dependencies and npm scripts

Installation

Requirements

• Node.js 20.9 or newer — download from nodejs.org (the LTS version is recommended).
• npm (installed with Node.js), or pnpm / yarn.
• A code editor such as VS Code.

To check your Node.js version, run:

node -v

Install & Run

1. Download the All Files & Documentation package from your ThemeForest account and extract the ZIP archive.
2. Open the nexvera-nextjs/ folder in your code editor.
3. Open a terminal in that folder and install the dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open http://localhost:3000 in your browser. The page refreshes automatically when you save a file.

Available npm scripts:

• npm run dev — start the development server
• npm run build — create an optimized production build
• npm run start — run the production build
• npm run lint — check code with ESLint

Build for Production

npm run build
npm run start

The site runs on port 3000 by default. To use a different port run npm run start -- -p 8080. See Deployment for hosting options.

Customization

Editing Page Content

Each page file in app/<route>/page.js imports its sections from components/sections/<page>/. To change text, images, or markup open the matching section component and edit the JSX. To reorder or remove a section, edit the page file:

// app/about/page.js
export default function AboutPage() {
  return (
    <>
      <PageHero ... />
      <MissionSection />
      <ValuesSection />
      <TimelineSection />
      <CounterSection />   {/* remove a line to remove the section */}
      <CtaSection />
    </>
  );
}

Change Menu

The header menu is defined in one file:

data/navigation.js

An item with children becomes a dropdown (opens on hover on desktop and works as an accordion on mobile):

export const mainNav = [
  { label: "Home", href: "/", children: [
      { label: "IT Solutions", href: "/" },
      { label: "Tech Agency", href: "/home-tech" },
  ]},
  { label: "Contact", href: "/contact" },   // simple link
];

Inner Page Hero

Most inner pages use the reusable PageHero component directly inside app/<route>/page.js:

<PageHero
  tag="Let’s Talk"
  title={<>Every Great Project<br />Starts With a Conversation</>}
  text="Tell us about your project. We’ll respond within 24 hours."
  breadcrumbs={[{ label: "Home", href: "/" }, { label: "Contact" }]}
/>

The last breadcrumb has no href — it is shown as the current page.

SEO & Metadata

Each page exports a metadata object with its title and description. The default title and the title template (%s | NexVera) are set in app/layout.js.

// app/contact/page.js
export const metadata = {
  title: "Contact Us",
  description: "Your page description for search engines.",
};

// app/layout.js
export const metadata = {
  title: { default: "NexVera – Technology & IT Solutions", template: "%s | NexVera" },
  description: "...",
  icons: { icon: "/assets/img/favicon.png" },
};

Change Logo & Images

All images live in:

public/assets/img/logo.svg        ← Header, mobile info panel logo
public/assets/img/logo-white.svg  ← Footer & preloader logo
public/assets/img/favicon.png     ← Browser tab icon

1. Replace the files above with your own, keeping the same filenames. Files inside public/ are served from the site root, so the code references them as /assets/img/logo.svg.
2. If you use different filenames, update the src in components/layout/Header.jsx, Footer.jsx, InfoPanel.jsx, and Preloader.jsx.
3. The logo <img> has width and height attributes. Adjust them to match your logo to prevent layout shift.
4. To replace any other image, overwrite the file in public/assets/img/ (same name) or change its src path in the section component.

Changing Colors

All global colors are CSS custom properties (variables) at the top of:

styles/main.css

Locate the :root block. The key brand variables are:

• --tmv-color-primary: #0958D9 — main brand color (blue); updates buttons, links, badges, and active nav states
• --tmv-color-accent: #13C2A3 — accent color (teal)
• --tmv-color-highlight: #FF6B35 — highlight / CTA color
• --tmv-color-dark: #0D1117 — dark sections / footer
• --tmv-color-bg: #FFFFFF — page background

Changing --tmv-color-primary updates buttons, links, badges, and active nav states across all pages automatically. The matching -dark, -light, and -rgb variants should be updated together.

Changing Fonts

NexVera uses three fonts, self-hosted through Fontsource npm packages (no Google requests):

• Space Grotesk — headings
• Inter — body text
• JetBrains Mono — monospace / code elements

All three are licensed under the SIL Open Font License and are free for commercial use.

To swap in a different font (for example Poppins):

1. Install the font package:

   npm install @fontsource/poppins

2. In app/layout.js replace the old @fontsource/* imports with the weights you need:

   import "@fontsource/poppins/400.css";
   import "@fontsource/poppins/600.css";
   import "@fontsource/poppins/700.css";

3. Update the font variables in the :root block of styles/main.css:

   :root {
     --tmv-font-display: 'Poppins', sans-serif;
     --tmv-font-body: 'Poppins', sans-serif;
     --tmv-font-mono: 'JetBrains Mono', monospace;
   }

Browse available fonts at fontsource.org/fonts.

Preloader

To disable the page preloader, remove the <Preloader /> line (and its import) from app/layout.js.

Portfolio Filter

The portfolio grid filters by category using the components/ui/PortfolioFilter.jsx component — no external layout library is required. Markup pattern (inside components/sections/portfolio/PortfolioSection.jsx):

<PortfolioFilter>
  <button className="portfolio-filter-btn active" data-filter="*">All</button>
  <button className="portfolio-filter-btn" data-filter=".cat-web">Web</button>

  <div className="portfolio-grid">
    <div className="portfolio-item cat-web cat-ai">...</div>
  </div>
</PortfolioFilter>

To add a new category, add a matching cat-xxx class to the portfolio item and a button with data-filter=".cat-xxx".

Scroll Animations

Scroll animations use AOS. To animate any element, add a data-aos attribute (and optionally a delay):

<div data-aos="fade-up" data-aos-delay="100">...</div>

AOS and the lightbox are re-initialized on every page navigation by components/layout/PageEffects.jsx (mounted from app/template.js).

Other interactive components:

Contact Form Setup

The form on /contact posts JSON to the API route app/api/contact/route.js, which validates the fields and sends an email through SMTP using Nodemailer.

1. In the project root, copy .env.example to .env.local.
2. Fill in your SMTP details and the recipient address:

   SMTP_HOST=smtp.example.com
   SMTP_PORT=587
   SMTP_SECURE=false
   SMTP_USER=your-smtp-username
   SMTP_PASS=your-smtp-password
   
   # Where enquiries are delivered, and the "From" address used
   CONTACT_TO=hello@yourdomain.com
   CONTACT_FROM="NexVera Website <no-reply@yourdomain.com>"

3. Restart the server (npm run dev) so the new variables are loaded.

For port 465 (SSL) set SMTP_SECURE=true. For port 587 (STARTTLS) leave it false. The API route requires a server runtime — it does not work with static export (see Deployment).

Newsletter & Comment Forms

The footer newsletter form (components/forms/NewsletterForm.jsx) and the blog comment form (components/forms/CommentForm.jsx) only work in the browser for now. Each file contains a comment showing where to connect your own service, for example Mailchimp or a CMS.

Deployment

• Vercel (recommended): Push the project to a Git repository, import it on vercel.com, and deploy — no extra setup is needed. Add the SMTP variables under Project → Settings → Environment Variables.
• Node.js server / VPS: Run npm run build and then npm run start (default port 3000; use -p to change it). Set the SMTP variables in the server environment or a .env.local file.
• Static hosting (GitHub Pages, shared hosting): Possible by adding output: "export" to next.config.mjs and running npm run build — the site is generated into the out/ folder. The /api/contact route will not work in this mode, so point the contact form at an external form service instead.

Sources & Credits

NexVera is built on the open-source resources listed below. We thank their creators. All assets are used under their respective licenses. Libraries are installed from npm (see package.json).

JavaScript & CSS Libraries

Fonts

Icons

Images

Note: All images are used for preview purposes only. They are not included in the final purchase files and are replaced with placeholder images.

Change Log

1. Version 1.1.0 — 21 October 2026
   • Added Next.js version of the template.
2. Version 1.0.0 — 30 June 2026
   • Initial release.

Support

Thank you for choosing NexVera! We hope this documentation helps you set up and customize the template quickly and with confidence.

If you run into anything not covered here, our support team is ready to help.

Submit a support ticket or reach out via the ThemeForest comments section, and we will respond within 24–48 hours (usually sooner).
Support hours: Monday – Friday, 10:00 AM – 7:00 PM IST.

Before submitting a ticket, please:

• Read through this documentation fully.
• Confirm you are using Node.js 20.9 or newer (node -v).
• Delete node_modules and the .next folder, then run npm install again if you see build errors.
• Check that your SMTP settings in .env.local are correct if the contact form does not send email.

We are committed to making your experience great. Thank you again for your purchase!