SKILL.md

name: innozverse-web-style description: 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.

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

Score

Total Score

60/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20

○LICENSE

ライセンスが設定されている

0/10

✓説明文

100文字以上の説明がある

+10

○人気

GitHub Stars 100以上

0/15

○最近の活動

3ヶ月以内に更新がある

0/10

○フォーク

10回以上フォークされている

0/5

✓Issue管理

オープンIssueが50未満

+5

✓言語

プログラミング言語が設定されている

+5

○タグ

1つ以上のタグが設定されている

0/5

Reviews

💬

Reviews coming soon