—Table of Contents

Navigate this documentation to set up, customize, and deploy your Trendexa theme.

• 01Introduction & Welcome→
• 02Theme Features→
• 03Package Contents & File Structure→
• 04Getting Started & Installation→
• 05App Routes & Pages→
• 06Component Architecture→
• 07Styling & Tailwind CSS→
• 08React Components & Hooks→
• 09Header & Navigation Component→
• 10Section Components→
• 11Footer & Newsletter Component→
• 12Browser Support→
• 13Sources & Credits→
• 14Support & Contact→

01Introduction

Welcome to Trendexa — a production-ready Next.js 14 template for tech and gadget websites.

Trendexa is built on the modern web stack: Next.js 14 (App Router), React 18, Tailwind CSS, and is fully TypeScript-ready. It produces a fast, SEO-friendly, fully responsive site that you can deploy anywhere Node.js runs — Vercel, Netlify, AWS, DigitalOcean, or your own VPS via Docker.

Who Is This Template For?

• Mobile review websites publishing news, reviews, and comparisons.
• Tech bloggers writing about phones, gadgets, drones, cameras, and accessories.
• Affiliate marketers running price-comparison or "best-under-budget" pages.
• Consumer electronics retailers needing a content-driven landing presence.
• Developers who want a polished Next.js starter to integrate with a headless CMS, REST API, or GraphQL backend.

What You Will Need

• Node.js 18.17 or later — required by Next.js 14. Check with node --version.
• npm, pnpm, or yarn as your package manager.
• A modern code editor — VS Code is recommended for the best TypeScript and Tailwind experience.
• Working knowledge of React, JSX, and basic JavaScript / TypeScript.
• A web browser for previewing your changes (Chrome, Firefox, Edge, or Safari).

02Theme Features

Everything you need to launch a content-rich tech review website.

03Package Contents & File Structure

Understand the Next.js project layout before you begin.

After unzipping the downloaded archive from ThemeForest, you will find the following project structure inside the trendexa-next/ directory:

trendexa-next/
├── app/                          // App Router pages & layouts
│   ├── layout.tsx                // Root layout (header, footer, fonts)
│   ├── page.tsx                  // Homepage  →  /
│   ├── globals.css               // Tailwind + global styles
│   ├── comparison/page.tsx       // Comparison  →  /comparison
│   ├── reviews/page.tsx          // Reviews  →  /reviews
│   ├── news/page.tsx             // News listing  →  /news
│   ├── news-details/page.tsx     // News article  →  /news-details
│   ├── how-to/page.tsx           // How-to articles
│   ├── more-gadgets/page.tsx     // Other gadgets
│   ├── web-stories/page.tsx      // Web stories
│   ├── upcoming-mobiles/page.tsx // Upcoming devices
│   ├── mobile-brands/page.tsx    // All mobile brands
│   ├── category-view/page.tsx    // Category / search results
│   ├── contact-us/page.tsx       // Contact page
│   ├── terms-of-service/page.tsx
│   ├── privacy-policy/page.tsx
│   ├── cookie-policy/page.tsx
│   └── disclaimer/page.tsx
│
├── components/                   // Reusable React components
│   ├── layout/
│   │   ├── Header.tsx            // Top navigation
│   │   ├── Footer.tsx            // Bottom footer + newsletter
│   │   └── Navbar.tsx            // Mega menu
│   ├── home/
│   │   ├── TrendingNews.tsx      // Top 3 trending news block
│   │   ├── MobileList.tsx        // Mobile grid
│   │   ├── BrandShowcase.tsx     // Mobile brands grid
│   │   ├── PriceFinder.tsx       // "Find a mobile" widget
│   │   ├── BestByPrice.tsx       // Best mobile by price slider
│   │   ├── PopularComparisons.tsx
│   │   └── UpcomingMobiles.tsx
│   ├── ui/
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── Slider.tsx
│   └── shared/
│       ├── Advertisement.tsx
│       └── Newsletter.tsx
│
├── public/                       // Static assets served at /
│   └── assets/
│       ├── trendexa-logo.png
│       └── img/
│           ├── advertisement-image/
│           ├── feature-slider-image/
│           ├── icon/
│           ├── latest-news/
│           ├── mobile-list/
│           ├── trending-news/
│           ├── upcoming-mobiles/
│           └── popular-category-icon/
│
├── lib/                          // Utilities & data fetching
│   ├── data.ts                   // Static demo data (replace with API)
│   └── utils.ts
│
├── types/                        // TypeScript type definitions
│   └── index.ts
│
├── next.config.js                // Next.js configuration
├── tailwind.config.ts            // Tailwind theme & plugins
├── postcss.config.js
├── tsconfig.json                 // TypeScript configuration
├── package.json                  // Dependencies & scripts
├── .eslintrc.json                // ESLint rules
├── .gitignore
└── README.md

