Components

任意ですが、ページに使用するコンポーネントを分割して src/components に置く方法がおすすめです。v2 以降は CSS ファイルを読み込めるため、隣に置いて管理しやすくなりました。

import "./app-header.css"

const AppHeader = () => {
  return <header className="app-header">minista</header>
}

export default AppHeader

CAUTION

import した CSS は bundle.css として結合し全体に適応されます
静的ビルドされるため React の Hook を使用することはできません
React の Hook は Partial Hydration で使用できます

Head

import { Head } from "minista"

export default () => {
  return (
    <Head>
      <title>タイトル</title>
      <meta name="description" content="ディスクリプション" />
    </Head>
  )
}

<head> タグ内のデータを上書きする組み込みコンポーネント。使い方は react-helmet と同様です。

Comment

import { Comment } from "minista"

export default () => {
  return <Comment text="Comment Test" />
}
// => <!-- Comment Test -->

HTML コメントを残せる組み込みコンポーネント。本番ビルド時に適応されます。

Partial Hydration

ページは静的ビルドされますが、使用するコンポーネントは部分的に React App 化することが可能です。詳細は Assets の Partial Hydration を参照ください。