I'm working on a website on nextjs but the Link component and the router is kinda driving me crazy. When I click on a link it has an horrible delay before accessing the page and then if you use the browser back button the page don't change, just the url.
Here is the link of my site, don't really know what is happening actually.
https://next-madeleine.tmsssss.vercel.app/
It is common for Next.js and other frameworks as well to be slow in development time. As I can see and confirm in your production live website, the links work well, even great. That it because in development there are certain tools and packages being used by Next.js and webpack to compile on-fly the code. Those tools are disabled and removed in a production build of course, and the pages are cached by Next.js.
So, try to run npm run dev and compare it with npm run build, followed by npm run start
NextJS runs getInitialProps, getServerSideProps and getStaticProps every time you link to a page, which might be time consuming. You can skip this by shallow routing your page. Link accepts a boolean prop called shallow={true}.
<Link href='/your-page' shallow>Your Page</Link>
With Next's router.push:
router.push('your-page', undefined, { shallow: true })
Read more about Shallow Routing - https://nextjs.org/docs/routing/shallow-routing
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.
In the Next.js docs, there is a mention of automatic updates:
When you deploy your Next.js application, you want to see the latest version without needing to reload.
Next.js will automatically load the latest version of your application in the background when routing. For client-side navigations, next/link will temporarily function as a normal tag.
I am interested in how this works, but can't figure it out by looking at the Next.js source code. I understand that once an updated version on the server is detected, the client side links become normal <a> tags and so a full page load will occur, allowing the new HTML and new JS/CSS assets to load.
The bit I'm not sure about is how Next.js detects that a newly deployed version is available on the server. What am I missing?
I've got a next.js (11) site that generates a bunch of SSG pages. Everything works great when I enter the site through the homepage, which is static and navigate to the SSG page.
BUT, if I go directly to the SSG page, nothing works. Javascript doesn't run. Events aren't attached. No errors. Just... dead except for the static content.
Am I missing something about how Next.js works here? Is there a way to force these pages to function when accessed directly?
The site is running on Netlify. All of this works locally but not in production.
The answer for posterity is that there's no reason it should act this way. It's a bug that results from minifying the Javascript on Netlify. Once I turned that off, everything behaved as expected.
Things I tried:
SSR instead of SSG... but that breaks Netlify redirects and is slower.
I also tried a trick I saw suggested to do a useEffect to set some unused key in state and force a rerender, but because Javascript was garfed, that didn't even fire.
Dynamic loading of modules. Also didn't work right with the minification in place.
Updates of all of my component modules-- including Next and the Netlify Next plugin.
Then, just by chance and desperation, I clicked off the post-processing minification button and everything started working again.
I'm using Next.js + Wordpress/Graphql as headless CMS and deploying to Vercel.
I'm getting a 404 when new posts are created on production (vercel) - not happening locally or when using next build. Strangely, it solves the problem when I redeploy or when I push a new version to the repo and vercel does a fresh build.
I guess this has something to do with the Incremental Static Regeneration?
I had a similar but slightly different issue with a previous Wordpress server that was responding with 429 Too Many Requests. But that was a problem with the first build when all pages were generated and therefore more requests were made. I've switched to another server that seemed to fix the problem and now the problem only occurs after the first build (i.e. when incrementally regenerating pages on request).
Here is one of the problem pages:
https://github.com/garethfoote/blind-ditch/blob/master/pages/projects/%5Bslug%5D.js
Thought this could be the culprit but I'm not getting any remote logs from in console.re:
if (!router.isFallback && !project?.slug) {
console.re.log("404??", project);
return <ErrorPage statusCode={404} />;
}
I'm struggling to work out what is causing this and also how I might further debug this on Vercel. Advice appreciated.
After some digging around I realised that I had not fully understood the use of the fallback key in getStaticPaths.
I assumed ISR would generate new pages that weren't specified in the paths object of getStaticPaths at build time but I know realise that is what fallback: true or fallback: "blocking" does.
https://nextjs.org/docs/basic-features/data-fetching#fallback-true
I have a WP site working. It has everything rendered by using PHP files.
Now, I would like to change one page of my site to be based on React. Meaning one page-template that will execute react JS code instead of PHP. Can this be done?
I found that I can user WP-API, and that is great but can It be done in somekind of a hybrid mode?
If so, what do I do with webpack and node_modules? Will I have to navigate to the react template and run webpack run manually? Should I execute npm start on my production site?
I found tutorial showing how to use WP-API as backend server, but the React app is served on its own. I need the react app to be served by wordpress.
Help please
Regards, Ido
This is somewhat complex, but I think it's a two step process
Setup a develop environment for React, this can be done inside a wordpress project, but it would be much simpler to develop it in a side project.
Once you finished developing, you build a production version of your code(I.E, index.min.js) - this is a self contained file that should be a "plug and play". simply including this regular script tag in your page should start working.
The complex part is setting up an ES6 / Babel / React environment inside a wordpress project, but other than that, React will bundle into a browser-ready file that can be used directly inside a browser.