Building Test Static School Website: ... Using ThemeWagon Si-Education Next.js Template - Part 2
Summary
Details
Let me structure this into (A) what the template gives you, (B) why the documentation route is the right starting point, and (C) a concrete, low-risk way to implement course and mentor detail pages without over-engineering.
A. What the si-education template actually is
As you correctly observed:
It is a single-page landing UI shell
Intended to showcase:
categories
courses (in summary)
mentors (in summary)
But no detail routes exist
The only non-home route is:
src/app/(site)/documentation/page.tsx
Which is:
a static content page
already styled
already wired into the App Router
but semantically irrelevant for a real school site
So functionally, the app is:
/ → landing page
/documentation → template author documentation (throwaway)
This is typical of ThemeForest / ThemeWagon templates.
B. Why reusing the documentation route is a good idea
Your instinct here is exactly right.
Why this is the correct move
It already exists as a separate route
No router wiring needed
No layout duplication needed
No auth entanglement
It already renders rich, scrollable content
Headings
Sections
Long-form text
Code / prose blocks (which you can simplify)
It proves the layout works for non-landing pages
Header
Footer
Spacing
Typography
Zero risk to the home page
You can evolve it independently
In other words, this page is a perfect sacrificial prototype for content-heavy pages.
C. A clean, incremental upgrade path
I would recommend the following three-step evolution, keeping things deliberately simple.
Step 1: Duplicate documentation → parameterized detail page
Instead of hard-replacing documentation, do this:
src/app/(site)/courses/[slug]/page.tsx
src/app/(site)/mentors/[slug]/page.tsx
Then copy the documentation page into each and simplify it.
This immediately gives you URLs like:
/courses/react-basics
/mentors/john-doe
No CMS, no database, no backend.
Step 2: Use data.json as the content source (as you suggested)
Your idea of embedding HTML fragments in data.json is reasonable at this stage, especially because:
You are not building a public SaaS
Content volume is low
Author is technical (you)
Git-based editing is acceptable
Example:
{
"courses": [
{
"slug": "react-basics",
"title": "React Basics",
"contentHtml": "<p>This course covers...</p>"
}
],
"mentors": [
{
"slug": "ravi-s-iyer",
"name": "Ravi S. Iyer",
"bioHtml": "<p>30+ years in software...</p>"
}
]
}
Then in [slug]/page.tsx:
Load
data.jsonFind the matching entry
Render
dangerouslySetInnerHTML
This is perfectly acceptable for a controlled site like this.
Step 3: Link summaries → detail pages
From the landing page sections:
Courses → link to
/courses/[slug]Mentors → link to
/mentors/[slug]
This instantly upgrades the site from:
“marketing landing page”
to:
“actual informational education site”
I will answer them in increasing technical specificity.
1. What exactly is a landing page?
A landing page is a page whose primary purpose is conversion, not navigation.
Key characteristics:
Designed to be the first page a visitor lands on
Often reached via:
search results
ads
shared links
Emphasizes:
value proposition
highlights / summaries
calls to action (CTA)
Does not require the user to explore the site structure
Typical CTAs:
“Enroll now”
“Contact us”
“Learn more”
“Sign up”
A landing page may:
Be a single page
Contain multiple sections
Summarize offerings without deep detail
Importantly:
A landing page is defined by intent, not by URL or framework.
2. In the si-education template, are “home page” and “landing page” the same?
Yes — in this template, they are functionally the same page.
In the si-education template:
/contains:hero section
course summaries
mentor summaries
testimonials
contact form
There are no internal detail routes
The user is expected to:
read
get convinced
contact or enroll
That is classic landing-page behavior.
So in this specific case:
| Term | Meaning |
|---|---|
| Home page | The page served at / |
| Landing page | The primary conversion-focused entry page |
| Result | They are the same page |
Once you add:
/courses/[slug]/mentors/[slug]
the / page will remain a landing page, but it will no longer be the only meaningful page.
3. Is / always the home page in a Next.js app?
Yes, by convention and by routing rules.
In Next.js (both Pages Router and App Router):
/is mapped to the root routeIt is the default “home page” of the application
In App Router (your case):
src/app/page.tsx → /
If the file exists, that page is the home page.
If it doesn’t exist, / does not exist.
So technically:
“Home page” is simply the page rendered at
/.
There is nothing magical beyond that.
4. Important distinction: home page vs landing page vs index page
These terms often get conflated. Here is the clean separation:
| Term | Meaning |
|---|---|
/ route | Root URL of the app |
| Home page | Whatever page lives at / |
| Landing page | Any page intended as an entry + conversion point |
| Index page | Framework term meaning “default route file” |
So:
/courses/react-basicscould also be a landing page if you advertise that URL/could be a non-landing page in a dashboard-style app
5. Why this distinction matters for your design
Right now:
/= landing page = home page
After your planned changes:
/= landing page (overview)/courses/[slug]= informational detail pages/mentors/[slug]= informational detail pages
This is a natural evolution from:
marketing shell → informational site
And it does not require you to rename or rethink the home page.
6. Bottom line (jargon clarified)
Landing page is about purpose
Home page is about location (
/)In si-education today, they are the same
In Next.js,
/is always the home page if defined
...
Comments
Post a Comment