Frontend Next Create Feature

Create Next.js Feature

Feature Folder

src/features/{name}/
├── components/       # UI for this domain
├── hooks/            # Feature hooks
├── store/            # Zustand store (if needed)
├── api/              # Client API + query keys (optional)
├── types/
└── index.ts          # Public exports

When to Use features/ vs components/

Example: New Wishlist Feature

features/wishlist/
├── store/wishlist.store.ts
├── hooks/use-wishlist.ts
├── components/WishlistButton.tsx
├── api/wishlist.api.ts
└── index.ts

Store Pattern

export const useWishlistStore = create<WishlistStore>()(
  persist((set, get) => ({
    items: [],
    add: (id) => set({ items: [...get().items, id] }),
  }), { name: `${BRAND}-wishlist` })
);

Service + Query Keys

// services/wishlist.service.ts or features/wishlist/api/
export const wishlistKeys = {
  all: ['wishlist'] as const,
  list: () => [...wishlistKeys.all, 'list'] as const,
};

Export Public API

// features/wishlist/index.ts
export { useWishlistStore } from './store/wishlist.store';
export { WishlistButton } from './components/WishlistButton';

Integrate in App

1. Add page in app/[locale]/ if needed
2. Wire into layout/header if global
3. Add translations in messages/en.json + ar.json

Checkout is the canonical complex feature — see @frontend-next/checkout.