Pages
src/pages
配下はファイルベースルーティングに対応したページファイルを作成できます。使用できる拡張子は .tsx
または .jsx
で export default
が必須です。※Markdown で書く場合はこちら
INFO
- Head コンポーネントが使用できます
- Metadata を export できます
- 静的ビルドされるため React Hooks を使用することはできません
- Partial Hydration で React Hooks を含んだコンポーネントを設置することはできます
-
非同期関数
getStaticData
を用いた Fetch が使用できます - import した CSS は
bundle.css
として結合し全体に適応されます
// src/pages/index.tsx
import type { PageProps, Metadata } from "minista"
import { Head } from "minista"
export const metadata: Metadata = {
title: "Home",
}
export default function ({ url, title, children }: PageProps) {
return (
<>
<Head>
<title>{title}</title>
</Head>
<h1>{title}</h1>
</>
)
}
PageProps
Page では export した Metadata を props として利用できるほか、ページの url
を参照できます。
type PageProps = {
url: string
title: string
group: string
draft: boolean
[key: string]: any
}