Storefront — def-exsport-frontend-storefront

Toko yang dilihat pelanggan (exsportbags.com).

Cara halaman ini diverifikasi

Dibaca pada 2026-09-15 dari package.json, next.config.ts, App Router tree, dan setup Apollo/NextAuth. Checkout lokal: /Volumes/xpro/erisristemena/nextjs/def-exsport-frontend-storefront.

Stack

Framework	Next.js 15.5.9 (App Router), React 19.1, TypeScript 5
Data	Apollo Client 3.13 + @apollo/client-integration-nextjs; axios untuk beberapa call non-GraphQL
Auth	NextAuth 4, jwt-decode
Forms	react-hook-form + zod
UI	Tailwind CSS v4 + Headless UI, komponen buatan sendiri (tanpa component library)
Maps	@react-google-maps/api (store locator)

Script: dev = next dev --turbopack, build = next build, start = next start, postbuild = next-sitemap. Jalankan di lokal dengan PORT=3013.

Struktur

• src/app/ — route (App Router). Home /, katalog /products dan /products/[slug], /series, /collaboration, /flash-sale, /sale, /new-arrival, /search, checkout /checkout/shipping, auth /auth/*, akun /user/*, /journals, /store-locator. Tidak ada route /cart — cart adalah context dan slide-over.
• src/lib/<domain>/ — dokumen GraphQL (*.gql.ts) dan type, operasi diberi nama front*.
• src/modules/<feature>/components/ — UI fitur; src/components/ — UI kit.
• src/context/ — lima context: cart, address, homepage, dialog, alert.

Cara kerjanya

• Sebagian besar client-rendered. Halaman memakai "use client" dan fetch lewat Apollo hook. Server component hanya dipakai secara sempit untuk metadata SEO (generateMetadata di beberapa layout.tsx). Tidak ada SSG/ISR, tidak ada middleware.ts; route guard ada di dalam halaman. Karena ini, fetch HTML prod tidak menampilkan harga.
• URL backend adalah ${NEXT_PUBLIC_API_URL}/graphql (dev: https://exsport.eris.place/be-api/graphql).
• Auth adalah NextAuth (src/app/auth.ts), Credentials provider → loginAsMember. Token ikut di session JWT NextAuth; Apollo link dan axios sama-sama mengirim Bearer. Expiry memicu frontRefreshToken; kalau gagal, dipaksa sign-out.
• Payment memakai script Jokul Checkout dari DOKU yang dimuat di sisi client (src/hooks/useDokuCheckoutPayment.tsx).

Config dan flag

• next.config.ts: output: "standalone", X-Robots-Tag: noindex kecuali NEXT_PUBLIC_ENV === "production" (DEF07-2467), image domain dari NEXT_PUBLIC_ASSETS_URL + S3, SVG lewat @svgr/webpack.
• Feature flag (env boolean, benar-benar dipakai): NEXT_PUBLIC_FEAT_STORE_LOCATOR, NEXT_PUBLIC_FEAT_SEARCH, NEXT_PUBLIC_FEAT_HOMEPAGE_SETTINGS.
• Analytics: GA, GTM, Microsoft Clarity, Meta Pixel; event e-commerce di src/lib/analytic.ts.
• Tidak ada i18n/locale routing; dwibahasa hanya di data model.

Keanehan penamaan

File Apollo wrapper adalah appollo-wrapper.tsx (p tiga kali); context homepage meng-export HompageProvider; route community adalah /comunity. Semua memang begitu apa adanya — kutip persis.

Model branch

Environment branches: main, staging, development. Auto-deploy saat push.