04Getting Started & Installation

From zero to running locally in under five minutes.

Step 1 — Verify Node.js

Trendexa requires Node.js 18.17 or later. Check your version:

# Verify Node.js installation
node --version
# Should print v18.17.0 or higher

If you don't have Node.js, download it from nodejs.org or use a version manager like nvm, fnm, or volta.

Step 2 — Download & Extract

Download the full package from your ThemeForest Downloads page. Choose "All files & documentation". Extract the ZIP archive to your preferred working folder.

Step 3 — Install Dependencies

Open a terminal in the project folder and install dependencies. You can use any package manager:

# Using npm
npm install

# Or using pnpm (faster, recommended)
pnpm install

# Or using yarn
yarn install

Step 4 — Run the Development Server

# Start dev server with hot reload
npm run dev

# Or with pnpm / yarn
pnpm dev
yarn dev

The app will be available at http://localhost:3000. Edits to any file are reflected instantly thanks to Next.js Fast Refresh.

Step 5 — Build for Production

Once you're ready to ship, create an optimized production build:

# Generate optimized production build
npm run build

# Start the production server
npm run start

Available npm Scripts

Deployment Options

05App Routes & Pages

15+ pre-built routes powered by the Next.js App Router.

Each folder inside app/ represents a route. The page.tsx file inside that folder is what renders when the user visits that URL.

06Component Architecture

How pages, layouts, and components fit together.

Root Layout

Every page is wrapped by the root layout at app/layout.tsx. This is where you load fonts, the global stylesheet, the header, and the footer:

import "./globals.css";
import { Inter } from "next/font/google";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Trendexa — Mobile Reviews, News & Comparisons",
  description: "Latest mobile reviews, comparisons, and tech news.",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

Page Components

Each page.tsx is a server component by default. It composes section components to build a full page:

// app/page.tsx — homepage
import TrendingNews from "@/components/home/TrendingNews";
import MobileList from "@/components/home/MobileList";
import BrandShowcase from "@/components/home/BrandShowcase";
import PriceFinder from "@/components/home/PriceFinder";
import BestByPrice from "@/components/home/BestByPrice";
import UpcomingMobiles from "@/components/home/UpcomingMobiles";

export default function HomePage() {
  return (
    <>
      <TrendingNews />
      <MobileList />
      <BrandShowcase />
      <PriceFinder />
      <BestByPrice />
      <UpcomingMobiles />
    </>
  );
}

Server vs Client Components

By default, all components are server components — they render on the server, ship zero JavaScript, and are fast. Use "use client" at the top of a file only when you need interactivity (state, effects, event handlers):

"use client";  // Required for interactive components

import { useState } from "react";

export default function PriceFinder() {
  const [min, setMin] = useState(5000);
  const [max, setMax] = useState(25000);
  // ...
}

Path Aliases

The @/ alias points to the project root, so you can write clean imports:

import Header from "@/components/layout/Header";
import { mobiles } from "@/lib/data";
import type { Mobile } from "@/types";

Configured in tsconfig.json via the paths entry.

07Styling & Tailwind CSS

Customize colors, fonts, and spacing through one config file.

Tailwind Configuration

All theme tokens live in tailwind.config.ts. Edit this single file to rebrand the entire site:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          primary: "#363062",    // navy
          secondary: "#f99417",  // orange
        },
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
      },
    },
  },
  plugins: [],
};
export default config;

Using Tailwind Utility Classes

Style any element directly with utility classes — no CSS file needed:

<button className="bg-brand-primary text-white px-4 py-2 rounded
                   hover:bg-brand-secondary transition-colors">
  Compare Now
</button>

Global Styles

Global CSS (the Tailwind base layers, fonts, and any custom resets) lives in app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply text-slate-800 bg-white antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply bg-brand-primary text-white px-4 py-2 rounded;
  }
}

Changing the Primary Brand Color

Open tailwind.config.ts, edit the brand.primary value, and save. Tailwind regenerates classes on the fly during development.

Typography & Custom Fonts

Trendexa uses the Next.js font system for automatic optimization. To swap to a different Google Font, edit app/layout.tsx:

import { Poppins } from "next/font/google";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
});

// then apply: <body className={poppins.className}>

08React Components & Hooks

How interactivity, sliders, and forms are wired up.

