Next.js Discord

Discord Forum

Data Fetching for a Dynamic NavBar

Unanswered
Golden northern bumble bee posted this in #help-forum
Open in Discord
Golden northern bumble beeOP
Hey, I'm trying to dynamically fetch data for my NavBar, I'm facing certain design challenges that needs to be solved and unable to figure it out using the Next App Router


1. Navigation is Dynamic (Data through Sanity and changes across Layouts) common across all site
2. Currently I am fetching data for the navigation in Layout.tsx (The Root Layout), If I fetch in a page.tsx, then I've to repeat again and again across multiple pages. If the data is fetched in another layout page, it is hydrating the root layout first and once it changes, it leads to a hydration error
3. What should be the optimal method of doing this?



Layout.tsx

import type { Metadata } from "next";
import { JetBrains_Mono } from "next/font/google";
import { GeistSans } from "geist/font/sans";
import "./globals.css";
import Ribbon from "@/components/navigation/Ribbon";
import Navigation from "@/components/navigation/Navigation";
import { Toaster } from "@/components/ui/toaster";
import { client } from "../sanity/lib/client";
import FooterBar from "@/components/navigation/footer";


async function getNavigation() {
  const query = `
  *[_groq query]{
 `;
  const data = await client.fetch(query);
  return data;
}

async function getFooter() {
const query = `
  *[_groq query]{
 `;

  const data = await client.fetch(query);
  return data;
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const navigationData = await getNavigation();
  const footerData = await getFooter();

  return (
    <html
      lang="en"
      className={`${GeistSans.variable} ${jetbrainsMono.variable}`}
    >
      <body>
        <Ribbon />
        <Navigation navigation={navigationData} />
        <main>{children}</main>
        <Toaster />
        <FooterBar footer={footerData} />
      </body>
    </html>
  );
}

8 Replies

Broad-billed Sandpiper
ok
Golden northern bumble beeOP
Thanks, appreciate it. If needed I can throw in github link for reference
Broad-billed Sandpiper
im actually not well versed in nextjs
sorry
but i can try
Golden northern bumble beeOP
ok
Original message was deleted
!=tgt
hm
Golden northern bumble beeOP
Did anyone find the solution?