ルーティング
ファイルシステムベースのApp Router：レイアウト、ページ、動的セグメント、Link、ナビゲーションフック。
App Routerは app/ 内のフォルダーをURLに対応付け、ブラウザーのアドレスバーや履歴と同期します。
ページ
page.tsx からコンポーネントをデフォルトエクスポートします。
app/sessions/page.tsxtsx
import { Text } from "@textjs/app";export default function SessionsPage() { return <Text bold>Sessions</Text>;}レイアウト
レイアウトはルートを囲み、ページを移動しても状態を保持します。
app/layout.tsxtsx
import type { ReactNode } from "react";import { Box, Text } from "@textjs/app";import Link from "@textjs/app/link";export const metadata = { title: { default: "Acme", template: "%s · Acme" } };export default function RootLayout({ children }: { children?: ReactNode }) { return ( <Box className="flex-col w-full h-full"> <Box className="flex-row h-1 px-1 gap-2"> <Text bold>▼ Acme</Text> <Link href="/" shortcut="1">Home</Link> <Link href="/sessions" shortcut="2">Sessions</Link> </Box> <Box className="grow">{children}</Box> </Box> );}動的セグメント
app/sessions/[id]/page.tsxtsx
import { Text, type PageProps } from "@textjs/app";export default function SessionPage({ params }: PageProps<{ id: string }>) { return <Text>Session {params.id}</Text>;}ナビゲーション
<Link>
<Link> はフォーカス可能で、単一キーのショートカットに対応しています。
| プロパティ | 説明 |
|---|---|
href | 移動先のパス |
shortcut | リンク先へ移動するキー |
replace | 履歴エントリーを置き換える |
useRouter
コードから移動します。
const router = useRouter();router.push("/sessions/new");router.back();usePathname と useParams
現在のルートを読み取ります。
import { useParams, usePathname } from "@textjs/app/navigation";const pathname = usePathname(); // "/sessions/42"const { id } = useParams<{ id: string }>(); // "42"戻る、進む、ディープリンクのすべてに対応しています。静的ホストでは、動的セグメントに index.html へのフォールバックが必要です。static アダプターは、このフォールバックを 404.html として書き出します。