Nextjs custom 404 page not showing when accessing invalid url in netlify - javascript

I've created a 404.js file in /pages folder on my Nextjs project, the 404 page is working perfectly when entering an error or invalid URL in local but when its deployed in netlify they showing the default netlify error page.
version details
"next": "^10.0.4",
"react": "17.0.2",
Tried netlify's redirect rule, but nothing happened
[[redirects]]
from = "/*"
to = "/404.html"
status = 404

I found a solution when randomly changed the redirects rule based on this article https://docs.netlify.com/routing/redirects/#syntax-for-the-netlify-configuration-file
Here is my fix, it's working when redeployed after.
Create a netlify.toml file in the project directory and paste below code.
[[redirects]]
from = "/*"
to = "/404"
status = 404

I found two solution from this page =>
https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/
I added a _redirects file inside the /public folder like /public/_redirects. I then pasted /* /index.html 200 into the _redirects file.
redeploy your app and it's done
Or second way:
Add netlify.toml file to the root directory of your project and paste in to:
[[redirects]]
from = "/*"
to = "/"
status = 200
redeploy your app and it's done

Related

NextJs | _ssgManifest.js, _buildManifest.js 404 and different name for file _app _#### on server build and browser

I have deployed a NextJs app on digitalocean droplet with Ubuntu 22.04.
"next": "12.2.3",
"react": "18.2.0",
I am getting this 404 error for _ssgManifest.js, _buildManifest.js and _next/static/chunks/pages/_app-83b8d0a73a58c453.js files.
enter image description here
I checked the build on server, files are present there, but in broweser they are showing 404. Another thing I noticed that the file _app-83b8d0a73a58c453.js getting fetched on browser but on server build it is with different name i.e. _app-8ba37a8edc5ef34c.js
What I Tried
I checked with and without custom dir for build, but it didn't worked
I checked with custom buildID too
const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
module.exports = {
async generateBuildId() {
return execSync(lastCommitCommand).toString().trim();
},
};
any help would be greatly appreciated
Solution:
These files were not matching to what is asked in browser request to what is available at build on server. In my case the reason was that, after build i was not restarting the application.
if you are using pm2 to serve your application named fe, please run:
pm2 restart fe
Then Hard refresh your website in browser, it will work.
If you are using other tool, then please follow docs for the same to restart the application. And if the issue is diffrent than this in your case, please share your solution here.
Thank you.

Vercel giving 404 error when using a custom URL

I am developing a code playground. Everything works in my computer,
It has a saving system. Encodes your code and puts it in the URL. When page loads, gets the code from the URL. It works perfectly fine. It uses Vite, vanilla JS, and I used the Vite setting on Vercel, but the saving system doesn't work. When you reload, instead of getting the code, It gives a 404 error message, as the URL isn't on the dist folder.
What can I do?
Complete code: https://github.com/L1ghtingBolt/codeebox/
Add vercel configuration to your root directory.
vercel.json
{
"rewrites": [{
"source": "/(.*)",
"destination": "/" }]
}

"_ssgManifest.js" & _buildManifest.js missing from a nextjs app hosted on Google Cloud Platform

sometimes the console shows these errors on opening the website
GET https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js
[HTTP/3 404 Not Found 311ms]
GET https://example.com/subpath/_next/static/9ufj5kFJf/_ssgManifest.js
[HTTP/3 404 Not Found 334ms]
Loading failed for the <script> with source “https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js”. 1434-247:1:1
Loading failed for the <script> with source “https://example.com/subpath/_next/static/9ufj5kFJf/_ssgManifest.js”.
the app does use ISR and that seems to be working, it does get updated, what do these files do? what could happen if they are missing?
"react": "17.0.2"
"next": "10.1.3",
"node" "15.1.2"
I had the same problem with GCP (Kubernetes engine) with pods count > 1. I resolved the issue by restarting the deployment (all pods).
On that Github issue #Prabir linked to in a comment, someone posted a way to use the generateBuildId function within the Next.js config file:
const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
module.exports = {
async generateBuildId() {
return execSync(lastCommitCommand).toString().trim();
},
};
I work with an app that uses some combination of AWS CodeBuild and Docker images, which prevents direct access to all the git commands so that snippet above didn't work. But using CODEBUILD_BUILD_ID or really any environment variable (unique to either that commit or the build itself) did. I'm not as familiar with the GCP-equivalents but this Cloud Build Docs page makes it seem like $COMMIT_SHA would be a good option to try.

React app not loading js file when accessing it with a non home page url

I have a react app which I serve with nodejs backend. My requirement is to inject a variable from node server to react code when it is running. When I access the app with the home page URL it works fine but not with other URLs. I am going to put more details to understand the complete scenario.
In node server I have code to create a file like this: dist folder is where react build is stored
fs.writeFileSync(
path.join(__dirname, "../dist", "config.js"),
`window.INJECTED_VARIABLE= { value: "qwerty", }`
);
In public > index.html I have this script to load the created config.js file.
<script src="./config.js"></script>
Now, when I run my node server and access my app with the home URL http://localhost:3000, I am able to access the injected value - window.INJECTED_VARIABLE as { value: "qwerty", } and config file is also present under "sources" tab in chrome devtools.
I have one page in my app - http://localhost:3000/profile/profileId, when I directly open my app with this URL, I see window.INJECTED_VARIABLE as undefined. It looks like there is no config file in source tab if we look in chrome devtools.
I am getting a same problem in production too.
Can anyone explain this behavior and help me in fixing it. I would appreciate any help.
The dot in ./config.js denotes a URL relative to the current path. i.e. A document served from /profile/profileId will request the file /profile/profileId/config.js - which doesn't exist.
To specify that a partial URL always be from the root, you should omit the dot.
<script src="/config.js"></script>

Axios fetching data from file not working after deploying to github pages

I am writing a react app using Webpack and not create react app.
Here is a sample project folder structure:
data
targetData.md
src
component
Text.js
container
App.js
index.js
index.html
I am trying to read in the contents from targetData.md in the Text.js component but it doesn't seem to be working as I'm getting a Request failed with status code 404 in the console after deploying to Github Pages. I've installed gh-pages, am able to deploy properly, and everything is rendering except the contents I try to read in from the file is not working using the following code:
axios.get('https://username.github.io/data/' + filename)
.then( response => {
this.setState({
...this.state,
data: response.data
});
})
.catch(function (error) {
console.log(error);
});
Rendering it:
render() {
return(
<div>
{this.state.data? (<div className={styles.content}>{this.state.data}<div/>) : null}
</div>
)
}
It was working when I used a relative path in development mode, but when I deployed it to GitHub pages I noticed the 404 not found, so I thought if I put the domain URL it should work, but it didn't. What should the pathname be in axios.get(????) for it work after deploying to GitHub pages?
GitHub displays files in their view. If you'd like to retrieve the content, you are after the raw version of the file.
Visit your GitHub repo and navigate to targetData.md.
On the right you see a button Raw.
Click it and the content of the file will show up.
Use that link in your axios.get() call.
The url will contain the raw word and will look something like this
https://raw.githubusercontent.com/[your-username]/[your-application]/gh-pages/data/targetData.md.

Categories

Resources