product json-ld

package.json

@@ -19,6 +19,7 @@
     "react-countdown": "^2.3.5",
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",
+    "schema-dts": "^1.1.2",
     "server-only": "^0.0.1"
   },
   "devDependencies": {

src/_libs/servers/helper.hook.ts

@@ -18,21 +18,21 @@ interface IFetchGiphyProps {
 }
 
 export function userHelperHook() {
-  
-  const fetchGiphy = async ({ id = 'random' }: IFetchGiphyProps) => {
+
+  const fetchGiphy = async ({ id = 'random' }: IFetchGiphyProps): Promise<IGiphy> => {
     const r = await fetch(`https://api.giphy.com/v1/gifs/${id}?${decodeURIComponent(new URLSearchParams({
       api_key: process.env.GIPHY_API_KEY as string,
       rating: process.env.GIPHY_RATING as string,
       tag: (moment().day() === 5 ? process.env.GIPHY_TAG_IS_FRIDAY as string : process.env.GIPHY_TAG_IS_NOT_FRIDAY as string),
     }).toString())}`, { cache: 'no-store' });
     return await r.json();
   };
-  
+
   const metadata = async ({ id, robots }: IMetadataProps): Promise<Metadata> => {
     const description: string = 'Vinerea este în mod tradițional a cincea zi a săptămânii (pentru țările în care săptămâna începe lunea), care cade între zilele de joi și sâmbătă. Etimologie: Veneris dies (l.lat.) = Ziua zeiței Venus.';
     let giphy: IGiphy | undefined = undefined;
     let videos: any | null = null;
-    
+
     if (id) {
       giphy = await fetchGiphy({ id });
       videos = [
@@ -44,7 +44,7 @@ export function userHelperHook() {
         },
       ];
     }
-    
+
     return {
       title: 'Îi vineri?',
       description: EDaysOfWeek[moment().day()],
@@ -69,7 +69,7 @@ export function userHelperHook() {
       ],
     };
   };
-  
+
   return {
     metadata,
     fetchGiphy,

src/app/page.tsx

@@ -1,5 +1,6 @@
 import 'server-only';
 
+import { Product, WithContext } from 'schema-dts'
 import type { Metadata } from 'next';
 
 import { userHelperHook } from '@/_libs/servers/helper.hook';
@@ -14,6 +15,19 @@ export function generateMetadata(): Promise<Metadata> {
 export default async function () {
   const { fetchGiphy } = userHelperHook();
   const giphy = await fetchGiphy({});
-
-  return <HomeComponent giphy={giphy} />;
+
+  const jsonLd: WithContext<Product> = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: 'random gif',
+    image: giphy.data.images.downsized_large.mp4,
+    description: 'random gif',
+  }
+
+  return (
+    <>
+      <HomeComponent giphy={giphy} />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}/>
+    </>
+  );
 }

yarn.lock

@@ -1169,6 +1169,11 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
+schema-dts@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/schema-dts/-/schema-dts-1.1.2.tgz#82ccf71b5dcb80065a1cc5941888507a4ce1e44b"
+  integrity sha512-MpNwH0dZJHinVxk9bT8XUdjKTxMYrA5bLtrrGmFA6PTLwlOKnhi67XoRd6/ty+Djt6ZC0slR57qFhZDNMI6DhQ==
+
 semver@^7.3.5, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"