Trendexa keeps its dependencies lean. The following libraries are used:

Sliders & Carousels

Carousels are powered by Swiper. The slider must be a client component — note the "use client" directive at the top:

"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";

export default function FeaturedMobileSlider({ items }) {
  return (
    <Swiper
      modules={[Navigation, Autoplay]}
      slidesPerView={4}
      spaceBetween={16}
      navigation
      autoplay={{ delay: 4000 }}
      breakpoints={{
        640: { slidesPerView: 2 },
        768: { slidesPerView: 3 },
        1024: { slidesPerView: 4 },
      }}
    >
      {items.map((item) => (
        <SwiperSlide key={item.id}>{/* card */}</SwiperSlide>
      ))}
    </Swiper>
  );
}

The Newsletter Form

The newsletter signup is a simple controlled form. Wire it to your provider (Mailchimp, ConvertKit, Resend, your own API route):

"use client";
import { useState } from "react";

export default function Newsletter() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "loading" | "ok" | "err">("idle");

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("loading");
    const res = await fetch("/api/subscribe", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email }),
    });
    setStatus(res.ok ? "ok" : "err");
  }
  // ...render form
}

Adding a New Hook

Custom hooks live in lib/hooks/. Example — a media query hook:

"use client";
import { useState, useEffect } from "react";

export function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false);
  useEffect(() => {
    const m = window.matchMedia(query);
    setMatches(m.matches);
    const handler = (e) => setMatches(e.matches);
    m.addEventListener("change", handler);
    return () => m.removeEventListener("change", handler);
  }, [query]);
  return matches;
}

09Header & Navigation Component

Customize the logo, social icons, and main menu — all in one component.

Where to Edit

The header lives at components/layout/Header.tsx. The mega menu is split out into components/layout/Navbar.tsx for cleaner organization.

Replacing the Logo

The logo is a static asset served from public/assets/trendexa-logo.png. Replace that file with your own logo (same name and dimensions) — no code changes needed.

Or, update the path in Header.tsx to use a different file:

import Image from "next/image";
import Link from "next/link";

<Link href="/">
  <Image
    src="/assets/your-logo.png"
    alt="Your Brand"
    width={180}
    height={50}
    priority
  />
</Link>

Recommended logo dimensions: 180 × 50 pixels. Use the priority prop on logos so they aren't lazy-loaded.

Editing the Main Menu

The menu is data-driven. Edit the menuItems array near the top of Navbar.tsx — the component renders the rest:

const menuItems = [
  { label: "Home", href: "/" },
  { label: "Mobile", children: [
    { label: "Latest Mobiles", href: "/mobile-brands" },
    { label: "Upcoming Mobiles", href: "/upcoming-mobiles" },
    { label: "5G Mobiles", href: "/category-view?filter=5g" },
  ]},
  { label: "Compare", href: "/comparison" },
  { label: "Reviews", href: "/reviews" },
  { label: "News", href: "/news" },
];

Social Icons

Update the social media URLs in Header.tsx with your real Facebook, LinkedIn, YouTube, and X (Twitter) profile links. Icons come from lucide-react or react-icons.

10Section Components

Each homepage block is its own self-contained component you can edit, reorder, or remove.

Trending News

components/home/TrendingNews.tsx — Three featured news cards. Pass in your own data via the items prop, or edit the default array inside the component.

Mobile Listing Grid

components/home/MobileList.tsx — A grid of mobile phones. Each card shows an image, name, and review/details buttons. Replace the demo data with a fetch call to your API:

// Server component — fetch directly
async function MobileList() {
  const res = await fetch(`${process.env.API_URL}/mobiles`,
    { next: { revalidate: 3600 } });  // ISR: 1 hour
  const mobiles = await res.json();
  return (
    <section>
      {mobiles.map((m) => <MobileCard key={m.id} {...m} />)}
    </section>
  );
}

Brand Showcase

components/home/BrandShowcase.tsx — Grid of mobile brand names. Each brand links to a filtered listing page. Add or remove brands from the brands array inside the component.

Best Mobile by Price Slider

components/home/BestByPrice.tsx — Swiper-powered carousel of "Best Mobile Under [Price]" cards. The currency symbol and price points are configurable via props or constants at the top of the file.

Popular Comparisons

components/home/PopularComparisons.tsx — Lists "Phone A vs Phone B" links that route to /comparison?a=...&b=....

Upcoming Mobiles

components/home/UpcomingMobiles.tsx — Carousel of devices that have not yet launched. Each card includes image, name, and tentative price.

Price Finder Widget

