クイックスタート

このページでは、TanStack Router アプリに TanStack Head Controller を導入する最短手順を示します。

1. パッケージをインストール

ninpmpnpm

ni tanstack-head-controller thc-plugin-merge thc-plugin-ttplate

npm install tanstack-head-controller thc-plugin-merge thc-plugin-ttplate

pnpm add tanstack-head-controller thc-plugin-merge thc-plugin-ttplate

2. ルーター作成時にコントローラーを context へ追加

router.tsx

tsx

import { createRouter } from '@tanstack/react-router'
import { createHeadController } from 'tanstack-head-controller'
import { thcMerge } from 'thc-plugin-merge'
import { thcTitleTemplate } from 'thc-plugin-ttplate'

export const router = createRouter({
  routeTree,
  context: {
    ...createHeadController({
      plugins: [
        thcMerge(),
        thcTitleTemplate({
          siteName: "My App"
        })
      ]
    })
  },
})

3. ルートドキュメントの head で描画

__root.tsx

tsx

import { HeadControllerRender } from 'tanstack-head-controller'

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ja'>
      <head>
        <HeadControllerRender />
      </head>
      <body>{children}</body>
    </html>
  )
}

4. 各ルートで head を定義

about.tsx

tsx

export const Route = createFileRoute('/about')({
  head: () => ({
    meta: [
      { title: 'About' },
      { property: 'og:title', content: 'About' },
    ],
  }),
})

5. 必要なら route context を編集

ここでは editContext を使っていますが、要点は「既存の context を保ったまま必要な設定だけを追加する」ことです。

about.tsx

tsx

import { editContext } from 'tanstack-head-controller/context'

export const Route = createFileRoute('/about')({
  context: (ctx) =>
    editContext(ctx, {
      configs: { debug: true },
    }),
})

次は利用方法で、プラグインや運用パターンを確認してください。

クイックスタート ​

1. パッケージをインストール ​

2. ルーター作成時にコントローラーを context へ追加 ​

3. ルートドキュメントの head で描画 ​

4. 各ルートで head を定義 ​

5. 必要なら route context を編集 ​