設定とファイル
framework()のオプションと、src/routes/に置けるファイルの一覧です。それぞれの使い方は、ガイドの各ページで説明しています。
このページの内容
framework
import元 @k8ordo/static
アプリをファイルに書き出すViteのプラグインです。ReactのプラグインとRSCのパイプラインを含んだ配列を返すので、pluginsにそのまま渡します。
framework(options?: StaticOptions): PluginOption[]引数
options.routesDirstring- ルートのディレクトリです。プロジェクトのルートからの相対パスで、既定は
src/routesです。変えても、生成されるファイルは.k8ordo/に書かれます。 options.paths(patterns: readonly string[]) => readonly string[] | Promise<readonly string[]>- パラメータを持つルートのURLを返す関数です。値の要るパターンの一覧を受け取り、URLの配列かそのPromiseを返します。URLにはViteの
baseを含めません。 options.sitestring- サイトの配信元です（
https://example.com）。渡すと、ビルドがsitemap.xmlも書きます。route.tsが受け取るrequest.urlのoriginも、この配信元になります。 options.cspReadonly<Record<string, readonly string[]>>- 各ページに書くContent-Security-Policyで、ディレクティブごとにソースの配列を渡します。ビルドがフレームワークのスクリプトのハッシュを足して、
<meta>に書きます。
戻り値
PluginOption[] — Viteのプラグインの配列。
注意
cspに<meta>では効かないディレクティブか'strict-dynamic'を渡すと、framework()を呼んだ時点で例外を投げます。
vite.config.tsimport { framework } from '@k8ordo/static';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
framework({
paths: () => ['/products/1', '/products/2'],
site: 'https://example.com',
}),
],
});ルートのファイル
src/routes/のディレクトリに置けるファイルと、それぞれがexportするもの、受け取るものです。これ以外の名前のファイルは、_で始まるディレクトリに置きます。
page.tsx
- default export：そのディレクトリのURLに答えるページのコンポーネントです。
paramsとpathnameを受け取ります。 paramsSchema：パラメータを検証するスキーマです。Standard Schemaを実装したものを渡します。省略できます。
layout.tsx
- default export：その下で描かれるものを
childrenで受け取って包むコンポーネントです。paramsとpathnameも受け取りますが、paramsは文字列として型が付きます。 paramsSchema：その下のすべてのページで、ページ自身のスキーマより先に走ります。
not-found.tsx
- default export：その下で、どのルートにも当たらなかったURLに答えるコンポーネントです。
paramsとpathnameを受け取り、paramsの値は検証されていない文字列です。 - このモードでは
404.htmlに書き出されるので、アプリに1つだけ置けます。
error.tsx
'use client'のファイルにします。- default export：
errorとresetを受け取るコンポーネントです。その下で例外が投げられたとき、代わりに描かれます。paramsは受け取りません。
loading.tsx
- default export：propsを受け取らないコンポーネントです。その下のページを待つ間、
<Suspense>のfallbackとして描かれます。
redirect.ts
- default export：行き先の文字列か、
{ to, permanent }です。toはルート表のパターンで書き、パラメータは当たった値で埋まります。 - このモードでは、訪問者を行き先へ送るページとして書き出されます。
route.ts
GETやPOSTなどのメソッド名のexport：{ request, params }を受け取り、Responseを返す関数です。paramsSchema：ページと同じく、パラメータを検証します。- このモードでは
GETだけをexportでき、その答えがURLのファイルとして書き出されます。
guard.ts
- このモードでは置けません。ビルドも
vite devも、名指しで拒みます。
@k8ordo/routerから使うもの
ルートのファイルが使う型と関数は、モードのパッケージではなく@k8ordo/routerから来ます。そのためページは、どちらのモードでも同じに書けます。
PageProps<pattern>：ページが受け取るpropsの型です。LayoutProps<pattern>：レイアウトが受け取るpropsの型です。ErrorProps：error.tsxが受け取るpropsの型です。RouteContext<pattern>：route.tsの関数が受け取る値の型です。notFound()：ページから投げると、いちばん近いnot-found.tsxが404として答えます。href()：ルート表に対して型の付いたURLを作ります。usePathname()とuseMatch()：ブラウザで今のURLを読むフックです。usePendingPathname()：遷移している途中の行き先を読むフックです。