So I have a problem with NextJS, I have a few pages with dynamic routes, eg:
queries/[id].tsx
queries/index.tsx
Now in dev mode, it loads fine when I go to
https://localhost:3006/queries/1324
The problem is when I build it, I can't directly link to that url. I have to go into the homepage and click to it. Is there any way to solve this? I'm deploying to an azure static web app.
I've tried with exportPathMap, but the thing is we're generating a lot of queries, and I can't rebuild every time someone makes a new query.
I think you should use NextJS function getStaticProps and getStaticPaths . This will solve your problem
Documentation
Related
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
I want to make partially SSR web application and looking for best solution for that. I need SSR for SEO and that will only serve dynamically rendered products pages - this will be handled by NextJS.
Other part of the app is only for logged users and I don't want anybody not logged to accidentally display it (but only users data have to be secure, if anyone access by a hack those restricted pages without any user data that's ok) - for that part I've already implemented React Router with proper redirections and few routes (it's using Redux too).
Whole project was made with create-react-app. Is there a way to easily combine those two functionalities? Do I have to move everything from /src to /pages? Maybe best way would be to serve them independently and just redirect to one or another using Apache configuration?
If anybody wonders about it - currently the best solution would be to use NextJS for all of it, cause Next provides a clean way to handle static pages, CSR and SSR alongside each other.
By the default all pages are static generated or pre-rendered with partial CSR, while using getServerSideProps method allows to handle SSR, without any extra configuration.
I used create-react-app to create my react app.
I have it deployed on AWS Cloudfront + S3. Everything seems to work when I visit the site: https://www.remotecareers.io
However, when I try using the "Fetch and Render" feature of Fetch as Google, I see this:
It's weird that the This is how a visitor to your website would have seen the page: part is empty. However, my main issue is when I try to do the same thing for the non-root routes.
For example, I have this page: https://www.remotecareers.io/remote-jobs/new. It looks like it's working fine. However, when I try fetching it through google it says it's Not Found.
It says the same thing in the new Google Search Console too:
So far even to get just the This is how Googlebot saw the page: part to work, I installed and added:
import "babel-polyfill"; // I tried this by itself as well as with the 2 below
import "url-search-params-polyfill";
import "whatwg-fetch";
What's weird is that the homepage is (partially) working but the rest of the pages aren't being scanned at all. I thought it might be because I wa missing the robots.txt file so I added it but it seems to not have any affect (https://www.remotecareers.io/robots.txt). Can someone help me?
From my experience, relying on googlebots to run javascript to render the app is not very reliable. For best SEO performance, you need to server render your react app.
You will need a dedicated NodeJS server that will render your react app, then send down the rendered HTML to the browser. The browser will receive the HTML response, which includes some script tags as well. After the scripts are loaded, it will run and hydrate your react app so that everything works properly.
Try reading this article to get you started on this topic.
So I'm trying to deploy my first React application live. It is my portfolio webiste. Anyways, everything is working fine except for my routes. Locally, Everything works fine. However, now that I've deployed the website my routes do not work. When you click on any of the links it says the url cannot be found on the server, and it throws a 404 error.
The application is hosted by namecheap, and they said they cannot see anything wrong from their end. I just have no idea what could be wrong then as it all works find locally.
My website can be found at andrewschubert.website and the github repo for this can be found at https://github.com/theschubinator/my-portfolio If anyone has any ideas what I'm doing wrong I would greatly appreciate it!
By the way, it is a React Application. There is no database or API, just strictly front-end. The only links that are actually working are the ones that redirect you to an area outside of my application...like my blog on medium.
I can see that you've been using react-router lib for your routing. It is based on HTML5 history API, which is not supported by every host out there. If you are talking about your portfolio website and it's not so much of and issue where do you deploy it, try out some different hosts (e.g. surge is great for deploying static sites: https://surge.sh/).
React applications are single page. Routing in React means changing the components displayed when user requests a different url. You will need an api.
On every client request you return the same "index.html" which will display only one component. By creating a controller in your server you can map "/contact" to "index.html#contact" and your hashrouter can return the ContactUs component.
I'm running A/B redirect tests with Google optimize, using SPA on React, Redux platform.
A problem I'm trying to solve is - redirecting to the new page causes the full page reload, which I would like to avoid and rather prefer to do it manually, so it would be seamless for a user and much faster.
Is there a way to do that?
Although this is a three years old question, maybe there are still users like me have the same issue.
Now Google has provided Activation events to resolve dynamic websites and single-page apps reload issue.
By default, Optimize modifies the content of a webpage only during its initial load. However, dynamic websites (built with tools like AMP, React, Angular, etc.) and single-page apps (SPA) commonly load additional content long after the initial page load. Optimize supports modifying this late-appearing web content via activation events.