I have a navigation bar that has a dynamic prop and data of this props should be fetched from API in getStaticProps. the navigation bar should be displayed in all pages of my website. so the best way to display the nav bar in all pages of my website is to put that in _app.js component. but I want to use getStaticProps method to fetch those data! and the problem is that _app.js doesnt have this feature. all my pages render statically. so if I use getInitialProps method in _app.js page, I lose automatic static optimization and I don't want it. in the other hand, I don't want to fetch the data on the client side. so what should i do in this situation? Whats your suggestion? note: I searched a lot on the internet and I saw a lot of questions in Stack Overflow but I couldn't find exactly what I want.
UPDATE
from the answers of this question and other questions, i think i have no way and i should choose between using a layout and getInitialProps. But i have an idea. I can fetch datas on the server for example each 60 seconds and then store the fetched datas in a json file. And then i can import that json file in my nav bar component and use the latest datas of nav bar components. Whats your mind about this idea? How can i implement this idea in next js? Thanks for help again.
You can use React context for the data that is required in other components. Populate it with data from inside a page component and use the data in other components thereafter.