majiayu000 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
// apps/web/src/app/users/page.tsx
export default function UsersPage() {
return <div>Users</div>;
}
Layout
// apps/web/src/app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
API Client Usage
'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<string | null>(null);
useEffect(() => {
apiClient.getUsers()
.then(setUsers)
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <div>{/* render users */}</div>;
}
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
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