Agent Skills by ALSEL
Anthropic ClaudeLLM・AI開発⭐ リポ 0品質スコア 50/100

next

JSONスペックからルーティング・レイアウト・SSR・メタデータを備えた完全なNext.jsアプリケーションを生成する、json-render向けNext.jsレンダラー。`@json-render/next`を使用する際や、JSONスペックからNext.jsアプリを構築する場合、またはAIが生成するマルチページアプリケーションを作成するときに活用してください。

description の原文を見る

Next.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with @json-render/next, building Next.js apps from JSON specs, or creating AI-generated multi-page applications.

SKILL.md 本文

@json-render/next

JSON スペックを完全な Next.js アプリケーションに変換する Next.js レンダラー。ルート、ページ、レイアウト、メタデータ、SSR サポートを備えています。

クイックスタート

npm install @json-render/core @json-render/react @json-render/next

1. スペックを定義する

// lib/spec.ts
import type { NextAppSpec } from "@json-render/next";

export const spec: NextAppSpec = {
  metadata: {
    title: { default: "My App", template: "%s | My App" },
    description: "A json-render Next.js application",
  },
  layouts: {
    main: {
      root: "shell",
      elements: {
        shell: { type: "Container", props: {}, children: ["nav", "slot"] },
        nav: { type: "NavBar", props: { links: [
          { href: "/", label: "Home" },
          { href: "/about", label: "About" },
        ]}, children: [] },
        slot: { type: "Slot", props: {}, children: [] },
      },
    },
  },
  routes: {
    "/": {
      layout: "main",
      metadata: { title: "Home" },
      page: {
        root: "hero",
        elements: {
          hero: { type: "Card", props: { title: "Welcome" }, children: [] },
        },
      },
    },
    "/about": {
      layout: "main",
      metadata: { title: "About" },
      page: {
        root: "content",
        elements: {
          content: { type: "Card", props: { title: "About Us" }, children: [] },
        },
      },
    },
  },
};

2. アプリを作成する

// lib/app.ts
import { createNextApp } from "@json-render/next/server";
import { spec } from "./spec";

export const { Page, generateMetadata, generateStaticParams } = createNextApp({
  spec,
  loaders: {
    // Server-side data loaders (optional)
    loadPost: async ({ slug }) => {
      const post = await getPost(slug as string);
      return { post };
    },
  },
});

3. ルートファイルを設定する

// app/[[...slug]]/page.tsx
export { Page as default, generateMetadata, generateStaticParams } from "@/lib/app";

// app/[[...slug]]/layout.tsx
import { NextAppProvider } from "@json-render/next";
import { registry, handlers } from "@/lib/registry";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <NextAppProvider registry={registry} handlers={handlers}>
          {children}
        </NextAppProvider>
      </body>
    </html>
  );
}

重要な概念

NextAppSpec

トップレベルのスペックは Next.js アプリケーション全体を定義します:

  • metadata: ルートレベルの SEO メタデータ (タイトルテンプレート、説明、OpenGraph)
  • layouts: 再利用可能なレイアウト要素ツリー (各レイアウトは Slot コンポーネントを含む必要があります)
  • routes: URL パターンをキーとしたルート定義
  • state: すべてのルート間で共有されるグローバル初期状態

ルートパターン

ルートは Next.js の URL 規則を使用します:

  • "/" -- ホームページ
  • "/about" -- 静的ルート
  • "/blog/[slug]" -- 動的セグメント
  • "/docs/[...path]" -- キャッチオールセグメント
  • "/settings/[[...path]]" -- オプショナルキャッチオールセグメント

レイアウト

レイアウトはページコンテンツをラップします。すべてのレイアウトは、ページコンテンツがレンダリングされる場所に Slot コンポーネントを含む必要があります。レイアウトは spec.layouts で一度定義され、ルートの layout フィールドで参照されます。

ビルトインコンポーネント

  • Slot: レイアウト内の、ページコンテンツがレンダリングされるプレースホルダー
  • Link: クライアント側のナビゲーションリンク (next/link をラップ)

ビルトインアクション

  • setState: 状態値を更新します。パラメータ: { statePath, value }
  • pushState: 配列に追加します。パラメータ: { statePath, value, clearStatePath? }
  • removeState: インデックスで配列から削除します。パラメータ: { statePath, index }
  • navigate: クライアント側のナビゲーション。パラメータ: { href }

データローダー

レンダリング前にサーバーコンポーネント内で実行される非同期のサーバー側関数です。結果はページの初期状態にマージされます。

createNextApp({
  spec,
  loaders: {
    loadPost: async ({ slug }) => {
      const post = await db.post.findUnique({ where: { slug } });
      return { post };
    },
  },
});

SSR

ページは自動的にサーバーレンダリングされます。createNextApp の Page コンポーネントは非同期サーバーコンポーネントで、以下を行います:

  1. スペックからルートをマッチングする
  2. サーバー側のデータローダーを実行する
  3. メタデータを生成する
  4. 解決されたスペックをクライアントレンダラーに渡してハイドレーションを行う

