## Next.jsで`meta`タグを出し分ける方法
まず Next.js で`meta`タグを出し分ける方法ですが、`next/head`を利用すればサーバー側で`meta`タグを生成してくれるので、OGP画像なども適切に埋め込むことができます。

参考: [https://nextjs.org/docs/api-reference/next/head](https://nextjs.org/docs/api-reference/next/head)

## 設定したはずの`meta`タグが表示されない
実際に`next/head`を使って`title`や`og:image`を挿入したはずが、実際にレンダリングされたページを見ると挿入されていないという問題が発生しました。
そこで考えられる原因と対策を紹介しようと思います。

## `Head`の中に2階層以上のコンポーネントを配置している
> title, meta or any other elements (e.g. script) need to be contained as direct children of the Head element, or wrapped into maximum one level of &lt;React.Fragment&gt; or arrays—otherwise the tags won't be correctly picked up on client-side navigations.

公式ドキュメントにもあるように、`Head`の直下か、最大1階層の`React.Flagment`、もしくは配列に記述する必要があります。

参考: [https://nextjs.org/docs/api-reference/next/head](https://nextjs.org/docs/api-reference/next/head)

## `_document.js`内の`Head`で`title`を定義している
> Adding &lt;title&gt; in pages/_document.js will lead to unexpected results with next/head since _document.js is only rendered on the initial pre-render.

上記のように公式ドキュメントに書いてあります。実際に僕も間違えて`_document.js`内に`title`タグを配置したときに上手く`og:image`などが出力されない問題が確認できました。

ドキュメントにもあるように`title`タグをグローバルに設定したい場合は`_app.js`に記述するようにしましょう。

参考: [https://nextjs.org/docs/messages/no-document-title](https://nextjs.org/docs/messages/no-document-title)

## 最後に
これは、実際に僕がこのブログを実装するときに直面した問題であり、実際に解決できた方法になります。

Next.jsの公式ドキュメントは充実しているので、基本的に原因と対処法が記載されています。なので、ドキュメントをしっかり読む癖を付けましょう(自戒)

Next.jsでmetaタグが思うように出力されないときの原因と対処法

Next.jsでmetaタグが思うように出力されない原因と対処法

## ブログを開設した経緯
現状、発信しているコンテンツが会社の開発者ブログくらいしかないので、そろそろ個人としても発信できる環境を整備しようかなと思い、開設に至りました。

## なぜ自作ブログなのか
発信する環境として、最近だと Qiita や Zenn などがありますが、なぜそのあたりを使わないかというと、せっかく個人として発信するのだから自分のドメインで配信したいという自己満からです。
また、単純にブログを作るのが好きなので作ってみました。過去にもブログを作っては壊してを繰り返しています。

## このブログで扱っている技術やサービス
タイトルにもあるように、このブログでは　React のフレームワークの Next.js と Headless CMS の Contentful 、ホスティティングサービスの Vercel を利用しています。

### Next.js とは
> **"The React Framework for Production"**  
> Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

つまるところ、高機能でDXが最高な React 製フレームワークということです。実際、独自での設定がほとんど必要なく、そのまま本番で公開することができるのでかなり快適です。
それでいて、SSG や ISR ができるので、ハイパフォーマンスで公開できます。
SSG や ISR についての詳細は下記のページが参考になると思います。
- [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended)
- [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)

公式サイト: [https://nextjs.org/](https://nextjs.org/)

### Contentful とは
> **"The content platform for the modern tech stack"**  
> Cloud-native. API-first. Endlessly extensible. We help you manage, integrate and deliver content across every digital channel.

つまり、クラウドで管理されたAPIファーストのコンテンツ管理サービスです。ブログ記事やユーザー情報などのコンテンツを API で提供できるようにしたものと考えて良いと思います。
実際に、この記事やページ内に設置されているプロフィール、記事に付けられたタグなども Contentful 上で設定して、 API 経由で Next.js で受け取っています。
サーバレスで構築できるのでフロントエンドが好きなエンジニアとしてはとてもありがたいです。

公式サイト: [https://www.contentful.com](https://www.contentful.com/?&utm_source=google&utm_medium=search-paid&utm_campaign=npd-brand&utm_content=&gclid=Cj0KCQiA64GRBhCZARIsAHOLriKyy0xOilLmIlJnEgX-4VL3MLOe_ZVzYATmFJYtFybF4Uy-U7lqMr8aAi7yEALw_wcB&gclsrc=aw.ds)

### Vercel とは
> Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

公式ページではこの文章に後述されているのですが、これも Next.js と同じく DX の向上を掲げているホスティングサービスになります。
GitHub と連携して、 Push すると即座に　Preview 環境がデプロイされたり、 Merge すると Production にデプロイされたりと、特別な設定なくインフラ環境を整えることができます。
恩恵を受けるほど活用はしていませんが、スケーラビリティも高いと書かれています。

公式サイト: [https://vercel.com/docs](https://vercel.com/docs)

## このブログの今後について
今後は、このブログを通して様々な発信をしていきたいと考えています。
過去にも何度かブログを作って数記事書いては壊すというのを繰り返していたのですが、今回は本格的に運用していけたらいいなと思っています。

"Next.js"のタグが付いた記事

Next.jsでmetaタグが思うように出力されない原因と対処法

Next.jsとContentfulでテックブログを作成する方法