Feat: Migrating from next/head to built in SEO (metadata) (#2425)

## What's the purpose of this pull request?

Using the next metadata to define the SEO tags.

|before: NextSeo | After: fs-next-update |
|-|-|
|<img width="513" alt="image"
src="https://github.com/user-attachments/assets/bdeef211-d9eb-4fb8-9015-7566eb9c1659">|<img
width="468" alt="image"
src="https://github.com/user-attachments/assets/7c66bbea-9e1a-4cc8-81b7-1a24bc79c971">|

todo: 

- [ ] check duplicate tags
related issue: vercel/next.js#63489
It didn't work for me, I couldn't fix it :/ 
- [ ] after updating the `feat/next-13` branch with `main`, we need to
consider #2417 changes


Regarding the JSON-LD, I added it as recommended in the
[documentation](https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld):
by rendering the structured data as a <script> tag.

I've checked that the generated schema was the same as before and still
valid.
<img width="1520" alt="image"
src="https://github.com/user-attachments/assets/2c01efd0-0110-43c5-b95c-655e24cf0167">

|before: SiteLinksSearchBoxJsonLd | After: fs-next-update |
|-|-|
|<img width="909" alt="image"
src="https://github.com/user-attachments/assets/fda08173-3efa-4317-ab50-d52ca8e640c4">|<img
width="916" alt="image"
src="https://github.com/user-attachments/assets/a1b2af2e-bf53-4a61-9333-c16ba7ffd76b">|

**Question/Curiosity**: Does anyone know how this is being used?

## How to test it?

Navigate to packages/core, run `yarn dev`

**Metatags**
1. Open the [homepage](https://starter.vtex.app/) and inspect the page,
if using chrome, in the `Elements` tab, search for `meta`.
2. In another tab open the homepage: localhost:3000/fs-next-update , do
the same. Inspect and search for `meta`. Compare the tags, you should be
able to see all the tags in the stater here.
___

**JsonLd**
1. Open the [homepage](https://starter.vtex.app/) and inspect the page,
if using chrome, in the `Elements` tab, search for `SearchAction`.
<img width="200" alt="image"
src="https://github.com/user-attachments/assets/9ee2f3d8-cbb4-4183-a979-cc49ece55194">

2. In another tab open the homepage: localhost:3000/fs-next-update , do
the same. Inspect and search for `SearchAction`. Compare the script, it
should the same.


## References

- [SFS
815](https://vtex-dev.atlassian.net/browse/SFS-815?atlOrigin=eyJpIjoiZDMxYTJjYzY0MWZiNDAxZjllYWM1YTVkYWJmMmQ3MjEiLCJwIjoiaiJ9)
- [Nextjs Optimizing Metadata](
https://nextjs.org/docs/app/building-your-application/optimizing/metadata)

packages/core/app/fs-next-update/page.tsx

@@ -5,15 +5,16 @@ import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import RenderSections from 'app/components/cms/RenderSections'
 import { OverriddenDefaultBannerText as BannerText } from 'app/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultHero as Hero } from 'app/components/sections/Hero/OverriddenDefaultHero'
-import { OverriddenDefaultProductShelf as ProductShelf } from 'app/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import { OverriddenDefaultNewsletter as Newsletter } from 'app/components/sections/Newsletter/OverriddenDefaultNewsletter'
+import { OverriddenDefaultProductShelf as ProductShelf } from 'app/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import BannerNewsletter from 'app/components/sections/BannerNewsletter/BannerNewsletter'
 import ProductTiles from 'app/components/sections/ProductTiles'
 
 import Incentives from 'app/components/sections/Incentives'
 import PageProvider from 'app/sdk/overrides/PageProvider'
 import { getDynamicContent } from 'app/utils/dynamicContent'
 import { ComponentType } from 'react'
+
 import storeConfig from '../../faststore.config'
 
 /* A list of components that can be used in the CMS. */
@@ -53,6 +54,27 @@ const getHomeData = async () => {
   return { page, serverData }
 }
 
+export async function generateMetadata() {
+  const {
+    page: { settings },
+  } = await getHomeData()
+  return {
+    title: settings?.seo?.title ?? storeConfig.seo.title,
+    description: settings?.seo?.description ?? storeConfig.seo?.description,
+    titleTemplate: storeConfig.seo?.titleTemplate ?? storeConfig.seo?.title,
+    alternates: {
+      canonical: settings?.seo?.canonical ?? storeConfig.storeUrl,
+    },
+    metadataBase: new URL(storeConfig.storeUrl),
+    openGraph: {
+      type: 'website',
+      url: storeConfig.storeUrl,
+      title: settings?.seo?.title ?? storeConfig.seo.title,
+      description: settings?.seo?.description ?? storeConfig.seo.description,
+    },
+  }
+}
+
 async function Page() {
   const {
     page: { sections },
@@ -63,10 +85,30 @@ async function Page() {
     data: serverData,
   }
 
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    url: storeConfig.storeUrl,
+    potentialAction: [
+      {
+        '@type': 'SearchAction',
+        target: `${storeConfig.storeUrl}/s/?q={search_term_string}`,
+        'query-input': 'required name=search_term_string',
+      },
+    ],
+  }
+
   return (
-    <PageProvider context={context}>
-      <RenderSections sections={sections} components={COMPONENTS} />
-    </PageProvider>
+    <>
+      {/* Adding JSON-LD schema to the page */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <PageProvider context={context}>
+        <RenderSections sections={sections} components={COMPONENTS} />
+      </PageProvider>
+    </>
   )
 }