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

スコア

総合スコア

60/100

リポジトリの品質指標に基づく評価

✓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

レビュー

💬

レビュー機能は近日公開予定です