mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Jiachi LiuandGitHub
8941f8a135
### What Re-insert the metadata icons under body tag into head tag to ensure they can be proper displayed. ### Why * For chromium based browsers (Chrome, Edge, etc.) and Safari, icons need to stay under `<head>` to be picked up by the browser. Firefox doesn't have this requirement. * Firefox will always render svg > icon > png, so it doesn't matter to it. Made a test in https://icons-order-test.vercel.app/, you can play with the test cases here. These links can see the comparsion of the approach in the this PR. During deployment it's very hard to verify Safari as it's pretty broken. But deploymet works well. After we re-insert the icon from body into head, they can be properly displayed across all the browsers. Note: We insert the script during streaming rather than using a jsx element right after metadata to avoid the hydration errors Closes #76810 Closes NDX-951
26 lines
611 B
TypeScript
26 lines
611 B
TypeScript
import { type Metadata } from 'next'
|
|
import Link from 'next/link'
|
|
import { connection } from 'next/server'
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
await connection()
|
|
await new Promise((resolve) => setTimeout(resolve, 300))
|
|
|
|
return {
|
|
icons: {
|
|
// add version query to avoid caching on client side with multiple navs
|
|
icon: `/star.png?v=${Math.round(Math.random() * 1000)}`,
|
|
},
|
|
}
|
|
}
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<Link id="custom-icon-link" href="/custom-icon">
|
|
Back to previous page with custom icon
|
|
</Link>
|
|
</>
|
|
)
|
|
}
|