96 lines
4.4 KiB
Markdown
96 lines
4.4 KiB
Markdown
|
# 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
|