feat: revalidate my pages breadcrumbs on demand

components/Current/Footer/index.tsx

@@ -17,7 +17,7 @@ export default async function Footer({ lang }: LangParams) {
       locale: lang,
     },
     {
-      tags: [`footer-${lang}`],
+      next: { tags: [`footer-${lang}`] },
     }
   )
 

components/Current/Header/index.tsx

@@ -30,7 +30,7 @@ export default async function Header({ lang, uid }: LangParams & HeaderProps) {
     const { data } = await request<HeaderQueryData>(
       GetHeader,
       { locale: lang },
-      { tags: [`header-${lang}`] }
+      { next: { tags: [`header-${lang}`] } }
     )
     const { data: urls } = await batchRequest<LanguageSwitcherQueryData>([
       {

components/MaxWidth/index.tsx

@@ -1,5 +1,9 @@
+"use client"
 import { cva } from "class-variance-authority"
 
+import { Lang } from "@/constants/languages"
+import { trpc } from "@/lib/trpc/client"
+
 import styles from "./maxWidth.module.css"
 
 import type { MaxWidthProps } from "@/types/components/max-width"
@@ -10,8 +14,11 @@ export default function MaxWidth({
   className,
   tag = "section",
   ...props
-}: MaxWidthProps
-) {
+}: MaxWidthProps) {
+  const d = trpc.contentstack.breadcrumbs.get.useQuery({
+    locale: Lang.en,
+    href: "/my-pages/overview",
+  })
   const Cmp = tag
   return <Cmp className={maxWidthVariants({ className })} {...props} />
 }

components/MyPages/Breadcrumbs/index.tsx

@@ -11,7 +11,6 @@ export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>
-        <BreadcrumbsWithLink href="#">{_("Home")}</BreadcrumbsWithLink>
         {breadcrumbs.map((breadcrumb) => {
           if (breadcrumb.href) {
             return (