48 lines
3.6 KiB
Markdown
48 lines
3.6 KiB
Markdown
# Implementer — F-014 Storefront catalog pages (SSG/ISR)
|
|
|
|
## Summary
|
|
Implemented storefront catalog pages for product detail, category listing, brand listing and search results using Next.js App Router server components, ISR, per-page metadata/OpenGraph, typed public API client functions and on-demand revalidation.
|
|
|
|
## Code changes
|
|
- Extended backend public search filter:
|
|
- `project/src/modules/catalog/domain/product.ts` adds `categorySlug` to search criteria.
|
|
- `project/src/modules/catalog/application/product-use-cases.ts` forwards `categorySlug`.
|
|
- `project/src/modules/catalog/api/catalog.routes.ts` accepts/logs `categorySlug` on `/products/search`.
|
|
- `project/src/modules/catalog/infrastructure/pg-product-search-repository.ts` filters products by category slug through public catalog/category tables.
|
|
- `project/src/modules/catalog/tests/product-use-cases.test.ts` covers forwarding `brandSlug` and `categorySlug` through the search port.
|
|
- Extended storefront API client:
|
|
- `project/storefront/src/lib/api.ts` adds `CategoryDto`, `BrandDto`, `getCategoryBySlug`, `getBrandBySlug`, `listCategoryTree`, and `categorySlug` search input.
|
|
- `project/storefront/src/lib/seo.ts` centralizes site URL/title helpers.
|
|
- Added catalog UI:
|
|
- `project/storefront/src/components/product-card.tsx`.
|
|
- `project/storefront/src/app/productos/[slug]/page.tsx` product detail route.
|
|
- `project/storefront/src/app/categoria/[slug]/page.tsx` category listing route.
|
|
- `project/storefront/src/app/marca/[slug]/page.tsx` brand listing route.
|
|
- `project/storefront/src/app/products/search/page.tsx` search results route.
|
|
- Added on-demand revalidation:
|
|
- `project/storefront/src/app/api/revalidate/route.ts` validates `REVALIDATE_SECRET` with `timingSafeEqual`, accepts supported catalog paths only, and calls `revalidatePath`.
|
|
|
|
## Rendering/SEO behavior
|
|
- Product/category/brand pages export `revalidate = 300` and `generateStaticParams() { return []; }`, allowing SSG/ISR generation without requiring a live backend at build time.
|
|
- Search page exports `revalidate = 120`.
|
|
- Search page bounds displayed/metadata query text to 200 characters before rendering or metadata generation.
|
|
- Product/category/brand/search pages export `generateMetadata` with title, description, canonical URL and OpenGraph data.
|
|
- Product page uses `/productos/<slug>` and never exposes internal ids in the URL.
|
|
- All pages are server components; no client components added.
|
|
|
|
## Evidence
|
|
- `cd project/storefront && npm run lint` — PASS.
|
|
- `cd project/storefront && npm run typecheck` — PASS.
|
|
- `cd project/storefront && npm run build` — PASS; Next output shows SSG routes for `/productos/[slug]`, `/categoria/[slug]`, `/marca/[slug]` and dynamic `/products/search` plus `/api/revalidate`.
|
|
- `cd project/storefront && npm run lint` after build — PASS.
|
|
- `cd project && npm run lint` — PASS.
|
|
- `cd project && npm run typecheck` — PASS.
|
|
- `cd project && npm test` — PASS: 17 files passed, 7 skipped; 64 passed, 33 skipped.
|
|
- `./scripts/verify.sh` — PASS.
|
|
- Internal review correction run: bounded search query text in search page, then storefront lint/typecheck/build/lint, backend lint/typecheck/test and verify all reran and passed.
|
|
- Security correction run: revalidation secret comparison changed to timing-safe comparison, then storefront lint/typecheck/build/lint, backend lint/typecheck/test and verify all reran and passed.
|
|
|
|
## Notes
|
|
- Lighthouse tooling is not installed; SEO score criterion is evidenced structurally: SSR/SSG pages, semantic content, metadata/OpenGraph, canonical URLs and no client JavaScript added for these pages.
|
|
- No cart or checkout UI added.
|