Next.js Discord

Discord Forum

How to create global data like logotype/phone numbers in header/footer?

Answered
Somali posted this in #help-forum
Open in Discord
Avatar
SomaliOP
I used to use React Context
But this data is not there if you look through the code in the browser, which means that this data is filled in through js, which is probably bad for SEO.

I also don't want to loop through 10 components from page level to Layout level and then header/footer, maybe you know a more elegant solution?

56 Replies

Avatar
SomaliOP
Image
Avatar
Hunter Bertoson
Not sure if this what you are looking for. But take a look through this repo. https://github.com/webdevcody/code-racer/tree/main/packages/app
Those may help!
Avatar
joulev & fuma pray for Schneider
React context data is still prerendered on the server, so the bug is not there. You need to show us some code
Avatar
SomaliOP
Image
Image
Image
Image
Avatar
SomaliOP
either I didn’t understand, or it’s something else altogether (without pre-rendering data from the server)
Avatar
SomaliOP
can you help please?
other people says its to ReactContext not prerendered
Avatar
joulev & fuma pray for Schneider
Can you give a minimal reproduction repository
Your code in the screenshot is too long and complex
Remove the irrelevant parts
Avatar
joulev & fuma pray for Schneider
your code looks quite hard to understand. why do you use GlobalDataContext outside a provider – is this intended? in the first place what do you want to do here – get the getStaticProps data in the _app.js header?
Image
Avatar
SomaliOP
what you mean "why do you use GlobalDataContext outside a provider – is this intended?" ?

There i just created global store, when i get Global data on index page i want to save this data in store to use it in all others comps.

like this:
Image
Avatar
joulev & fuma pray for Schneider
what you mean "why do you use GlobalDataContext outside a provider – is this intended?" ?
in the screenshot above, you are using GlobalDataContext for the data variable, which is then used to initialise GlobalDataContext itself
that one i don't understand and i doubt it's intended
Avatar
SomaliOP
okay i remove it like this, but its not help. any ideas?
may be you have some refs to my problem?
for some reason i cant google it
Image
Avatar
joulev & fuma pray for Schneider
ok i think it'll be easier this way: what exactly do you want to achieve?
i still dont understand what you truly need to do so i cant say anything
what do you want to forward the data from? where is the data fetched, where is it displayed
where is the role of global contexts in this
Avatar
SomaliOP
i want to create global store with data from my api.For example i want to save 'title' field from this endpoint to my global data store

https://jsonplaceholder.typicode.com/todos/1

Then i want to use this data on any component from store with SSG, like im trying in stackblitz exaample.

In my real case i have /config endpont where i get some globalData for website like 'navigation,logo,header/footer buttons text, socials link and etc' so i want to have access to this data in any components with SSG

English is not my native language, so if it's still not clear, I'll try to explain in another way.
Avatar
joulev & fuma pray for Schneider
so i will paraphrase your problem like so:

* you have a data source, say https://jsonplaceholder.typicode.com/todos/1
* you want to fetch data from it during build time (SSG)
* and make that data available globally to display in navbar etc

am I right?
Avatar
SomaliOP
yes
but
I don't want to pass this data through 10 components, i.e. I want to use something like context
so method with indexPage -> getStaticProps -> Layout -> Header/Footer etc its not for me
Avatar
joulev & fuma pray for Schneider
then your way doesn't work because data from getStaticProps is only available in the page containing it
so, in the example above, the data is only available in / (pages/index.js)
to do what you need to do, you have to either
* use the app router to get a native nextjs solution, because getStaticProps is not available in _app.tsx.
* or if you need to use the pages router, you have to make a prebuild script that fetches the data beforehands
i will come up with an example for the second case
wait a few mins
Avatar
SomaliOP
okay, thank you
but what yuo mean when says 'React Context is prerender'
Avatar
joulev & fuma pray for Schneider
const Context = createContext(null);

function Component() {
  const data = useContext(Context);
  return <div>{data}</div>
}

export default function Page() {
  return (
    <Context.Provider value="Foo">
      <Component />
    </Context.Provider>
  );
}

will be prerendered to <div>Foo</div> without the need of client-side JS (so it's SEO friendly and you can see the "foo" in the page source)
Avatar
joulev & fuma pray for Schneider
Answer
Avatar
joulev & fuma pray for Schneider
Avatar
SomaliOP
I understood your solution. Thank you

It is a pity that there is nothing more natively supported by nextjs and react itself

Do you says this is not problem in app router
Avatar
joulev & fuma pray for Schneider
the app router effectively supports getStaticProps everywhere, not just page files
you can do static data fetching even in your components/any-component.tsx
Avatar
SomaliOP
in clients component with 'use client' also support prerender?
Avatar
joulev & fuma pray for Schneider
yes
Avatar
SomaliOP
why do people hate app router ? XD
Avatar
joulev & fuma pray for Schneider
tbf it still has some annoying design issues, like [this one](https://github.com/vercel/next.js/discussions/54075)
also mutation is not stable and there are annoying bugs popping up all the time
Avatar
Alfonsus Ardani
So like everything about caching? :v
Avatar
SomaliOP
should i use app router for production at this time?
Avatar
joulev & fuma pray for Schneider
this answer definitely doesn't satisfy you but: it depends. although you definitely should try it in small-scale projects to see how well it suits your projects
i would use the app router for all my projects currently, but it's necessary to note that the ride won't be as smooth as you might expect it to
Avatar
SomaliOP
Yes, but I'm newbie, so I still don't understand the depth of the app router problem
Avatar
joulev & fuma pray for Schneider
yeah i think just try it. the app router is mostly working well, there isn't any huge centralised problems to note about but rather small separate problems like the caching issue i linked above
so it's hard to answer whether you should use the app router for your production app or not
Avatar
SomaliOP
okay, thank you