はじめる

npm install react react-dom server-only

npm install -D @k8ordo/framework @k8ordo/router vite typescript @types/node @types/react @types/react-dom

次の環境で動きます。

• React 19.3以上
• Vite 8以上
• Node.js 24以上

エージェント向けのガイドはnode_modules/@k8ordo/framework/docs/GUIDE.mdに入っています。AGENTS.mdなどからこのパスを参照させてください。

import { framework } from '@k8ordo/framework/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [framework({ mode: 'static' })],
'static'：サーバーなしで動かす
});

framework()が返すプラグインには、ReactのプラグインとRSCのパイプラインが入っています。@vitejs/plugin-reactを自分で足す必要はありません。

modeは省略できません。ここでは'static'モードから始めます。サーバーありで動かす'server'モードとの違いと選び方はモードの選び方を見てください。

{
  "include": [
    // ...
    ".k8ordo/**/*.ts"
  ]
}

フレームワークは、src/routes/から作ったルート表と型を.k8ordo/に書き出します。includeに足すと、href()に渡すパスとページのparamsに型が付きます。

import type { LayoutProps } from '@k8ordo/framework';

export default function RootLayout({ children }: LayoutProps<'/'>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

src/routes/layout.tsxは、すべてのページを包むレイアウトです。フレームワークはHTMLのテンプレートを持たないので、<html>と<body>、<html>のlang属性もこのファイルで書きます。

export default function HomePage() {
  return (
    <>
      <title>Home</title>
      <h1>Hello</h1>
    </>
  );
}

page.tsxを置いたディレクトリが、ページのURLになります。src/routes/page.tsxは/のページです。ディレクティブを書いていないファイルはServer Componentです。'static'モードではビルドのときに描画されます。

タイトルは、ページの中で<title>を描画して付けます。

ページ間のリンクには専用のコンポーネントが無く、素の<a>にhref()の値を渡します。ページの足し方とファイル名の決まりはルーティングを見てください。

vite dev
vite build

k8ordo: wrote 1 routes

vite devは、リクエストのたびにページを描画する開発サーバーです。Fast Refreshが効き、ファイルを保存すると表示がすぐに変わります。

vite buildはすべてのページを描画してdist/client/に書き出し、最後に書き出したルートの数を表示します。dist/client/はどの静的ホスティングにも置けます。

ホスティングへの置き方と、'server'モードでの動かし方はデプロイを見てください。