innozverse-web-style

lastcow's avatarfrom lastcow

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for Next.js web development, focusing on App Router conventions, React Server Components (RSC), and standardized API client usage. It helps developers maintain architectural consistency, optimize performance by leveraging server-side rendering, and follow best practices for environment variable configuration and TypeScript implementation.

Use Cases

  • Scaffold new web features using the Next.js App Router to ensure consistent directory structures and layout patterns.
  • Optimize application performance by correctly delegating logic between Server Components and interactive Client Components.
  • Standardize backend integrations using a unified API client pattern to handle data fetching, loading states, and error boundaries.
  • Manage environment variables securely across both client-side and server-side environments following Next.js security protocols.
  • Accelerate frontend development by generating type-safe React components that adhere to specific organizational style guides.
nameinnozverse-web-style
descriptionFollow 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.

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