Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added keys to tags in <Head> component #417

Merged
merged 9 commits into from
Feb 22, 2024
Merged

Added keys to tags in <Head> component #417

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
df8294f
Added keys to meta information
PierreRe Jan 15, 2023
3003a7e
Added keys to tags in <Head> component
PierreRe Jan 15, 2023
cd7090a
Removed prefixes from keys in head components
PierreRe Dec 10, 2023
4577772
Merge branch 'main' into feat/keyed_tags_in_meta_component
PierreRe Dec 10, 2023
50f9d78
Refactored code as structured in main
PierreRe Dec 10, 2023
78c1a5e
Merge branch 'feat/keyed_tags_in_meta_component' into feat/keyed-tags…
PierreRe Dec 10, 2023
b925171
Merge branch 'main' into feat/keyed-tags-in-meta-component
PierreRe Dec 23, 2023
04f538e
Refactor page title in multiple examples
PierreRe Dec 23, 2023
cb6dfb2
Merge branch 'main' into feat/keyed-tags-in-meta-component
JohnAlbin Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/example-auth/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function IndexPage() {
return (
<>
<Head>
<title>Next.js for Drupal | Authentication Example</title>
<title key="title">Next.js for Drupal | Authentication Example</title>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code example is from the docs on Next.js that mention keys:

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

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

You can see that don't put a key on the title tag.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, but not for the docs, but for the function behind deduplication of the <title> Tag in the actual Head component here: https://github.com/vercel/next.js/blob/c5b5b1e3a3d85d498770a974c250c864e8d2a761/packages/next/src/shared/lib/head.tsx#L84

As per the docs, we could argue that only a single <title> is declared and deduplication is therefore not strictly necessarry.
However, the actual NextJS <Head> component handles the <title> and <base> tag differently from the <meta> tag. I guess, my initial problem originates in line 106 of the head component which sets the isUnique variable to false if a meta-property is not "name" or has no key.
https://github.com/vercel/next.js/blob/c5b5b1e3a3d85d498770a974c250c864e8d2a761/packages/next/src/shared/lib/head.tsx#L106

It was an interesting dive into the head component,
Cheers

</Head>
<div className="container max-w-2xl px-6 py-10 mx-auto">
<article className="prose lg:prose-xl">
Expand Down
9 changes: 6 additions & 3 deletions examples/example-blog/components/meta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export function Meta({ title, tags }: MetaProps) {
return (
<Head>
<link
key="canonical_link"
rel="canonical"
href={`${process.env.NEXT_PUBLIC_BASE_URL}${
router.asPath !== "/" ? router.asPath : ""
Expand All @@ -35,17 +36,19 @@ export function Meta({ title, tags }: MetaProps) {
})
) : (
<>
<title>{`${title} | Next.js for Drupal`}</title>
<title key="title">{`${title} | Next.js for Drupal`}</title>
<meta
key="description"
name="description"
content="A Next.js blog powered by a Drupal backend."
/>
<meta
key="og_image"
property="og:image"
content={`${process.env.NEXT_PUBLIC_BASE_URL}/images/meta.jpg`}
/>
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta key="og_image_width" property="og:image:width" content="800" />
<meta key="og_image_height" property="og:image:height" content="600" />
</>
)}
</Head>
Expand Down
2 changes: 1 addition & 1 deletion examples/example-custom-auth/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function IndexPage({
return (
<>
<Head>
<title>Next.js for Drupal | Custom Auth Example</title>
<title key="title">Next.js for Drupal | Custom Auth Example</title>
</Head>
<div>
<dl>
Expand Down
2 changes: 1 addition & 1 deletion examples/example-custom-fetcher/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function IndexPage({ nodes }: IndexPageProps) {
return (
<>
<Head>
<title>Next.js for Drupal | Custom Auth Example</title>
<title key="title">Next.js for Drupal | Custom Auth Example</title>
</Head>
<div>
{nodes.map((node) => (
Expand Down
2 changes: 1 addition & 1 deletion examples/example-custom-serializer/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function IndexPage({ nodes }: IndexPageProps) {
return (
<>
<Head>
<title>Next.js for Drupal | Custom Auth Example</title>
<title key="title">Next.js for Drupal | Custom Auth Example</title>
</Head>
<div>
{nodes.map((node) => (
Expand Down
4 changes: 2 additions & 2 deletions examples/example-graphql/pages/[...slug].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export default function NodePage({ resource }) {
return (
<Layout>
<Head>
<title>{resource.title}</title>
<meta name="description" content="A Next.js site powered by Drupal." />
<title key="title">{resource.title}</title>
<meta key="description" name="description" content="A Next.js site powered by Drupal." />
</Head>
{resource && <NodeArticle node={resource} />}
</Layout>
Expand Down
3 changes: 2 additions & 1 deletion examples/example-graphql/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ export default function IndexPage({ articles }) {
return (
<Layout>
<Head>
<title>Next.js for Drupal</title>
<title key="title">Next.js for Drupal</title>
<meta
key="description"
name="description"
content="A Next.js site powered by a Drupal backend."
/>
Expand Down
9 changes: 6 additions & 3 deletions examples/example-marketing/components/meta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export function Meta({ title, tags }: MetaProps) {
return (
<Head>
<link
key="canonical_link"
rel="canonical"
href={`${process.env.NEXT_PUBLIC_BASE_URL}${
router.asPath !== "/" ? router.asPath : ""
Expand All @@ -35,17 +36,19 @@ export function Meta({ title, tags }: MetaProps) {
})
) : (
<>
<title>{`${title} | Next.js for Drupal`}</title>
<title key="title">{`${title} | Next.js for Drupal`}</title>
<meta
key="description"
name="description"
content="A Next.js blog powered by a Drupal backend."
/>
<meta
key="og_image"
property="og:image"
content={`${process.env.NEXT_PUBLIC_BASE_URL}/images/meta.jpg`}
/>
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta key="og_image_width" property="og:image:width" content="800" />
<meta key="og_image_height" property="og:image:height" content="600" />
</>
)}
</Head>
Expand Down
2 changes: 1 addition & 1 deletion examples/example-query/components/article.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function Article({ article, ...props }: ArticleProps) {
return (
<>
<Head>
<title>{article.title}</title>
<title key="title">{article.title}</title>
</Head>
<article {...props}>
<h1 className="mb-4 text-6xl font-black leading-tight">
Expand Down
2 changes: 1 addition & 1 deletion examples/example-query/components/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export function Page({ page, ...props }: PageProps) {
return (
<>
<Head>
<title>{page.title}</title>
<title key="title">{page.title}</title>
</Head>
<article {...props}>
<h1 className="mb-4 text-6xl font-black leading-tight">{page.title}</h1>
Expand Down
3 changes: 2 additions & 1 deletion examples/example-query/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ export default function IndexPage({
return (
<Layout menu={menu}>
<Head>
<title>Example Query</title>
<title key="title">Example Query</title>
<meta
key="description"
name="description"
content="A Next.js site powered by a Drupal backend."
/>
Expand Down
2 changes: 1 addition & 1 deletion examples/example-search-api/pages/advanced.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default function AdvancedPage({
return (
<>
<Head>
<title>Next.js for Drupal | Search API Example</title>
<title key="title">Next.js for Drupal | Search API Example</title>
</Head>
<div className="container max-w-2xl px-6 py-10 mx-auto">
<article className="prose lg:prose-xl">
Expand Down
2 changes: 1 addition & 1 deletion examples/example-search-api/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function IndexPage() {
return (
<>
<Head>
<title>Next.js for Drupal | Search API Example</title>
<title key="title">Next.js for Drupal | Search API Example</title>
</Head>
<div className="container mx-auto py-10 px-6 max-w-2xl">
<article className="prose lg:prose-xl">
Expand Down
2 changes: 1 addition & 1 deletion examples/example-search-api/pages/paginated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function PaginatedPage() {
return (
<>
<Head>
<title>Next.js for Drupal | Search API Example</title>
<title key="title">Next.js for Drupal | Search API Example</title>
</Head>
<div className="container max-w-2xl px-6 py-10 mx-auto">
<article className="prose lg:prose-xl">
Expand Down
2 changes: 1 addition & 1 deletion examples/example-search-api/pages/simple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function SimplePage() {
return (
<>
<Head>
<title>Next.js for Drupal | Search API Example</title>
<title key="title">Next.js for Drupal | Search API Example</title>
</Head>
<div className="container max-w-2xl px-6 py-10 mx-auto">
<article className="prose lg:prose-xl">
Expand Down
10 changes: 6 additions & 4 deletions examples/example-umami/components/meta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,19 @@ export function Meta({ title, description }: MetaProps) {
return (
<Head>
<link
key="canonical_link"
rel="canonical"
href={absoluteURL(router.asPath !== "/" ? router.asPath : "")}
/>
<title>{`${title} | ${siteConfig.name}`}</title>
<meta name="description" content={description || siteConfig.slogan} />
<title key="title">{`${title} | ${siteConfig.name}`}</title>
<meta key="description" name="description" content={description || siteConfig.slogan} />
<meta
key="og_image"
property="og:image"
content={`${process.env.NEXT_PUBLIC_BASE_URL}/images/meta.jpg`}
/>
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta key="og_image_width" property="og:image:width" content="800" />
<meta key="og_image_height" property="og:image:height" content="600" />
</Head>
)
}
2 changes: 1 addition & 1 deletion examples/example-webform/pages/client-side.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function WebformPage({ teams }: WebformPageProps) {
return (
<>
<Head>
<title>Next.js for Drupal | Webform Example</title>
<title key="title">Next.js for Drupal | Webform Example</title>
</Head>
<div className="container max-w-2xl px-6 py-10 mx-auto">
<article className="prose lg:prose-xl">
Expand Down
2 changes: 1 addition & 1 deletion examples/example-webform/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function IndexPage() {
return (
<>
<Head>
<title>Next.js for Drupal | Webform Example</title>
<title key="title">Next.js for Drupal | Webform Example</title>
</Head>
<div className="container mx-auto py-10 px-6 max-w-2xl">
<article className="prose lg:prose-xl">
Expand Down
2 changes: 1 addition & 1 deletion examples/example-webform/pages/server-side.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function WebformPage({ teams }: WebformPageProps) {
return (
<>
<Head>
<title>Next.js for Drupal | Webform Example</title>
<title key="title">Next.js for Drupal | Webform Example</title>
</Head>
<div className="container max-w-2xl px-6 py-10 mx-auto">
<article className="prose lg:prose-xl">
Expand Down