I am working on the latest nextJS version. I am trying to load images from a Magento CMS. They work fine in local, but on deployment to Vercel, I get not found error
GET https://consumer-omega.vercel.app/a/b/absinthe20teichnnd_vhi6ffkxpdwl9ism.jpg 404
I have already added the domain name of CMS to the domains setting in images under next.config.js.
images: {
domains: ["devconsole.appname.com", "appname-omega.vercel.app"],
}
For reference for debugging, this is the URL that gets requested for in local
http://localhost:3000/_next/image?url=https%3A%2F%2Fdevconsole.appname.com%2Fmedia%2Fcatalog%2Fproduct%2F8%2F2%2F820pm20whisky_c0ihwxvhlkqdbupv.jpg&w=256&q=75
Where as in the deployed environment for, the requested URLs are something like this
https://appname-omega.vercel.app/_next/image?url=%2F8%2F2%2F820pm20whisky_c0ihwxvhlkqdbupv.jpg&w=256&q=75
Related
I made a react project with create-react-app and deployed it via AWS Amplify.
I was trying to rewrites several routes under the same domain to open the other web sites. It seems like using the way of reverse-proxy.
So, through Rewrites and redirects console, I added a rule like below.
Source address
Target Address
Type
/test/<*>
(a different origin which is deployed in the amplify, too)
200 (Rewrite)
However, when the /test has been routed, the rewrites is not working. Looking into the Network tab in devtools, the browser tried to fetch static files from the Target address domain, but it fails.
My frontend is deployed on Netlify. all the get request working well but POST, PULL, DELETE request is not working.
My backend is on Heroku..
Is it CORS problem or else?
Thank you very much.
this is my console after post request
From your linked screenshot, it appears that you're connecting to your API using relative URLs, for example: /api/something. Locally, this would most likely work as you'd most likely have your backend running too.
However, on production this would not work, because browsers will resolve /api/something relative to the domain which is now on Netlify. Since Netlify doesn't have your backend app running, and there is no asset at /api/something, Netlify sends back a 404.
The solution would be to use Netlify Rewrites: https://docs.netlify.com/routing/redirects/rewrites-proxies/. You could add something like:
/api/* https://your-heroku-url.com/:splat 200!
... in a file named _redirects which should be added to the publish folder on Netlify.
This would resolve /api/something to https://your-heroku-url.com/something. You might have to change the redirects based on your configuration.
In my Vercel's app dashboard I set environment variable BACKEND_URL for Preview environment and dev branch:
However after deploying it, the variable doesn't seem to work. My site can't access the api.
I added this quick way of checking what is inside process.env.BACKEND_URL and as expected - it is empty.
<Text>Backend URL: {process.env.BACKEND_URL}</Text>
Here is the screenshot of Vercel build which shows that the newest deploy is in fact Preview and from dev branch:
What am I doing wrong?
I have the same problem in my deployed react app. When I try to call my backend using a vercel env, instead of just calling the url it appends the vercel app url to the env for no reason causing it to fail.
For example:
REACT_APP_API_UR = "https://www.example.com"
and I create a post request to my api the url it post to is:
https://yourapp.vercel.app/%22https:/www.example.com%22
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
I've created a react project using asp.net core react spa template. Everything seems to be fine, but when I deployed the application in IIS, it is deployed as an application under the default website. When I try to access the site, the index file is coming, but static files are giving 404.
One solution I found is setting PUBLIC_URL to application name in iis and building the application and then deploy. But, Is there any other alternative solution from asp.net core side? like setting rootPath
// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/Build";
});