I faced a problem while creating static pages in Next JS with GraphQL requsts using fetch.
I've created page where I render over 100 list of data and also created static dynamic pages for those items using generateStaticParams function provided by Next.
Local build was done without any issues but when I deployed it to vercel, build crashed.
I am wondering if the problem is somewhere in WordPress.
To check it I replaced those static pages with https://jsonplaceholder.typicode.com/ - free fake API.
And with that API everything works fine.
Error that appeared during vbercel build:
I would be grateful if someone could help me with this.
Thanks :)
I tried different API to check if this error will also happen, but everything worked fine.
My operating system: Windows 11
Node version: 18.12
Next version: 13.1.6
The issue appears to be with using fetch in Server Components.
You can either use axios OR inside next.config.js set:
module.exports = {
experimental: {
enableUndici: true
}
}
Related
I'm trying to deploy a Next.js app to Vercel, it's a portfolio with only one page(index) and a couple of API routes. Vercel dashboard displays that the deployment is successful but when I visit the app it displays the layout component(the navbar and the footer but some styles are lost) with a 404 page like the attached image. I tried to deploy with getStaticProps and with getServerSideProps and ended up with the same result. The API routes are working fine though both in SSG and SSR, I can retrieve the data from them weather from the browser or postman for example. I've been searching for a while now and this issue here is the most relative one to mine, but I tried all solution mentioned in it and non of them worked for me. I made sure that the framework preset is next.js and that the root directory is correct, the app isn't served through a sub directory. Also I'm using a variable for the domain name stored in the .env file, I tried to deploy and leave it as the default(localhost:3000) and tried to change it to on of the vercel auto assigned domain names and tried to add the variable from the project settings on vercel, and also tried to deploy without it at all and all the scenarios leaded to the same result(the 404 page and the APIs are working fine). This is the first time I deploy on vercel, I tried to contact them but I received no answers, I guess because I'm on a hobby tier. This is the project repo. The app works fine in development and also when I build and start the server locally.
The issue is that you're calling internal endpoints (e.g. functions on api folder) in getStaticProps. This is a Next.js anti-pattern (More about this on the docs). The reason being is that getStaticProps fetches the necessary data required to build the static page on build-time, but at this point of the process, the serverless functions contained on the api folder have not been deployed yet. You're getting a 404 page because you are using a try/catch block in getStaticProps, so when axios throws, catch block takes the control and returns notFound: true.
Whenever i load a localhost using the firebase serve command it loads older code. I dont know how to fix this issue, my new code is in the public folder and still does not function as i wanted it to.
What im trying to: That my new code would be used instead of my older code this is especially with css as it has trouble with loading that.
So we recently changed our landing page from create-react-app to using Next.js. Our old create-react-app had a basic default service worker registered on users browsers.
Whenever I switched over to our new Next.js website, we realized that users who had been there before would continue to get a crappy cached version of the old website.
I've found a couple of discussions talking about this issue already, but neither solutions seem to be working for me. Those two discussions are:
A website is not refreshing because of caching of service worker, after switching from React to Next.js. How to force update?
https://www.asapdevelopers.com/service-worker-issue-nextjs-framework/
Both of these solutions essentially consist of adding a new service worker file to your Next project with some code to delete the existing service workers. That code looks like
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.getRegistrations().then((registrations) => {
console.log("--");
for (let registration of registrations) {
registration.unregister().then((bool) => {
console.log("unregister: ", bool);
});
}
if (registrations.length) {
window.location.reload();
}
});
});
}
So i've tried this. My old service worker was served via a file at route OUR_URL/service-worker.js. I added a public directory to my Next project and added a file with the same name and the code above to my project. I then linked this file in my _document.js and can confirm that it runs, as well as I'm able to find it on my Next.js site. The URL for both the new and old files are identical. Unfortunately though, it looks like the issue persists.
In one of the other articles linked above, it also mentions putting this file in the root directory of your Next project. This doesn't make much sense to me as it isn't then being served in anyway that I'm aware of, but I gave this a shot as well, still with no luck.
Anyone have any idea what I might be doing wrong here, or what I could do to fix this? Essentially we just want to force remove any and all old service worker so that our new website loads correctly.
Service workers are (at least generally) registered via the site itself and not automatically found by browsers (at least not yet).
This code (unregistering all service workers for the domain) should go in whatever is being sent from next.js to the browser (e.g. index.js). If you put this on your home page all users going there should have the problem resolved. If you have reason to suspect (based on traffic data) that users have other pages bookmarked you might want to include this in a universal bundle or footer.
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 run meteor in my applications 100 times, and my apps always render to localhost:3000. right now, though, on one specific app, my browser is blank. Ive hosted it locally before and I can host other applications. additionally, there are no console/terminal errors.
When I view page source, it's blank, but when I inspect elements, it's my code...
I pulled down a version of the project that I know worked on localhost, and I get the exact same thing.
What could be happening?
Try this, It worked for me:
cd to-your-app-dir
meteor npm install
meteor
Ensure that you have a route set for localhost:3000/.
See flow-router or iron-router.
Also double check what your app does during the onCreated() event of your template at localhost:3000/.