# Frontend Next Create Feature

> Create a new domain feature folder in Next.js: store, hooks, components, API services, types. Use when adding cart-like domains, new business features, or self-contained frontend modules.

- Skill: `xmuhameed/frontend-next-create-feature` (Agent Skill)
- Install (CLI): `npx skillmds@latest add xmuhameed/frontend-next-create-feature`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xmuhameed/frontend-next-create-feature/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-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/`

| `features/` | `components/` |
|-------------|---------------|
| Business logic + state | Presentational / shared UI |
| cart, checkout, auth | product cards, header, footer |
| Persisted stores | shadcn primitives in `ui/` |

## 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

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

## Service + Query Keys

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

## Export Public API

```typescript
// 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`.