ESLint rule to enforce `key` property on tags inside `next/head`

Describe the feature you’d like to request

The Next.js docs for the next/head component states the following:

To avoid duplicate tags in your head you can use the key property, which will make sure the tag is only rendered once.

The idea is to enforce this recommendation with an eslint rule to prevent potential bugs (duplicate tags) by spotting cases where a key property is missing from tags that live inside next/head.

Describe the solution you’d like

We would need to create new rule for eslint-plugin-next. I suggest the name next-head-key. Not sure if this should be an error or a warning.

The rule would check for the presence of a key prop on:

• Direct children of the Head element,
• Children that are wrapped into maximum one level of <React.Fragment>
• Children that are wrapped into a top-level JSX array expression
• Ignore the <title> element as it already gets deduped automatically

Here’s how I would implement something like this: https://github.com/vercel/next.js/compare/canary...etienne-martin:next.js:eslint-head-key

Describe alternatives you’ve considered

The temporary solution I came up with in a different project was to write a global mock for next/head that would throw if a key property is missing. Not ideal.

[Enrique-Ambrocio]

I see. No worries! If anything should ever come up please don’t hesitate to reach out to me. Also, if you by any chance come across potential opportunities, could you possibly let me know? Thank you! @etienne-martin

[etienne-martin]

Hi @Enrique-Ambrocio, the issue is still open and we haven’t decided yet if we’re going to go forward with my suggestion. However, I see that @puneetkathar1 has already started working on it: https://github.com/vercel/next.js/pull/39975