Skip to content

Feat: landing page ssr + seo optimization#6

Draft
Alessandro100 wants to merge 8 commits intomainfrom
feat/1554-landing-page-optimization
Draft

Feat: landing page ssr + seo optimization#6
Alessandro100 wants to merge 8 commits intomainfrom
feat/1554-landing-page-optimization

Conversation

@Alessandro100
Copy link
Contributor

Summary:
closes #1554

Make the landing page a server component and apply best practices for SEO discoverability.

Landing Page Changes

  • It can now display with Javascript being disabled
  • It's setup as SSG -> allows for default caching in Vercel + fast performance
  • Lighthouse performance: Desktop 100, Mobile: [80-90] (current state mobile is 50)
  • SEO Audit able to see the page (see screenshots)

i18n Changed

  • Language is now done mobilitydatabase.org/fr and not fr.mobilitydatabase.org
  • More NextJs default setting -> made it possible to prerender static pages in all languages
  • Also preferred structure for (google seo)[https://developers.google.com/search/docs/crawling-indexing/url-structure#for-multi-regional-sites]

Follow up tickets

  • Making the header more SSR (complex)
  • Adjusting the links to be i18n compatible (ex: /fr navigating to /fr/feeds)
  • SSR Theme adjustment to avoid the dark mode flashing

Expected behavior:

Explain and/or show screenshots for how you expect the pull request to work in your testing (in case other devices exhibit different behavior).

Testing tips:

Provide tips, procedures and sample files on how to test the feature.
Testers are invited to follow the tips AND to try anything they deem relevant outside the bounds of the testing tips.

Please make sure these boxes are checked before submitting your pull request - thanks!

  • Run the unit tests with yarn test to make sure you didn't break anything
  • Add or update any needed documentation to the repo
  • Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
  • Linked all relevant issues
  • Include screenshot(s) showing how this pull request works and fixes the issue(s)

Build struture
Screenshot 2026-02-03 at 11 38 35

Screaming Spider SEO Auditing Tool

Current MobilityDatabase landing page
Screenshot 2026-02-02 at 14 45 39

New Landing Page
Screenshot 2026-02-02 at 14 46 02

@Alessandro100 Alessandro100 self-assigned this Feb 3, 2026
@Alessandro100 Alessandro100 requested a review from Copilot February 3, 2026 16:48
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR migrates the landing page to Next.js Server-Side Generation (SSG) for improved SEO and performance, and restructures internationalization from subdomain-based (fr.mobilitydatabase.org) to path-based (mobilitydatabase.org/fr) routing following Next.js conventions.

Changes:

  • Landing page converted to server component with SSG, enabling pre-rendering and better SEO discoverability
  • Internationalization restructured to use path prefixes (/fr) instead of subdomains, following Next.js and Google SEO recommendations
  • Removed react-helmet-async dependency in favor of Next.js native metadata API

Reviewed changes

Copilot reviewed 30 out of 32 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
src/proxy.ts Replaced subdomain-based locale detection with path-based locale routing using Next.js middleware
src/i18n/routing.ts New centralized routing configuration defining available locales and path prefix behavior
src/i18n/request.ts Updated to use requestLocale parameter from route segments instead of cookies
src/i18n/navigation.ts New locale-aware navigation utilities for Next.js App Router
src/i18n/config.ts Removed (replaced by routing.ts)
src/app/[locale]/page.tsx New SSG landing page with metadata for SEO optimization
src/app/[locale]/layout.tsx New locale-aware root layout replacing old layout.tsx
src/app/[locale]/components/HomePage.tsx Server component version of Home screen with translations
src/app/[locale]/components/SearchBox.tsx Extracted client-side search functionality from Home page
src/app/screens/Home.tsx Removed (replaced by HomePage server component)
src/app/context/ThemeProvider.tsx Fixed SSR hydration issues with theme initialization
src/app/components/Header.tsx Added SSR safety checks and lazy loading for better performance
src/app/components/ThemeToggle.tsx Removed direct localStorage access in favor of context state
src/app/App.tsx Added locale-aware basename for BrowserRouter compatibility
messages/en.json & messages/fr.json Added translation keys for home and about pages

xs: 2,
sm: 4,
},
fontWeight: 700,
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fontSize property is missing from this section's styling, but the previous Typography elements specify font sizes. For consistency and proper semantic heading hierarchy, consider adding an appropriate font size (e.g., fontSize: 18 or fontSize: '1.125rem').

Suggested change
fontWeight: 700,
fontWeight: 700,
fontSize: '1.125rem',

Copilot uses AI. Check for mistakes.
Comment on lines 46 to 48
<br /> <br />
In addition to our database, we develop and maintain other tools that
integrate with it such as&#20;
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 47-48 contains hardcoded English text that should be moved to the translation file. This text is not internationalized while the rest of the page uses t() for translations. Move this content to messages/en.json and messages/fr.json under the about namespace.

Copilot uses AI. Check for mistakes.
the GBFS Validator.
{t('gbfsValidator')}
</Button>
Additional benefits of using the Mobility Database include
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line contains hardcoded English text that should be moved to the translation file. While the list items below use t('benefits.*'), the introductory text is not internationalized. Add this text to the translation files for proper i18n support.

Suggested change
Additional benefits of using the Mobility Database include
{t('additionalBenefitsIntro')}

Copilot uses AI. Check for mistakes.
Comment on lines +12 to 13
// TODO: Revisit theme for best SSR practices

Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This TODO comment should be converted to a GitHub issue and linked here, or removed if the current implementation is considered acceptable. The current SSR theme handling may cause the "flash of unstyled content" mentioned in the PR description's follow-up tasks.

Suggested change
// TODO: Revisit theme for best SSR practices
// Theme is initialized from system preference and persisted via localStorage to
// provide a consistent experience between server-rendered markup and client-side hydration.

Copilot uses AI. Check for mistakes.
@vercel
Copy link

vercel bot commented Feb 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mobilitydatabase-web Error Error Feb 3, 2026 4:55pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Landing page SSR improvements

1 participant