# Frontend Next Stack

> Next.js 15 App Router e-commerce stack: project layout, providers, regional i18n, dual API layer, conventions. Use when scaffolding a new Next.js storefront or onboarding to the frontend architecture.

- Skill: `xmuhameed/frontend-next-stack` (Agent Skill)
- Install (CLI): `npx skillmds@latest add xmuhameed/frontend-next-stack`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xmuhameed/frontend-next-stack/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xmuhameed (https://skillmd.com/u/xmuhameed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/xmuhameed/frontend-next-stack

---


# Next.js E-Commerce Stack

## Stack

Next.js 15+ · React 19 · next-intl v4 · TanStack Query v5 · Zustand v5 · RHF + Zod 4 · shadcn/ui · Tailwind v4 · motion

## Layout (new apps — use `src/`)

```
src/
├── app/[locale]/          # All user routes
├── components/ui/         # shadcn
├── components/{domain}/   # product, cart, layout
├── features/{domain}/     # cart, checkout, auth logic
├── lib/api/               # Server fetch (RSC)
├── lib/api-client.ts      # Client fetch
├── i18n/
├── messages/
├── providers/
├── hooks/
└── middleware.ts
```

## Providers

`QueryProvider → NextIntlClientProvider → AuthProvider → NotificationProvider`

## Key Conventions

- Regional locales: `en-ae`, `ar-ae`, `en-gl`, `ar-gl`
- Always `@/i18n/navigation` for Link/router — never raw next/link
- Server page + `*Client.tsx` wrapper
- Bilingual data: pick `name_en`/`name_ar` at render
- `getMediaUrl()` for all API images

## Related Skills

| Task | Skill |
|------|-------|
| Auth | `@frontend-next/auth` |
| New page | `@frontend-next/create-page` |
| New feature | `@frontend-next/create-feature` |
| API | `@frontend-next/api-layer` |
| Checkout | `@frontend-next/checkout` |
| Cart | `@frontend-next/cart` |
| i18n | `@frontend-next/i18n` |
| SEO | `@frontend-next/seo` |
| State | `@frontend-next/state-management` |
| Images | `@frontend-next/images-media` |
| Forms | `@frontend-next/forms` |