2

I recently started working with next.js, although I already have some experience with react, I have the following folder structure:

/segments 
  -index.js
  -[slug].js

Scenario: On page [url] / segments I get the list of segments by making a call to my api, which returns an array with all the information for each segment -> I display the list of segments for the user -> User chooses the segment and navigates to [url] / segments / slug. At this point I would like that on this page [slug] .js to receive the segment that the user chose (since everything I need is already in the object) without the need for another call to the api. I know I can use context for this, but I was wondering if next.js can solve this problem without having to use the global scope. Just passing a fetched data on one page to another. Thanks All

Thiago Viana Enge
  • 21
  • 1
  • 1
  • 5
  • If this was `react-router` or something similar, I would say pass the data via routing. NextJS doesn't offer this atm but there are "hacky" ways to do this like `localStorage`, etc. – SILENT Jul 30 '20 at 20:00
  • meet [redux](https://react-redux.js.org/) – guijob Jul 31 '20 at 02:57
  • Does this answer your question? [Next.js: Reduce data fetching and share data between pages](https://stackoverflow.com/questions/60899880/next-js-reduce-data-fetching-and-share-data-between-pages) – Ruben Helsloot Jul 31 '20 at 09:31

1 Answers1

1

You must take advantage of custom _app.js to share data among your application.

I have answered in detail to the same question which you can check it out in the following link:

Next.js: Reduce data fetching and share data between pages

Hooman
  • 1,775
  • 1
  • 16
  • 15