Next.js allows for passing dynamically loaded server-side data to all components for easy access

(I've recently started working with Next.js and inherited a project built using it, so please forgive me if this is something obvious that I'm missing)

I have a set of data that needs to be loaded server-side on each request. Initially, I had implemented this in getServerSideProps for a single page and it worked well. However, I now need to expand this to multiple pages with shared components throughout the component hierarchy. I require a way to create a globally accessible variable that can be accessed from any component, which should also be populated server-side. Repeating the same code in getServerSideProps for every page and passing the data as props becomes too repetitive and inefficient, so I am looking for a centralized/static/hook-based solution.

I am making an API call in middleware.js during the request phase to retrieve the necessary data. How can I pass this data down to all components in the hierarchy? If it were purely client-side, I could use a Context/store, but I am struggling to find a way to transfer server-side data to client-side components.

javascriptnext.jsmiddlewarereact-context

Answer №1

After some experimentation, I discovered the usefulness of utilizing App.getInitialProps to retrieve the necessary information and then passing it as a prop to my customized App component. The remaining steps on the React side were fairly straightforward: enclosing the application within a context provider that I personally created using the value extracted from the app props, and implementing a custom hook to efficiently access the data wherever needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

example <input type="text" id="txt1" onChange="calculateTotal();" /> <input type="text" id="txt2" onChange="calculateTotal();" /> <input type="text" id="txt3" onChange="updateValue();" readonly/> <input type="text" id="txt4" onChange= ...

javascripthtml

The @Mui datepicker seems to be causing some trouble with the react-hooks-form integration

Below is a code snippet where I showcase working and non-working sections (commented out). <Controller control={control} name="DOB" render={({ field }) => ( <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePic ...

javascriptreactjsmaterial-uifrontendreact-hook-form

Encountering issue with accessing req.body within Next.js 13 middleware function

The issue I am facing in the code snippet below is related to validating the request body against a schema from zod. The current situation leads to failure and catches errors because req.body returns a ReadableStream<Uint8Array> instead of the expect ...

javascriptnext.jszodnext.js13

excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...

javascripthtmlcsstwitter-bootstrapmaterialize

Tips for accessing private variables

After running this code in nodejs, I noticed that the 'Count' becomes negative for large values of 'count'. It made me wonder, is it the fault of 'count' or 'chain'? What would be the best approach to modify the &apo ...

javascriptnode.jsclosures

The upcoming Auth getSession() function may provide an undefined or null value

Here is the code that I am working with: export const useAxiosPrivate = () => { const { data, status } = useSession() const [accessToken, setAccessToken] = useState<string>() useEffect(() => { setAccessToken(() => data?.user.acces ...

next.jsnext-auth

Snippets of the webpage peeking through before the Fakeloader takes over

After implementing fakeloader to preload my content here, I have noticed that my site header often appears before the fakeloader preload animation completes. Is there a way to delay showing the content until the fakeloader is finished loading? Here is the ...

javascriptjquery

Generating symbols that combine both images and text seamlessly

I am working with a circle image that I need to resize based on its placement. This image is intended to be a background for a character or two of text. Specifically, whenever the number 1 or 2 appears in a certain element, I want the circle to appear beh ...

javascripthtmlcssimage

Retrieve progress with easing using jQuery's animate() function

At the moment, I'm utilizing this code to create an animation for a bar-graph-inspired element: $('.anim').animate({ right: `${100-(e/max*100)}%`, backgroundColor: colors[0] },{ duration: 1500, easing: 'easeInQuart&apos ...

javascriptjqueryjquery-animateeasing

The array map is not displaying properly in the table

I am trying to map an array on my webpage and display the results in a table. However, I am facing an issue where the content is not showing up when I compile the page. Can someone please assist me with this problem? When I print the content of a variabl ...

node.jsarraysfrontendnext.jsarray-map

Identifying Elements Generated on-the-fly in JavaScript

Currently, I am tackling the challenge of creating a box that can expand and collapse using regular JavaScript (without relying on jQuery). My main roadblock lies in figuring out how to effectively detect dynamically added elements or classes to elements a ...

javascript

Bring in a JavaScript file from Blogger without using a tag

Is there a way to retrieve blogger feeds code without using