📘

Next.js v14 でのMetadataの設定について(ざっくり)

2024/04/18に公開

使用方法

静的にメタデータを設定する場合、Metadata オブジェクトを使用します。

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

canonicalを設定したい場合は下記のように記述します。

export const metadata = {
  title: '...',
  description: '...',
  alternates: {
    canonical: 'https://nextjs.org'
  },
}

注意点

公式にあるようにmetadataオブジェクトは「サーバーコンポーネント」でのみ使用できます。
page.tsxで'use client'とmetadataを併用することはできません。そのため、useStateやuseEffect等のクライアントサイドで記述するコードについては、別のファイルに分ける必要があります。

クリックするとカウントアップするページを作成したい場合

Hogeというページがあるとします。

hoge/page.tsx

import { Metadata } from 'next'
import { useState } from 'react'

export const metadata: Metadata = {
  title: 'Hoge Page',
  description: 'Hoge Pageです。',
}

export default function Home() {
  const [count, setCount] = useState(0)

  const handleOnClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>Hogeページです</h1>
      <button onClick={handleOnClick}>カウントアップ</button>
      <p>{count}</p>
    </div>
  )
}

useStateを使用してカウントアップ機能を実装する場合、上記のようにpage.tsxに直接記述するとエラーとなります。

Error: 
  × You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

これは前述のように、'use client'を宣言しているファイルでmetadataオブジェクトを使用できないためです。
そのため、ファイルを分けてあげる必要があります。

Hoge.tsx

'use client'

import { useState } from 'react'

const Hoge = () => {
  const [count, setCount] = useState(0)

  const handleOnClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>Hogeページです</h1>
      <button onClick={handleOnClick}>カウントアップ</button>
      <p>{count}</p>
    </div>
  )
}
export default Hoge

hoge/page.tsx

import { Metadata } from 'next'

import Hoge from './Hoge'

export const metadata: Metadata = {
  title: 'Hoge Page',
  description: 'Hoge Pageです。',
}

export default function Home() {
  return <Hoge />
}

この方法は下記の記事を参考にさせていただきました。

まとめ

超ざっくりですがNext.js v14でのMetaの設定方法を紹介させていただきました。
ほかのmetadataの設定方法は今後追加していきたいと思います。

使用方法

注意点

クリックするとカウントアップするページを作成したい場合

まとめ

Discussion