エントリーポイント

  • @json-render/next -- クライアントコンポーネント (NextAppProvider, PageRenderer, Link)
  • @json-render/next/server -- サーバーユーティリティ (createNextApp, matchRoute, schema)

API リファレンス

サーバーエクスポート (@json-render/next/server)

  • createNextApp(options) -- Page、generateMetadata、generateStaticParams を作成
  • schema -- Next.js アプリ用のカスタムスキーマ (AI カタログ生成用)
  • matchRoute(spec, pathname) -- URL をルートスペックにマッチング
  • resolveMetadata(spec, route) -- ルートのメタデータを解決
  • slugToPath(slug) -- キャッチオールスラグ配列をパスに変換
  • collectStaticParams(spec) -- すべてのルートの静的パラメータを収集

クライアントエクスポート (@json-render/next)

  • NextAppProvider -- レジストリとハンドラーのコンテキストプロバイダー
  • PageRenderer -- オプショナルレイアウト付きのページスペックをレンダリング
  • NextErrorBoundary -- エラーバウンダリーコンポーネント
  • NextLoading -- ローディング状態コンポーネント
  • NextNotFound -- 見つからないコンポーネント
  • Link -- ビルトインナビゲーションコンポーネント (next/link をラップ)

ライセンス: Apache-2.0(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
vercel-labs
リポジトリ
vercel-labs/json-render
ライセンス
Apache-2.0
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/vercel-labs/json-render / ライセンス: Apache-2.0

関連スキル

OpenAILLM・AI開発⭐ リポ 6,054

agent-browser

AI エージェント向けのブラウザ自動化 CLI です。ウェブサイトとの対話が必要な場合に使用します。ページ遷移、フォーム入力、ボタンクリック、スクリーンショット取得、データ抽出、ウェブアプリのテスト、ブラウザ操作の自動化など、あらゆるブラウザタスクに対応できます。「ウェブサイトを開く」「フォームに記入する」「ボタンをクリックする」「スクリーンショットを取得する」「ページからデータを抽出する」「このウェブアプリをテストする」「サイトにログインする」「ブラウザ操作を自動化する」といった要求や、プログラマティックなウェブ操作が必要なタスクで起動します。

by JimmyLv
汎用LLM・AI開発⭐ リポ 1,982

anyskill

AnySkill — あなたのプライベート・スキルクラウド。GitHubを基盤としたリポジトリからエージェントスキルを管理、同期、動的にロードできます。自然言語でクラウドスキルを検索し、オンデマンドでプロンプトを自動ロード、カスタムスキルのアップロードと共有、スキルバンドルの一括インストールが可能です。OpenClaw、Antigravity、Claude Code、Cursorに対応しています。

by LeoYeAI
汎用LLM・AI開発⭐ リポ 1,982

engram

AIエージェント向けの永続的なメモリシステムです。バグ修正、意思決定、発見、設定変更の後はmem_saveを使用してください。ユーザーが「覚えている」「記憶している」と言及した場合、または以前のセッションと重複する作業を開始する際はmem_searchを使用します。セッション終了前にmem_session_summaryを使用して、コンテキストを保持してください。

by LeoYeAI
汎用LLM・AI開発⭐ リポ 21,584

skyvern

AI駆動のブラウザ自動化により、任意のウェブサイトを自動化できます。フォーム入力、データ抽出、ファイルダウンロード、ログイン、複数ステップのワークフロー実行など、ユーザーがウェブサイトと連携する必要があるときに使用します。Skyvernは、LLMとコンピュータビジョンを活用して、未知のサイトも自動操作可能です。Python SDK、TypeScript SDK、REST API、MCPサーバー、またはCLIを通じて統合できます。

by Skyvern-AI
汎用LLM・AI開発⭐ リポ 1,149

pinchbench

PinchBenchベンチマークを実行して、OpenClawエージェントの実世界タスクにおけるパフォーマンスを評価できます。モデルの機能テスト、モデル間の比較、ベンチマーク結果のリーダーボード提出、またはOpenClawのセットアップがカレンダー、メール、リサーチ、コーディング、複数ステップのワークフローにどの程度対応しているかを確認する際に使用します。

by pinchbench
汎用LLM・AI開発⭐ リポ 4,693

openui

OpenUIとOpenUI Langを使用してジェネレーティブUIアプリを構築できます。これらはLLM生成インターフェースのためのトークン効率的なオープン標準です。OpenUI、@openuidev、ジェネレーティブUI、LLMからのストリーミングUI、AI向けコンポーネントライブラリ、またはjson-render/A2UIの置き換えについて述べる際に使用します。スキャフォルディング、defineComponent、システムプロンプト、Renderer、およびOpenUI Lang出力のデバッグに対応しています。

by thesysdev
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: vercel-labs · vercel-labs/json-render · ライセンス: Apache-2.0