next/head

ネクスト・ヘッド

ネクスト・ヘッドを分かりやすく

next/head は、Next.js アプリケーション内の React コンポーネントにおいて、HTML の <head> 要素を操作するために使用される特別なコンポーネントです。これにより、ページ毎にメタタグやタイトルなどを独自に設定することができます。Next.js と TypeScript を組み合わせて使用することで、型安全で効率的な開発が可能になります。

メタタグとタイトルの設定

next/head を使って、ページごとに独自のメタタグやタイトルを設定する方法を見ていきましょう。以下は、Next.js と TypeScript を用いたサンプルコードです。

import Head from 'next/head'

const CustomHead = () => {
  return (
    <Head>
      <title>サンプルページ | サイト名</title>
      <meta name="description" content="サンプルページの説明文" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </Head>
  )
}

export default CustomHead

上記のコードでは、import Head from 'next/head'; で next/head をインポートし、CustomHead コンポーネント内で <Head> タグを使用しています。その中に、<title> や <meta> タグを追加することで、ページごとに独自のタイトルやメタデータを設定することができます。

カスタムスクリプトの追加

next/head を使って、ページごとに独自の外部スクリプトやスタイルシートを読み込むこともできます。以下は、Next.js と TypeScript を用いたサンプルコードです。

import Head from 'next/head'

const CustomHead = () => {
  return (
    <Head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </Head>
  )
}

export default CustomHead

上記のコードでは、<Head> タグ内に、<link> タグを使って外部スタイルシートを、<script> タグを使って外部スクリプトを読み込んでいます。これにより、特定のページでのみ必要となるスタイルシートやスクリプトを効率的に読み込むことができます。

動的なタイトルやメタタグの設定

next/head を使って動的にタイトルやメタタグを設定することもできます。例えば、ブログ記事のタイトルや説明文を動的に設定したい場合などに役立ちます。以下は、Next.js と TypeScript を用いたサンプルコードです。

import Head from 'next/head'

interface CustomHeadProps {
  title: string
  description: string
}

const CustomHead = ({ title, description }: CustomHeadProps) => {
  return (
    <Head>
      <title>{title} | サイト名</title>
      <meta name="description" content={description} />
    </Head>
  )
}

export default CustomHead

上記のコードでは、CustomHeadProps というインターフェースを定義し、CustomHead コンポーネントのプロパティとして title と description を受け取ります。そして、<title> タグと <meta> タグの中で、それぞれ受け取った title と description を動的に設定しています。これにより、ページごとに異なるタイトルや説明文を簡単に設定することができます。

まとめ

この記事では、Next.js の next/head を TypeScript とともに使用する方法について解説しました。next/head を使用することで、ページごとに独自のタイトルやメタデータを設定したり、外部スクリプトやスタイルシートを読み込むことができます。また、動的なタイトルやメタデータの設定も可能です。

Next.js と TypeScript を組み合わせることで、効率的で型安全な開発が可能となります。

Next.js を学ぶ一覧へ