# Innozverse Web Style
> Follow Next.js web development patterns including App Router conventions, client/server components, API client usage, and environment variables. Use when building web features, creating pages, or working with Next.js code.
- Skill: `majiayu000/innozverse-web-style` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/innozverse-web-style`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/innozverse-web-style/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/innozverse-web-style
---
# innozverse Web Development Style (Next.js)
Follow these patterns when building web features in apps/web.
## Next.js App Router
Use App Router (`src/app/`), not Pages Router.
### Page Structure
```typescript
// apps/web/src/app/users/page.tsx
export default function UsersPage() {
return Users
;
}
```
### Layout
```typescript
// apps/web/src/app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## API Client Usage
```typescript
'use client';
import { useState, useEffect } from 'react';
import { ApiClient } from '@innozverse/api-client';
const apiClient = new ApiClient(
process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080'
);
export default function UsersPage() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
apiClient.getUsers()
.then(setUsers)
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return Loading...
;
if (error) return Error: {error}
;
return {/* render users */}
;
}
```
## Client vs Server Components
- **Server Component** (default): No state, no effects, server-side rendering
- **Client Component** (`'use client'`): Interactive, state, effects, API calls
## Environment Variables
- Client-side: `NEXT_PUBLIC_*`
- Server-side: Any variable name
```typescript
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
```
## Best Practices
- Prefer server components when possible
- Use client components for interactivity
- Handle loading and error states
- Type all props and state
- Use TypeScript strict mode