Introduction

InstituteFlow - Education & Online Course NextJS Template

Thank you for choosing InstituteFlow — a modern education & online-learning platform template built with Next.js (App Router), React, TypeScript and SCSS. It ships with 10+ home-page concepts and 40+ inner pages, is fully responsive and SEO-ready out of the box. This guide explains how to install, run, customize and extend the template.

Requirements

This is a Next.js application (not a static HTML site), so you need a Node.js environment to run and build it.

Template Features

Installation

Unzip the template, open a terminal in the project folder and run the following commands:

# 1. Install dependencies
npm install

# 2. Start the development server (http://localhost:3000)
npm run dev

# 3. Create an optimized production build
npm run build

# 4. Serve the production build
npm run start

Available scripts:

What's Included

After purchasing InstituteFlow on themeforest.net with your Envato account, download the template package. It contains:

Project Structure

• Folder Structure
• Routing & Pages
• Styling (SCSS)
• Components & Scripts

Folder Structure

The project follows a clean, predictable structure based on the Next.js App Router:

app/                     # Routes (Next.js App Router)
  (home)/                # Default home page  ->  /
  (demos)/               # Demo home pages    ->  /e-learning, /marketplace, ...
  (inner)/               # Inner pages        ->  /about-v1, /courses-v1, /faq, ...
  (kindergarten)/        # Kindergarten demo & its inner pages
  layout.tsx             # Root layout: fonts, global styles, metadata, scripts
  sitemap.ts             # /sitemap.xml
  robots.ts              # /robots.txt
  manifest.ts            # /manifest.webmanifest (PWA)
  not-found.tsx          # 404 page
  error.tsx              # Route error boundary
  global-error.tsx       # Root error boundary
  scss/                  # SCSS source (7-1 pattern); entry: style.scss

components/
  layout/                # Header, footers, preloader, scripts, chrome
  home1/                 # Sections for the default home page
  pages/                 # Sections grouped by demo / inner page
  shared/                # Reusable pieces (breadcrumbs, ...)
  auth/                  # Login / signup forms

lib/
  siteConfig.ts          # Brand, URL, contact, social - single source of truth
  metadata.ts            # createMetadata() helper for per-page SEO

public/assets/           # Images, fonts, template JS/CSS

Routing & Pages

Every folder under app/ that contains a page.tsx becomes a route. Folders wrapped in parentheses such as (demos) are route groups — they organize files and apply a shared layout (header/footer) without adding anything to the URL.

For example, app/(inner)/courses-v1/page.tsx is served at /courses-v1. See Adding a Page to create your own.

Styling (SCSS)

All styles are written in SCSS under app/scss/ using the 7-1 pattern. The single entry file app/scss/style.scss is imported once in app/layout.tsx. Global variables (colors, fonts, spacing) live in app/scss/utils/_variables.scss and _theme.scss. Sass is compiled automatically by Next.js — just edit and save.

Components & Scripts

Pages are composed from small, reusable section components in components/. Most components are React Server Components (no client JavaScript). The template's interactive behaviors (GSAP animations, Swiper sliders, menus) are initialized in a single client module, components/layout/InstituteFlowScripts.tsx, which loads the vendor libraries and the template main.js after hydration.

Customization

• Site Configuration
• Changing Images
• Changing Brand Logo
• Changing Colors
• SEO & Metadata
• Adding a Page
• Environment Variables

Site Configuration

Most brand-level values live in one file: lib/siteConfig.ts. Change the brand name, production URL, description, share image, contact details and social links here and they update across the whole site (browser title, Open Graph tags, header/footer branding, and more).

export const siteConfig = {
  name: "InstituteFlow",
  url: process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000",
  title: "InstituteFlow - Education & Online Course NextJS Template",
  description: "...",
  ogImage: "/assets/imgs/home1/hero/hero-bg1_1.webp",
  locale: "en_US",
  contact: { email: "...", phone: "...", address: "..." },
  social: { facebook: "...", x: "...", instagram: "...", linkedin: "...", youtube: "..." },
};

Changing Images

All images live in the public/assets/imgs/ folder. To replace an image:

Changing Brand Logo

The logo files are in public/assets/imgs/logo/ (for example logo.svg, logo-white.svg). Replace the file with your own, keeping the same name, or update the logo path in components/layout/Header.tsx and the footer components. The text brand name is driven by siteConfig.name.

Changing Colors

The template is styled with SCSS. To change the theme colors:

SEO & Metadata

Each page exports its own title/description via the createMetadata() helper in lib/metadata.ts:

import { createMetadata } from "@/lib/metadata";

export const metadata = createMetadata({
  title: "Courses",
  description: "Browse our online courses.",
  path: "/courses-v1",
});

The root layout defines the title template (%s | InstituteFlow) and default Open Graph / Twitter tags. app/sitemap.ts and app/robots.ts generate /sitemap.xml and /robots.txt. Set NEXT_PUBLIC_APP_URL so they emit absolute production URLs.

Adding a Page

import { createMetadata } from "@/lib/metadata";

export const metadata = createMetadata({
  title: "My Page",
  description: "...",
  path: "/my-page",
});

export default function Page() {
  return <section>...</section>;
}

Then add the route to app/sitemap.ts and, if it should appear in the menu, to the navigation arrays in components/layout/Header.tsx.

Environment Variables

Copy .env.example to .env and adjust:

NEXT_PUBLIC_APP_URL=https://your-domain.com

NEXT_PUBLIC_APP_URL is the production origin used for canonical URLs, Open Graph tags and the sitemap.

Sources and Credits

This template is built on the following open-source projects:

• Next.js
• React
• TypeScript
• Sass (SCSS)
• Bootstrap
• GSAP
• Swiper Slider
• jQuery
• Magnific Popup
• Animate.css
• Odometer
• Font Awesome
• Google Fonts

Support

If you face any issue please contact us at Pixavation or through our Support Center. We provide real-time support for our customers.

Thank you for purchasing our Next.js template.