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 1 commit
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="head_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.

The Next.js docs at https://nextjs.org/docs/pages/api-reference/components/head mention that key should be added so that:

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:

It then shows an example of a meta tag not being duplicated. I think "meta tag" is what they meant by "tag" rather than "html tag".

If Next.js is adding duplicate title tags to the markup, then that's a Next.js bug. I don't think adding key="head_title" to our codebase makes any sense.

</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="head_link_canonical"
Copy link
Collaborator

Choose a reason for hiding this comment

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

Let's not prefix our key's with head_ or even with link_ or meta_. It seems overly verbose. If React is trying to dedupe a link element, it doesn't need the extra specificity of a prefix that duplicates the HTML structure.

tldr; let's use key="canonical" here.

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="head_title">{`${title} | Next.js for Drupal`}</title>
<meta
key="head_meta_description"
Copy link
Collaborator

Choose a reason for hiding this comment

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

key="description" please.

name="description"
content="A Next.js blog powered by a Drupal backend."
/>
<meta
key="head_meta_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="head_meta_og:image:width" property="og:image:width" content="800" />
<meta key="head_meta_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="head_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="head_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="head_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="head_title">{resource.title}</title>
<meta key="head_meta_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="head_title">Next.js for Drupal</title>
<meta
key="head_meta_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="head_link_canonical"
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="head_title">{`${title} | Next.js for Drupal`}</title>
<meta
key="head_meta_description"
name="description"
content="A Next.js blog powered by a Drupal backend."
/>
<meta
key="head_meta_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="head_meta_og:image:width" property="og:image:width" content="800" />
<meta key="head_meta_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="head_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="head_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="head_title">Example Query</title>
<meta
key="head_meta_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="head_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="head_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="head_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="head_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,19 +16,21 @@ export function Meta({ title, description }: MetaProps) {
return (
<Head>
<link
key="head_link_canonical"
rel="canonical"
href={absoluteURL(router.asPath !== "/" ? router.asPath : "")}
/>
<title>
<title key="head_title">
{`${title} | ${siteConfig.name}`}
</title>
<meta name="description" content={description || siteConfig.slogan} />
<meta key="head_meta_description" name="description" content={description || siteConfig.slogan} />
<meta
key="head_meta_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="head_meta_og:image:width" property="og:image:width" content="800" />
<meta key="head_meta_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="head_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="head_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="head_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