website/TECH-PLAN.md

Technical Plan

Stack

• Framework: Next.js (App Router, TypeScript)
• Styling: Tailwind CSS
• Internationalization: next-intl (or equivalent App Router i18n solution)
• Content: Payload CMS
• Deployment: Vercel or equivalent edge-capable host
• Images: Next.js Image + remote CDN loader
• Analytics: Plausible or GA4, to be decided

Rendering Strategy

• Marketing pages (Home, Products, About, Support landing, FAQ, Warranty, Contact, Dealers): static generation with on-demand revalidation from the CMS.
• Product detail routes: static generation with on-demand revalidation from the CMS. The route chooses either the default system-rendered layout or a project-local HTML template from webroot/Products/<template-id>/<locale>/index.html.
• Product detail routes must also render CMS-managed product relationships below the template region, including firmware / downloads, product videos, and product reviews when present.
• News: static generation with incremental revalidation.
• Downloads: static generation; file metadata served from CMS.
• Any dynamic form submission (Contact) uses a server action or serverless API route.

Internationalization

• URL structure: /en/... and /zh/...
• Each locale has independent CMS content, not a flat translation key map.
• Shared structured fields (specs, downloads, dealer data) are localized per field, not per document.
• Default locale resolution: first visit uses Accept-Language, with manual override persisted.

CMS Decision

Payload CMS is the selected content platform.

Rationale:

• TypeScript-native schema definitions align well with a Next.js codebase.
• Full control over bilingual content modeling without SaaS lock-in.
• Self-hosted or managed deployment options provide flexibility across regions.
• Better long-term control for product, support, dealer, and download content.

Implementation direction:

• Define localized collections and globals directly in Payload config.
• Keep structured content, media, redirects, and product template selection in the same CMS.
• Enumerate valid product templates from this project's webroot/Products/ directory.
• Use Payload preview integration for draft review in Next.js.
• Use Payload roles for editorial review and publishing.

SEO

• Server-rendered HTML with full metadata
• hreflang tags across every localized page
• Canonical URLs per locale
• sitemap.xml per locale, plus a combined index
• robots.txt with environment-aware rules
• Structured data: Organization, Product, FAQPage, BreadcrumbList
• 301 redirect map for legacy URLs, enforced at the edge

Performance Targets

• Lighthouse Performance ≥ 90 on mobile for Home, Products, Product Detail.
• LCP < 2.5s on 4G for homepage.
• CLS < 0.1 across all primary pages.
• Largest hero image served as AVIF/WebP with responsive sources.
• Video on hero is optional and must have a static poster fallback.

Mobile

• Mobile is treated as a primary layout, not an afterthought.
• Touch targets at least 44px.
• Product card grid collapses to single column on small screens.
• Navigation collapses to a drawer with clear language switch.

Accessibility

• WCAG 2.1 AA as baseline.
• All interactive elements keyboard reachable.
• Visible focus rings.
• Sufficient contrast ratios validated in design tokens.

Forms

• Contact form with server-side validation and spam protection.
• Warranty / support forms, if added later, follow the same pattern.

301 Redirect Strategy

• Collect legacy URL inventory before migration.
• Map each legacy path to the closest new page.
• Implement redirects in next.config.js or at the hosting edge.
• Monitor 404s post-launch and patch gaps.

Environments

• Local development
• Preview (per-branch) for editorial and stakeholder review
• Production

Seed Data

• Pre-launch environments use seed data scraped from the current Eversolo site (EN and ZH) so that staging reflects real product imagery and copy.
• Images, specs, support content, news, and dealer info are imported from the legacy site instead of using placeholder content.
• Product videos and external reviews are also imported from the legacy site and linked back to the related product entries so they can be rendered on product detail pages.
• Detailed rules live in SEED-DATA-POLICY.md.

Monitoring

• Uptime monitoring
• Error tracking (Sentry or equivalent)
• Core Web Vitals monitoring
• 404 and redirect monitoring post-launch