Storefront — def-exsport-frontend-storefront

The customer-facing shop (exsportbags.com).

How this page was verified

Read on 2026-09-15 from package.json, next.config.ts, the App Router tree and the Apollo/NextAuth setup. Local checkout: /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 for a few non-GraphQL calls
Auth	NextAuth 4, jwt-decode
Forms	react-hook-form + zod
UI	Tailwind CSS v4 + Headless UI, hand-built components (no component library)
Maps	@react-google-maps/api (store locator)

Scripts: dev = next dev --turbopack, build = next build, start = next start, postbuild = next-sitemap. Run locally with PORT=3013.

Layout

• src/app/ — routes (App Router). Home /, catalogue /products and /products/[slug], /series, /collaboration, /flash-sale, /sale, /new-arrival, /search, checkout /checkout/shipping, auth /auth/*, account /user/*, /journals, /store-locator. There is no /cart route — the cart is a context and slide-over.
• src/lib/<domain>/ — GraphQL documents (*.gql.ts) and types, operations named front*.
• src/modules/<feature>/components/ — feature UI; src/components/ — the UI kit.
• src/context/ — five contexts: cart, address, homepage, dialog, alert.

How it works

• Mostly client-rendered. Pages are "use client" and fetch through Apollo hooks. Server components are used narrowly for SEO metadata (generateMetadata in a few layout.tsx). No SSG/ISR, no middleware.ts; route guards live inside pages. Fetching prod HTML shows no prices for this reason.
• Backend URL is ${NEXT_PUBLIC_API_URL}/graphql (dev: https://exsport.eris.place/be-api/graphql).
• Auth is NextAuth (src/app/auth.ts), Credentials provider → loginAsMember. The token rides in the NextAuth JWT session; the Apollo link and axios both send Bearer. Expiry triggers frontRefreshToken; failure forces sign-out.
• Payment uses DOKU's Jokul Checkout script loaded client-side (src/hooks/useDokuCheckoutPayment.tsx).

Config and flags

• next.config.ts: output: "standalone", X-Robots-Tag: noindex unless NEXT_PUBLIC_ENV === "production" (DEF07-2467), image domains from NEXT_PUBLIC_ASSETS_URL + S3, SVGs via @svgr/webpack.
• Feature flags (env booleans, actually consumed): NEXT_PUBLIC_FEAT_STORE_LOCATOR, NEXT_PUBLIC_FEAT_SEARCH, NEXT_PUBLIC_FEAT_HOMEPAGE_SETTINGS.
• Analytics: GA, GTM, Microsoft Clarity, Meta Pixel; e-commerce events in src/lib/analytic.ts.
• No i18n/locale routing; bilingual only in the data model.

Naming quirks

The Apollo wrapper file is appollo-wrapper.tsx (triple p); the homepage context exports HompageProvider; the community route is /comunity. All intentional-as-is — cite them exactly.

Branch model

Environment branches: main, staging, development. Auto-deploys on push.