v3.1.5

Pages

src/pages 配下はファイルベースルーティングに対応したページファイルを作成できます。使用できる拡張子は .tsx または .jsxexport 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
}