Next js + Firebase wouldn't work on Netlify - next.js

I'm trying to run Next js on top of Netlify, but I get 404s except for the root page, and Netlify doesn't show any logs, so I don't know what the error is.
In the React app, I had to create a redirects file under puiblic, so I tried that too, but it doesn't work. What should I do?

It is a _redirects file not redirects,You can also use netlify.toml instead, and it should be located in publish directory it's important!
Here you have few resource which are very helpful ;-) source-1 , source-2 , source-3. Good Luck!

Related

nextjs css not loading for static pages

We are running nextjs build with yarn , pm2 and then using nginx to proxy the port.
I can see a build number inside .next/BUILD_ID and .next/static/BUILD_ID/_buildManifest.js file.
But in UI when taking this domain.com/_next/static/BUILD_ID/_buildManifest.js showing 404.
This issue happending only for server render pages.
We have other client side render pages and those are working but with different BUILD_ID name and not sure how its working.
Tried to delete .next folder and taken build again. But still issue is there...
Any suggetion how this can solve ?

Vercel host: Next.js site not serving my static files

I've built out a new site in Next.js and have deployed it on vercel.com (their free Hobby plan).
Everything works except that I built out some sample pages and put them into /public (as instructed by the Nextjs docs) so I have a directory structure as follows:
/public/demo/gencenter/gencenter.html which I'm expecting to be visible on
https://cfsnap.com/demo/gencenter/gencenter.html
but I'm getting a 404 (the console reports "failed to load resource.... 404")
Anyone know if a Next.js has any handles I should jiggle to make static files load? For giggles I put a few image files in the /public directory and I can call them directly and they appear as expected:
https://cfsnap.com/demo/gencenter/swimCalendar.png
I read about naming conflicts in the Next.js docs but "gencenter.html" is unique and doesn't exist anywhere else.
Any help would be greatly appreciated.
Rich
Vercel uses clean urls, causing the file "index.html" to be renamed to "index". When I updated my internal links to point to "index" everything started working again. Only applies to html files apparently, CSS and image files remain unaffected.
https://vercel.com/docs/configuration#project/clean-urls

Next Image component throws 404 error in production, works fine in development

I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button.
On the development server, everything is fine, no errors or issues, but when I deploy my website and open the gallery the images don't show and throw a 404 error in the console (I included the required props).
When I replace the <Image/> component with <img>, everything is fine on the development server and live. Can anyone please help? I searched a lot and I didn't find anything like this issue.
My solution:
I had the same issue and solved it by renaming the image file names.
How the issue arose:
I had renamed the images, only changing uppercase to lowercase letters. This resulted in the files being wrongly named in my github repository. After a rename with new characters, the files were correctly updated on github.
Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start, which starts the Image Optimization API.
Use Vercel to deploy, which supports Image Optimization.
Configure a third-party loader in next.config.js.
That means: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available
To solve this problem. I just used next-optimized-images for static image and next/image for images from the cloud.
Kindly read this article for more understanding: https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i
Create a folder on root call it 'static' which is bassically /static/imagename.png
Set the source to the image like so;
<img src="/static/imagename.png" />
This should load the static image in file both in dev environment and build file.

CSS not working when deploying a Jekyll site

I just installed Jekyll and generated a new site and modified almost nothing of the default configuration.
I can serve it well locally.
But when I push the source code to Github Pages or deploy it on Gitlab with a build script, I have the same result: the CSS doesn't load.
I haven't changed anything in the layout. I thought this would be the kind of feature that should work by default.
The repo:
https://github.com/bmrejen/jekyll_blog
The Github Pages:
https://bmrejen.github.io/jekyll_blog/
It says
"Could not find the original style sheet."
Try to add this in jekyll_blog/_config.yml
baseurl: /PROJECT
url: http://USERNAME.github.io
I saw in your history you deleted the URL & baseurl and insert it wrong.
If you still can't understand how to insert, you can watch this tutorial, it's cover it:
Hosting on Github Pages

Image Path in Rails 4

I've recently deployed a project on Heroku and fixed most asset pipeline issues such that my stylesheets and javascript files work. However, I have one line of code in a css file that I thought would work based on documentation and other stackoverflow topics:
background-image: image-url("giphy.gif");
I got that line directly from another stackoverflow solution, given that my original code was simply url("giphy.gif"). Loading the page with either code gives me a 404 in the console. The project is structured like a rails app, so the app->assets folder has:
images
giphy.gif
stylesheets
javascript.
I've tried asset-url, image-url, url, "images/giphy.gif", "giphy.gif". Many iterations have been tried. I figure this should be a simple switch, but I'm not sure what I'm missing. Would appreciate all assistance! Thanks
Update:
Error message: GET https://herokuappname.herokuapp.com/assets/giphy.gif 404 (Not Found)
I even tried just moving the gif so that it lies in the assets folder instead of the images subfolder.
Try background-image: url('giphy.gif');
Background images declared in CSS must be in a .css.erb file, application.css.erb, for example.
I've found this syntax works:
background-image:url('<%= asset_path("giphy.gif") %> ');
But again, it must be in an .erb file in order to properly reference the asset pipeline.
Good luck.
Have you tried manually
heroku run rake assets:precompile
Then pushing again?
Is your master branch on git up to date? Have you pushed to git git push origin master, then git push heroku master
Just listing some things I would try

Resources