I'm currently converting my React.js project into Next.js.
I'm running into a few issues with props at the moment though.
Previously with React, I made API calls at app.js then passed it down into the navbar to be used in a search form.
With Next.js there's not really an option since API calls are blocked from the _app.js file. Which is where my layout.js (Nav/Footer).
options I'm considering:
index.js file to be like the app.js instead of the home.js page._app.js and calling stock API on every page.I feel like there's a better way to just call the API once and pass it to the necessary children. If someone can give me any recommendation on how to combat top-level sharing of props that would be great!
Consider doing the following
1.If the props are needed pervasively in the app eg. theme or auth object, create a Context provider and wrap the _app.js component with it.
2.If the props are needed in only few components, find the closest common ancestor and make the fetch there like you would normally do in React. additionally, in Nextjs, you can use getServerSideProps to pre-render pages on every request