I've just started with Next.js and I've already faced a problem with dynamic routing. For some reason it doesn't work although it should. I tried with folder and with file as well but it won't work. This is really cumbersome...
It just displays 404 error...
In order for your dynamic routes to work and if you're using SSG, you need to make use of getStaticPaths and getStaticProps functions to pre-render all the paths (and the content for each one as well) containing the meetupId param.
You can read more here
Related
Hi i like to add i18n support to my nextJs app without any routing. Any existing solutions I’ve found using some sort of routing.
So what i need is to access request headers ('Accept-Language' header to be spesific) in _document.tsx than I will set html lang from it. Than I read it from Js and return proper language objects both initial ssr and csr. If I do it without this I get error like Text content did not match. Server: …
So far I’ve tried to retrieve it from getInitialProps in _document.tsx but it seems it is always null. I also tried retrieving header from middleware and than rewriting url with adding lang to search params. But I also couldn’t manage to retrieve it from _document.tsx either.
How can I provide this functionality to my app?
You could try to use react-intl-universal with next.js.
You could use intl.determineLocale to get the language, then use it to intl.init. It has nothing to do with routing.
Here is an example integrating react-intl-universal with NextJS
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
I am getting a 404 error whenever I try to enter a URL directly in the browser whereas, the normal routing using react-router-dom works fine.
I have a nested routes structure with the nested routes being lazy loaded.
I have also read about a few potential solutions including hashrouter but it comes with the disadvantage of having a hash in the url
Are there any other solutions?
When using React, it's important to understand that the app is only initially loaded when you call the index route (e.g. localhost:3000/), so if you're manually browsing to certain routes (e.g. localhost:3000/testroute), your browser is attempting to GET that specific route rather than loading the React application first.
I'd suggest checking out the answer on this post, as it provides a very detailed explanation and potential solutions. On one of my React apps I encountered this issue and was able to resolve it with a DNS wildcard.
Some days ago I was working on an issue for my job where a page on React couldn't "catch" an error when someone tried to navigate using a bad URL that had the percentage sign (%) that can't be decoded.
The React project uses react-router-dom to handle navigation by showing different views when accessing different URL's (it even has a 404 route when it has no matching routes), and the struture looks very similar to React Router's 404 example, here's the link where you can try for yourself adding /% to the URL from the sandbox's browser and understand in a better way the problem.
In my local-development scenario the page only shows the stack trace in the following image (also check the console output).
I understand that it if someone provides a bad URL that can't be decoded this error will throw and therefore the page will not run. I've been looking for a while and haven't found nothing related to how to catch it on React (I'm not sure if that's really possible).
Any suggestions are welcome!
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