はじめに
こんにちは、エンジニアのkeitaMaxです。
今回はLaravel11とInertia.js・Reacrを使用して作成したページにmetaタグをつけたいと思います。
app.tsx
app.tsxのtitleを以下のようにします。（インストールした時に自動で入っているかもしれません）
app.tsx
const appName = import.meta.env.VITE_APP_NAME || 'application'
createInertiaApp({
title: (title) => `${title} | ${appName}`,
.envファイルにVITE_APP_NAMEが設定されていればその名前がappNameに入ります。
titleはこの後記述しますが、各ページで設定したtitleが入ります。
各ページ
例えばTopページがあったとして以下のようにHeadを入力します。
top.tsx
export const Top = React.memo(function Top() {
return (
<Head>
<title>TOP</title>
<meta name="description" content="TOPページです" />
</Head>
)
})
こうするとapp.tsxのtitleにTOPが入ります。
実際にどうついているのか
この状態でbuildしてどのようになるのかみてみます。
.envのVITE_APP_NAMEにはtest-appを入れます。
すると上の画像のように
descriptionには「TOPページです」
titleには「TOP | test-app」
と入ります
おわりに
この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。
最後まで読んでいただきありがとうございました！
参考