refactor: replace script tags with next/script (#10)

* refactor: replace script tags with next/script Since next.js v12.1.0 some warnings was displayed because I was using some script tags. * build(deps): bump next-themes to v0.1.1
author: Armand Philippot <git@armandphilippot.com> 2022-02-21 19:34:01 +0100
committer: GitHub <noreply@github.com> 2022-02-21 19:34:01 +0100
commit: 17842893306410f878eed66af5e807870e61cc49 (patch)
tree: 57608ffb9374bb3bdbbe6b3c9903e6eaefa3c180 /src/components
parent: f18fe8caa611e9273c5504fa81522e1ac93b95d2 (diff)
5 files changed, 29 insertions, 38 deletions
diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
index 07b9259..c10fcf6 100644
--- a/src/components/Branding/Branding.tsx
+++ b/src/components/Branding/Branding.tsx
@@ -1,9 +1,9 @@
 import photo from '@assets/images/armand-philippot.jpg';
 import { settings } from '@utils/config';
-import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { ReactElement, useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Person, WithContext } from 'schema-dts';
@@ -62,12 +62,11 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
 
   return (
     <>
-      <Head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
-      </Head>
+      <Script
+        id="schema-branding"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <div id="branding" className={styles.wrapper}>
         <div className={styles.logo} ref={logoRef}>
           <div className={styles.logo__front}>
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
index 914a175..92350c0 100644
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,7 +1,7 @@
 import { settings } from '@utils/config';
-import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { useIntl } from 'react-intl';
 import { BreadcrumbList, WithContext } from 'schema-dts';
 import styles from './Breadcrumb.module.scss';
@@ -125,12 +125,11 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
 
   return (
     <>
-      <Head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
-      </Head>
+      <Script
+        id="schema-breadcrumb"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       {!isHome && (
         <nav id="breadcrumb" className={styles.wrapper}>
           <span className="screen-reader-text">
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index a263771..7215afe 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -3,10 +3,10 @@ import CommentForm from '@components/CommentForm/CommentForm';
 import { Comment as CommentData } from '@ts/types/comments';
 import { settings } from '@utils/config';
 import { getFormattedDate } from '@utils/helpers/format';
-import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Comment as CommentSchema, WithContext } from 'schema-dts';
@@ -175,12 +175,11 @@ const Comment = ({
 
   return (
     <>
-      <Head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
-      </Head>
+      <Script
+        id="schema-comments"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <li className={styles.item}>
         {comment.approved ? getApprovedComment() : getCommentStatus()}
       </li>
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 9c29df9..845d6fa 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -101,18 +101,13 @@ const Layout = ({
         <link rel="icon" href="/icon.svg" type="image/svg+xml" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
         <link rel="manifest" href="/manifest.webmanifest" />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(searchActionSchema),
-          }}
-        ></script>
       </Head>
       <Script
+        id="schema-layout"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      ></Script>
+      <Script
         strategy="afterInteractive"
         async
         src={`${settings.ackee.url}/${settings.ackee.filename}`}
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index 3fbfa63..8b20eca 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -5,11 +5,11 @@ import { TitleLevel } from '@ts/types/app';
 import { ArticleMeta, ArticlePreview } from '@ts/types/articles';
 import { settings } from '@utils/config';
 import Image from 'next/image';
-import Head from 'next/head';
 import Link from 'next/link';
 import { FormattedMessage } from 'react-intl';
 import { BlogPosting, WithContext } from 'schema-dts';
 import styles from './PostPreview.module.scss';
+import Script from 'next/script';
 
 const PostPreview = ({
   post,
@@ -68,12 +68,11 @@ const PostPreview = ({
 
   return (
     <>
-      <Head>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
-      </Head>
+      <Script
+        id="schema-post-preview"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article className={styles.wrapper}>
         {featuredImage && Object.keys(featuredImage).length > 0 && (
           <div className={styles.cover}>
author	Armand Philippot <git@armandphilippot.com>	2022-02-21 19:34:01 +0100
committer	GitHub <noreply@github.com>	2022-02-21 19:34:01 +0100
commit	17842893306410f878eed66af5e807870e61cc49 (patch)
tree	57608ffb9374bb3bdbbe6b3c9903e6eaefa3c180 /src/components
parent	f18fe8caa611e9273c5504fa81522e1ac93b95d2 (diff)