cb50b040ea
This pull request correctly assigns boolean attributes for `<script />` to match the element as it is created by a server-side render. Prior to this pull request, we'd double-execute `<script>` tags with the `async`, `defer`, or `nomodule` property. --- Fixes #9070
143 lines
4.2 KiB
JavaScript
143 lines
4.2 KiB
JavaScript
import React from 'react'
|
|
import Head from 'next/head'
|
|
|
|
export default () => (
|
|
<div>
|
|
<Head>
|
|
{/* this will not render */}
|
|
<meta charSet="utf-8" />
|
|
{/* this will get rendered */}
|
|
<meta charSet="iso-8859-5" />
|
|
|
|
{/* this will not render */}
|
|
<meta name="viewport" content="width=device-width" />
|
|
{/* this will override the default */}
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
|
|
<meta content="my meta" />
|
|
|
|
{/* this will not render the content prop */}
|
|
<meta name="empty-content" content={undefined} />
|
|
|
|
{/* allow duplicates for specific tags */}
|
|
<meta property="article:tag" content="tag1" key="tag1key" />
|
|
<meta property="article:tag" content="tag2" key="tag2key" />
|
|
<meta property="dedupe:tag" content="tag3" key="same-key" />
|
|
<meta property="dedupe:tag" content="tag4" key="same-key" />
|
|
<meta property="og:image" content="ogImageTag1" key="ogImageTag1Key" />
|
|
<meta property="og:image" content="ogImageTag2" key="ogImageTag2Key" />
|
|
<meta
|
|
property="og:image:alt"
|
|
content="ogImageAltTag1"
|
|
key="ogImageAltTag1Key"
|
|
/>
|
|
<meta
|
|
property="og:image:alt"
|
|
content="ogImageAltTag2"
|
|
key="ogImageAltTag2Key"
|
|
/>
|
|
<meta
|
|
property="og:image:width"
|
|
content="ogImageWidthTag1"
|
|
key="ogImageWidthTag1Key"
|
|
/>
|
|
<meta
|
|
property="og:image:width"
|
|
content="ogImageWidthTag2"
|
|
key="ogImageWidthTag2Key"
|
|
/>
|
|
<meta
|
|
property="og:image:height"
|
|
content="ogImageHeightTag1"
|
|
key="ogImageHeightTag1Key"
|
|
/>
|
|
<meta
|
|
property="og:image:height"
|
|
content="ogImageHeightTag2"
|
|
key="ogImageHeightTag2Key"
|
|
/>
|
|
<meta
|
|
property="og:image:type"
|
|
content="ogImageTypeTag1"
|
|
key="ogImageTypeTag1Key"
|
|
/>
|
|
<meta
|
|
property="og:image:type"
|
|
content="ogImageTypeTag2"
|
|
key="ogImageTypeTag2Key"
|
|
/>
|
|
<meta
|
|
property="og:image:secure_url"
|
|
content="ogImageSecureUrlTag1"
|
|
key="ogImageSecureUrlTag1Key"
|
|
/>
|
|
<meta
|
|
property="og:image:secure_url"
|
|
content="ogImageSecureUrlTag2"
|
|
key="ogImageSecureUrlTag2Key"
|
|
/>
|
|
<meta
|
|
property="og:image:url"
|
|
content="ogImageUrlTag1"
|
|
key="ogImageUrlTag1Key"
|
|
/>
|
|
<meta
|
|
property="og:image:url"
|
|
content="ogImageUrlTag2"
|
|
key="ogImageUrlTag2Key"
|
|
/>
|
|
|
|
<meta property="fb:pages" content="fbpages1" />
|
|
<meta property="fb:pages" content="fbpages2" />
|
|
|
|
{/* both meta tags will be rendered since they use unique keys */}
|
|
<meta
|
|
name="citation_author"
|
|
content="authorName1"
|
|
key="citationAuthorTag1"
|
|
/>
|
|
<meta
|
|
name="citation_author"
|
|
content="authorName2"
|
|
key="citationAuthorTag2"
|
|
/>
|
|
|
|
<React.Fragment>
|
|
<title>Fragment title</title>
|
|
<meta content="meta fragment" />
|
|
</React.Fragment>
|
|
|
|
{/* the following 2 link tags will both be rendered */}
|
|
<link rel="stylesheet" href="/dup-style.css" />
|
|
<link rel="stylesheet" href="/dup-style.css" />
|
|
|
|
{/* only one tag will be rendered as they have the same key */}
|
|
<link rel="stylesheet" href="dedupe-style.css" key="my-style" />
|
|
<link rel="stylesheet" href="dedupe-style.css" key="my-style" />
|
|
|
|
{/* this should not execute twice on the client */}
|
|
<script src="/test-async.js" async></script>
|
|
{/* this should not execute twice on the client (intentionally sets defer to `yas` to test boolean coercion) */}
|
|
<script src="/test-defer.js" defer="yas"></script>
|
|
|
|
{/* such style can be used for alternate links on _app vs individual pages */}
|
|
{['pl', 'en'].map((language) => (
|
|
<link
|
|
rel="alternate"
|
|
key={language}
|
|
hrefLang={language}
|
|
href={'/first/' + language}
|
|
/>
|
|
))}
|
|
{['pl', 'en'].map((language) => (
|
|
<link
|
|
rel="alternate"
|
|
key={language}
|
|
hrefLang={language}
|
|
href={'/last/' + language}
|
|
/>
|
|
))}
|
|
</Head>
|
|
<h1>I can have meta tags</h1>
|
|
</div>
|
|
)
|