components/home/PriceFinder.tsx — Interactive client component with min/max price inputs that route the user to the category page with a query string on submit.

Reordering Sections

Open app/page.tsx and rearrange the JSX elements. The order in JSX is exactly the order they appear on the page:

export default function HomePage() {
  return (
    <>
      <TrendingNews />       {/* swap these two */}
      <MobileList />         {/* to reorder */}
      <BrandShowcase />
      {/* <PriceFinder /> — comment out to hide */}
      <BestByPrice />
    </>
  );
}

11Footer & Newsletter Component

Brand info, legal links, and signup form — all in one component.

Where to Edit

The footer lives at components/layout/Footer.tsx. The newsletter form is split into components/shared/Newsletter.tsx so it can be reused elsewhere.

Footer Columns

The footer is divided into four logical columns:

1. Brand block — logo, short tagline, and social icons.
2. About Us — secondary navigation (Home, Mobile, Reviews, News, How To).
3. Terms & Conditions — Terms of Service, Privacy Policy, Cookie Policy, Disclaimer, Contact.
4. Newsletter signup — email field and subscribe button.

Connecting Newsletter Signup

The newsletter form posts to a Next.js API route at app/api/subscribe/route.ts. You can call any provider from there without exposing secrets to the browser:

// app/api/subscribe/route.ts
export async function POST(req: Request) {
  const { email } = await req.json();

  // Example: Mailchimp
  const res = await fetch(
    `https://${process.env.MAILCHIMP_DC}.api.mailchimp.com/3.0/lists/${process.env.MAILCHIMP_LIST}/members`,
    {
      method: "POST",
      headers: {
        Authorization: `apikey ${process.env.MAILCHIMP_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ email_address: email, status: "subscribed" }),
    }
  );

  return Response.json({ ok: res.ok }, { status: res.ok ? 200 : 400 });
}

Environment Variables

Store secrets in .env.local at the project root (already in .gitignore):

MAILCHIMP_KEY=your-api-key-here
MAILCHIMP_LIST=abc123
MAILCHIMP_DC=us1
NEXT_PUBLIC_SITE_URL=https://yoursite.com

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Everything else stays server-only.

Copyright Line

Update the copyright year and brand name in Footer.tsx:

<p>© {new Date().getFullYear()} YourBrand — All rights reserved.</p>

12Browser Support

Trendexa is tested on all major modern browsers.

Lighthouse & Core Web Vitals

Out of the box, Trendexa scores 90+ on Lighthouse Performance, Accessibility, Best Practices, and SEO. Most score loss after customization comes from oversized images — keep using next/image and you'll be fine.

13Sources & Credits

Acknowledgements for the open libraries and resources used in this theme.

Trendexa includes or makes reference to the following open libraries and resources. All third-party assets remain property of their respective owners and are used in accordance with their licenses.

• Next.js — the React framework, by Vercel (MIT License)
• React & React DOM — UI library by Meta (MIT License)
• Tailwind CSS — utility-first CSS framework (MIT License)
• Swiper.js — touch-friendly slider library (MIT License)
• Lucide / React Icons — icon library (ISC / MIT License)
• TypeScript — typed superset of JavaScript by Microsoft (Apache 2.0)
• Inter font — the default UI font, served via next/font (Open Font License)
• Demo images — for preview only; not licensed for redistribution. Replace before launch.

14Support & Contact

We are here to help you get the most out of Trendexa.

Thank you again for choosing Trendexa. If you encounter any issue, have questions about installation, or need help with customization, please reach out through the official ThemeForest support channel attached to this item.

Before Contacting Support

1. Re-read the relevant section of this documentation.
2. Confirm you are using Node.js 18.17 or later.
3. Run rm -rf node_modules .next && npm install to rule out a stale install.
4. Check the terminal and browser console for any obvious error messages.
5. Test on a clean copy of the original package to rule out a custom edit.

What to Include in a Support Request

• Your purchase code from ThemeForest.
• A clear description of the problem and the steps to reproduce it.
• Your Node.js version (node --version) and OS.
• Browser name and version.
• Relevant terminal output or console errors (please paste, don't screenshot).

What Support Covers

• Bug fixes and reported template defects.
• Help with included features and standard customization questions.
• Installation problems with the original, unmodified package.
• Compatibility with the Node.js / browser versions listed above.

What Support Does Not Cover

• Custom feature development or third-party API integrations.
• Server, hosting, or domain configuration issues.
• Issues caused by modifications to the original codebase.
• General Next.js, React, or Tailwind teaching — please refer to their official docs.