Join us live Sept. 27 – How Sanity and Vercel powered Morning Brew's transformation –>

Does anyone have experience in saving a sanity fetch as global properties in next.js?

5 replies
Last updated: Nov 3, 2020

Does anyone have experience in saving a sanity fetch as global properties in next.js, which subsequently can be used for components such as a header, footer etc?
Thanks in advance

Nov 3, 2020, 8:36 AM

I think you should use reacts Context for this. Make a context provider and wrap your app in it. All page props then are reusable in its components. This will give you an idea:

import { AppContext } from "./useAppContext";

function MyApp({ Component, pageProps }) {
  const { myGlobalProp } = pageProps;

  return (
    <AppContext.Provider value={{ myGlobalProp }}>
      <Component {...pageProps} />

export default MyApp;

import { createContext, useContext } from "react";

export const AppContext = createContext(null);
export const useAppContext = () => useContext(AppContext);

import { useAppContext } from "./useAppContext";

export const MyComponent = () => {
  const { myGlobalProp } = useAppContext();
  return <div>{ myGlobalProp }</div>

Nov 3, 2020, 8:50 AM

Yes. Did the fetch in getInitialProps located in _app.js (or ts). Added the result in pageProps and then added it as context

Nov 3, 2020, 8:50 AM

Nice thank you! I'll give it a try

Nov 3, 2020, 9:05 AM

user B
user B
- I know that i should insert my data fetched data into "value={{ myGlobalProp }}", so i can acces it globally - but can you tell me, if I'm supoosed to fetch the data from sanity in "useAppContext.js" or "_app.js"?
Hope , I'm not too much of a bother - thanks in advance.

Nov 3, 2020, 1:45 PM
Nov 3, 2020, 1:47 PM Get the most out of your content is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Free to get started, pay-as-you-go on all plans.