Home
NextSaaS

Creating New Pages in NextSaaS Project

This guide provides comprehensive instructions for creating new pages in the NextSaaS project, which uses Hugo 0.141.3 architecture.

Project Structure Overview#

The project follows Next.js App Router structure:

nextsaas-hugo/
├── archetypes/            # default setting for a file at the time of creation
├── assets/                # All the assets file such as js, css. ( we use themes/assets for this)
├── content/               # All the site data for pages.
├── data/                  # Common data such as client list for the site.
├── i18n/                  # Mutilingual support folder
├── layouts/               # Layouts for pages( we use themes/layout for this)
├── static/                # Static files such as images, font, js librarys( we use themes/static for this)
├── themes/
│   ├── nextsass/             # Theme components
│   │   ├── archetypes/       # default setting for a file at the time of creation
│   │   ├── assets/           # All the assets file such as js, css.
│   │   ├── content/          # All the site data for pages.
│   │   ├── i18n/             # Mutilingual support folder
│   │   ├── layouts/          # Default layouts, Page layouts and Partials for pages
│   │   ├── static/           # Static files such as images, font, js librarys
│   │   ├── theme.toml        # theme details information
│   │   ├── hugo_stats.json   # List total htmlElements use in the theme
├── hugo_stats.json           # List total htmlElements use in the theme
├── hugo.toml                 # All site default parameters.
├── package.json              # Dependencies and scripts
└── README.md                 # Basic installation guide
├── varcel.json               # version declare for varcel

Creating a Page#

Step 1: Create the Page Directory and File

  1. Create a new folder under themes/nextsaas/layouts with your page name and a list.html file:
  2. if this page has details pages, also add a single.html file.

Step 2: Create the Basic Page Structure


{{ define "main" }}

  {{ partial "shared/header-one.html"
    ( dict
      "class" "border border-stroke-2 dark:border-stroke-6 bg-accent dark:bg-background-9"
      "btnClass" "btn-primary hover:btn-white-dark dark:hover:btn-white"
    )
  }}

  <main>
    {{ partial "pages/home-page-01/hero.html" .}}
    {{ partial "pages/home-page-01/about.html" .}}
    {{ partial "pages/home-page-01/how-it-works.html" .}}
    {{ partial "pages/home-page-01/our-services.html" .}}
    {{ partial "pages/home-page-01/faq.html" .}}
    {{ partial "pages/home-page-01/timeline-integration.html" .}}
    {{ partial "pages/home-page-01/testimonial.html" .}}
    {{ partial "pages/home-page-01/blog.html" .}}
    {{ partial "shared/cta/cta-v1.html"
      ( dict
        "class" "dark:bg-background-6 bg-white"
        "badgeClass" "hidden"
        "ctaHeading" "Build a complete website using the"
        "btnClass" "hover:btn-secondary dark:hover:btn-white"
        "ctaBtnText" "Get started"
        "spanText" "assistance"
        "description" "Start your free trial today and see your ideas come to life easily and creatively."
      )
    }}
  </main>

  {{ partial "shared/footer-one.html" . }}

{{end}}

Partial Component#

All the available partials are in the themes/nextsaas/layouts.patials folder. You can pick any of the partial to use in the pages.