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
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
Related
I have this big issue.
I have developed a Gatsby website for the car parts market.
The users can select car model and part type and receive a page with the parts for their specific car.
I have used React Route to create dynamically the new path and an API that recall the data:
https:/mysiteAPI.com/{car.id}/{part.id}
The paths that will be created are something like that: https:/mysite.com/comparison/{car.name}-{part.name}
The big issue that I have is that this path will be created only when i click on
Using this approach I can not generate the pages when I build the website, but the pages will be generated only when users click.
Actually I need that pages will be readable from search engine crawlers for SEO reasons.
I tried to create each page inserting in Gatsby Node a CreatePage, but the system crashed, due the huge amount of pages (over 5 million).
I don’t know how to generate pages that can be readable by crowler and persist. I hope that someone of you can help me to improve my site.
Thanks in advance
Take a look at the createPages API, available in the gatsby-node file of your project. If you would like to create static HTML files in the build process for each item you need to first fetch them somehow. With the data in your possession you could iterate over it and call createPage for each page you want to create.
I have a Django Rest Framework application that is fed in data from a csv. I then use React to create dashboards and Widgets from that data. I want to be able to generate a link to share a read-only version of any dashboard, much like in Google docs etc. Anyone clicking on that link will be able to see the dashboard with all the charts and analytics etc. The link can be shared much like how you share a Google Forms link. I'm not sure how to go about doing that. Any help / pointers would be appreciated. Thank you!
I think theoretically you need to use a router on your react app (e.g. https://reactrouter.com/ ).
If you're using create-react-app, you can also refer to https://create-react-app.dev/docs/adding-a-router/#:~:text=Create%20React%20App%20doesn't,is%20the%20most%20popular%20one.) .
With this you can directly read parameters on a certain page within your react app, that you can then use to build a concrete call to the backend, to retrieve the necessary data to build your dashboard.
The 'link builder' functionality most likely needs to be implemented on the backend, so you can have the necessary parameters you need to gather the necessary data, maybe by using query strings.
If you want to make it more complex, you would need to implement on the backend a kind of tokenized access, that could store the full call parameters on the backend side, and associate them with a token of some kind, that you could then provide to your clients.
e.g. : http://djangoappxpto.com/link/12345abcd points to a react page component that then executes a fetch to http://djangoappxpto.com/api/getStats/12345abcd which once received by python would internally mean something like http://djangoappxpto.com/api/generateStatsReport/?param1=a¶m2=b¶m3=w¶m4=aa .
I have a nextjs app with two pages, they have same design but both display different data, what is the best way to implement this idea with keeping the url path unique for each page.
after asking some friends about this issue the best answer i got (from my prospective) is to separate the repeated code at the two pages into a new directory which I named shared and a new component that has only one job to display the data passed to it from both pages.
Let's say I have a blog made in Next.js by consuming a REST API from a headless CMS. I know how to load posts and so on. But where do I load the basic website info such as name and color? I thought about loading it on _app.js but when I define loadStaticProps() on it, the nested loadStaticProps() on another components doesn't get called and when using another kind of data loading, such as using Axios, the site wont be truly static. What is a good way for doing it? Thanks.
I think there are multiple questions here
But where do I load the basic website info such as name and color?
I am interpreting the question so you may want to add more details to complete the answer. You have two options when using data that is truly static in nature.
You can use the post mechanism to create a website info that you can load as a specific call
You can store the static information in a separate file in the server and read it off and update the data via a git update which will reflect on the site. If this won't change often, e.g: a website name - You can use getStaticProps to get this information at build time
I thought about loading it on _app.js but when I define loadStaticProps() on it, the nested loadStaticProps() on another components doesn't get called and when using another kind of data loading, such as using Axios, the site wont be truly static. What is a good way for doing it?
Page data that is truly global can be fetched via _app.js + getStaticProps seems to be a long running open issue - You can follow the thread here and one potential workaround here - https://github.com/vercel/next.js/discussions/10949#discussioncomment-6148
I have a question about page objects in selenium webdriver. our site is very dynamic with lots of ajax and various authentication states. How to define each page object BUT lets say I have figured that out and defined several page objects that represent our site.
How do you handle crossing from page to page? So I get a page object for my home page and one for my account page and one for my results page. Then I need to write a test that traverses all my pages to simulate a user performing multiple actions.
How do you obtain a HomePage object to create a new use, then get a account page object to go perform some simulated user actions and then get a result page object to verify those actions? Can it be done in a single script?
this question is similar to one posted here, which may have an answer to your question: Selenium Page Objects