I have a next app deployed in aws. I'm having an issue with dynamic nested routes, the issue is that given a route eg. /contacts/[contactId].
On my local env if I go to that route, the page renders correctly, if I refresh it it renders correctly as well.
Now on the server it behaves differently, since going to that route while navigating the site will work as intended but if I refresh the page or try to access it by pasting the url in the browser, the one that will catch the route is the index file inside my pages directory, not the nested route.
Has anyone faced this issue? Thanks in advance.
Related
I am experiencing something in production which isn't reproducible locally.
The Link from nextjs (version 12.3.x) works well in development and when running the build in production mode locally, meaning that the navigation happens without a full page reload. But when deployed with terraform, all Link components are causing a full page reload. Everything else works as expected.
I have a mixture of Link children across the application, sometime it's a, but other times it's a button or simply a div or span. In every case, the full page refresh happens. That's why I suspect it must be something related with the configuration rather than the Link usage, however I am not sure where to start debugging and I am looking for a hint in the right direction.
Back with an answer to this. In my case, nothing was wrong with the Link components itself, nor with the build. The problem was with a path rewrite in our terraform configuration (it was rewriting everything in /_next/*).
It appears that getServerSideProps fetches JSON files which will be used to render the page Their paths were being re-written and causing a 403 error, which made the page reload instead of allowing me to navigate seamlessly as I am used to with next.
This problem was very specific to my configuration, but my general recommendation is to check whether you are rewriting any path of the json files created by next at navigation, in case you are experiencing the same problem only on staging/production.
I'm using Vue Router history mode for my Vue.js app. My problem is that, when I try to refresh a page that is not the root page, or enter its URL in the browser address bar, "page not found" 404 is displayed.
Now, in the Vue Router guide they warn about this (see https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations), and suggest the solution to "add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in".
With this solution, if I try to access one of my non-root pages (with corresponding URL) through the browser address bar, the root page will be displayed. Is this interpretation correct?
My question: is there a way to achieve the behaviour such that I can access my different pages directly from the browser address bar, and upon refresh stay on the same page?
If you use the aforementioned configuration. Your backend will route all requests to index.html. Then when the Vue-Router is mounted, it will check the URL and provide the corresponding component. The implementation above will work.
I have a single page application that does not use hash URLs I want to use the history API. I am using the middleware historyApiFallback() in browserSync server options. However, this is only working for one level deep URLs:
http://localhost:3000/main correctly resolves to index.html
BUT
http://localhost:3000/main/a is NOT working. The browser shows "connected to browser sync" and then a blank page is displayed.
Anyone knows what could be the issue here?
The issue was that the URLs for js and css resources weren't correctly setup. This post helped me fixed the issue: mod_rewrite to index.html breaks relative paths for deep URLs
I am using window.history.pushState(name, title, url); to change the browser URL to let the user know what static url corresponds to an application tab pane.
But Meteor reloads the last real URL (the URL we landed on, before pushState) at each application state change (Meteor reactivity).
How do I change the URL without using a Router.go (that's too heavy for what I am doing, just clicking on a application tab).
OK, I figured it out. The whole route was triggered again (so reloading the page) because I called a reactive function in onAfterAction. pushState is fine. Meteor also. Duh. :)
I create a menu structure from a compiled class that returns an unordered list with ~/ menu options. On my localhost, they show up as http://localhost:port/applicationpath/Default.aspx
I actually have to pass the Application Path to the function to prefix the URLs. The problem, however, is that we moved the application to our development server, and now the URLS show up as:
http://default.aspx/?id=1
http://folder/default.aspx
The website domain doesn't seem to be displaying. Anyone have any clue? Is this an IIS issue?
Ended up using a getRootURL() function within my javascript to do the job.