Next.js:ヘッドタグにカスタムタグを入力します

カスタマイズする方法headNext.jsアプリのタグ

Next.jsページコンポーネントから、ページヘッダーに情報を追加できます。

これは次の場合に便利です。

  • ページタイトルをカスタマイズしたい
  • メタタグを変更したい

どうすればそうできますか?

すべてのコンポーネント内でインポートできますHeadからのコンポーネントnext/headコンポーネントのJSX出力に含めます。

import Head from 'next/head'

const House = props => ( <div> <Head> <title>The page title</title> </Head> {/* the rest of the JSX */} </div> )

export default House

表示したいHTMLタグを追加できます。<head>ページのセクション。

コンポーネントをマウントするとき、Next.jsは内部のタグを確認しますHeadページの見出しに追加されます。コンポーネントをアンマウントするときも同じように、Next.jsがそれらのタグの削除を処理します。

私の無料ダウンロードNext.jsハンドブック


その他の次のチュートリアル: