Fix: Make asset paths base-aware for GitHub Pages (NEXT_PUBLIC_BASE_PATH)

[ankitkr104]

Problem

• Static export produced root-absolute URLs (e.g., /Logo.svg, /effect.mp4, /_next/static/...) which break when the site is hosted under a repository subpath on GitHub Pages.

Changes

• Add NEXT_PUBLIC_BASE_PATH support and compute basePath / assetPrefix in next.config.ts.
• Prefix runtime asset references with ${process.env.NEXT_PUBLIC_BASE_PATH ?? ""} where needed (logos, video).
• Fix app/page.tsx video reference and remove stray broken fragment.
• Update components/Navbar.tsx, lib/deployments-ui.tsx, app/deployments/page.tsx, and app/deployments/[id]/DeploymentDetailClient.tsx to use base-aware logo paths.

Notes

• These are source-only changes. Rebuild/export with NEXT_PUBLIC_BASE_PATH=/Tectonic-EVM-WebUI (or set in CI) to regenerate out/ with correct prefixed URLs.

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

• This PR does not contain AI-generated code at all.
• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: TODO

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• Chores
  • Updated asset loading configuration to support flexible deployment paths, enabling the application to work correctly when deployed at custom base locations.
  • Enhanced configuration management for improved deployment scenario support across different hosting environments.

[coderabbitai]

Warning

Review limit reached

@ankitkr104, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 52 minutes and 47 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Pro

Run ID: b100d5fd-52bc-41a1-bf19-7418c4cf9e03

📥 Commits

Reviewing files that changed from the base of the PR and between 663be8e and fe73987.

📒 Files selected for processing (2)

• app/page.tsx
• next.config.ts

Walkthrough

next.config.ts is updated to derive basePath and assetPrefix from NEXT_PUBLIC_BASE_PATH when set, falling back to the existing GitHub Pages derivation. All static asset src attributes (Image and video) across the app are updated to prepend process.env.NEXT_PUBLIC_BASE_PATH ?? "" instead of using hardcoded root-relative paths.

Changes

Base-path-aware static assets

Layer / File(s)	Summary
next.config.ts base-path and assetPrefix computation next.config.ts	Computes basePath from NEXT_PUBLIC_BASE_PATH when present, falls back to the GitHub Pages derivation, and derives assetPrefix from the computed basePath with a trailing slash. The nextConfig fields now reference these variables instead of inline conditionals.
Static asset src updates across pages and components components/Navbar.tsx, app/page.tsx, app/deployments/page.tsx, app/deployments/[id]/DeploymentDetailClient.tsx, lib/deployments-ui.tsx	Every Image and video src attribute is updated to prepend process.env.NEXT_PUBLIC_BASE_PATH ?? "". Covers the navbar logo, hero image, stablecoin video, and all footer logo instances. Also removes a stale tsserver-refresh comment from app/page.tsx.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~4 minutes

Possibly related PRs

• StabilityNexus/Tectonic-EVM-WebUI#4: Implements the original GitHub Pages basePath/assetPrefix handling in next.config.ts and the associated /Logo.svg loading that this PR now generalizes with NEXT_PUBLIC_BASE_PATH.

Suggested labels

Typescript Lang

Poem

🐇 Hoppity-hop, the paths are now free,
No longer root-locked for all to see!
NEXT_PUBLIC_BASE_PATH leads the way,
Logos and heroes find their display.
✨ Every asset lands right where it should be!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: making asset paths base-aware for GitHub Pages deployment using the NEXT_PUBLIC_BASE_PATH environment variable.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/basepath-github-pages

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/page.tsx`:
- Line 280: The Image component at line 280 uses a relative path source
`./tectonic-hero.png` which is fragile in base-path contexts and inconsistent
with the pattern established elsewhere in the file and codebase. Replace the
relative path with a base-aware public path format (similar to the pattern used
for the image source on line 630) to ensure the hero image src attribute
resolves correctly regardless of the base-path configuration.

In `@next.config.ts`:
- Around line 8-10: The publicBase variable on line 8 captures the raw
environment variable NEXT_PUBLIC_BASE_PATH without normalization, which can
cause Next.js configuration validation errors if the value doesn't conform to
the required format. Create a normalization function or logic that processes
publicBase to ensure it either remains an empty string or is formatted as a path
starting with / and not ending with /. Apply this normalization to publicBase
before it is used in the basePath assignment on line 9, ensuring that regardless
of the raw environment input (such as repo, /repo/, or /), the basePath variable
will always meet Next.js requirements.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 5b561375-919a-4a49-a9dc-03be55a32f5e

📥 Commits

Reviewing files that changed from the base of the PR and between b4cfb6d and 663be8e.

📒 Files selected for processing (6)

• app/deployments/[id]/DeploymentDetailClient.tsx
• app/deployments/page.tsx
• app/page.tsx
• components/Navbar.tsx
• lib/deployments-ui.tsx
• next.config.ts