Edited at
Next.jsDay 3

Next.js で同名の meta タグを設定できるようになった

これは「Next.js Advent Calendar 2018」の3日目の投稿です。

本日、Next.jsに以下の修正がマージされ canary リリースされました。

Dedupe only items with unique key

https://github.com/zeit/next.js/pull/5800

これが待望の修正だったため紹介します。

これは、これまで


  • 一部の明示的に許可された meta タグ以外は同名 meta タグの重複を許可しない

という仕様であったものを


  • 重複が許可されない一部の meta タグを除いて同名の meta タグの重複を許可する

ように変更するものです。


何が嬉しいのか

外部サービスと連携させたい場合などに、同名の meta タグをリスト的に複数設定したい場面はあります。例えば以下の issue などがそのユースケース例です。

https://github.com/zeit/next.js/issues/4407

元々こういった要望としてあがっていました。

https://github.com/zeit/next.js/issues/3705

これを受けて、 next/head に「明示的に重複許可する meta タグ」を追加する改修が行われました。

https://github.com/zeit/next.js/pull/4121

しかし、この改修では重複を許可する meta タグがハードコーディングされているため、例えば上記したユースケースなどのカスタムタグを追加することができませんでした。つまり、追加するためにはユーザー側で fork したりパッチを当てるといった対策が必要でした。

僕も改めて要望を上げて修正案なども相談していたのですがうまい修正が思いつかず放置状態でした。

https://github.com/zeit/next.js/issues/4656

以上のような経緯があったため、今回の修正は待望のアップデートでした。


終わりに

要望の多い機能だったため、同じように困っていた方がいるかもと思い紹介記事を書きました。

この修正方法が思いついていれば pull-req 送れてもうちょっと早く対応できていたかもしれません…が、ひとまずよかった。Next.js チームには感謝です。