I'm building a NextJs site hosted on Netlify. The idea of the site is that it will be a gradual replacement of another site built on older tech, so the NextJs site will return a page if it has it otherwise the request will be re-written to the older site.
I have a Netlify redirect rule setup in the netlify.toml file as follows:
[[redirects]]
from = "/*"
to = "http://old-site-url/:splat"
status = 200
force = false
For the most part this works. If I add a static file to Netlify, then it is returned, the homepage in NextJs is returned, and pages I haven't yet created get rewriten to the old sites url. However every call to anything in the /_next/ folder return a 500 error.
Remove the redirect and it all works again.
Related
External sources beyond my control link to pages like: somedomain.com/Some-Path which results in a 404 because the path is case sensitive.
I'm getting a "too many redirects" error in production (it works fine local) when using the following:
const url = '/*'
createRedirect({
fromPath: url,
toPath: url.toLowerCase(),
})
For context I'm hosting with Gatsby Cloud and using their plugin gatsby-plugin-gatsby-cloud
The expectation is that somedomain.com/Some-Path will redirect to somedomain.com/some-path
I am trying to setup a URL rewrite in my next.config.js pointing a path to another subdomain e.g.
localhost:3010/xyz shows localhost:3021/foo/baz/bar
Both are separate NEXT services.
However when trying it just between localhost ports localhost:3010/xyz shows a blank page, if I change the rewrite to look point to our production environment, so:
localhost:3010/xyz shows https://example.com/foo/baz/bar
the page renders but none of the JS or images are loaded.
I see in my Console:
So it looks like it is looking for the JS on the localhost, not the production environment.
I have disabled all security headers but it made no difference
We have a NextJS app hosted on Netlify. We implemented custom error pages using the NextJS _error.js file but when a 404 or 500 error occurs, instead of showing the NextJS error page, we get the Netlify error page.
Is there something in the netlify.toml that we have to disable so that we get our own NextJS error page instead? Or is there another solution
1
To use a custom 404 error page, you'll want to use the custom 404 page at pages/404.js instead of pages/_error.js, since the 404 page will be statically generated. _error.js appears to be mainly for 500 or other server errors. See this tutorial for more information, or the Next.js docs.
To use your new static 404 page with Netlify, you can create a custom 404 redirect with Netlify, which will be shown instead of the default 404 page.
To configure a 404 redirect with the netlify.toml syntax:
[[redirects]]
from = "/*"
to = "/404"
status = 404
Any idea how to make a custom 404.js also return an error code 404 rather than 200?
Hosting is on Firebase hosting so no access to .htaccess or Apache or anything like that.
The trouble is Firebase hosting only allows to rewrite source ** to an html file like /404/index.html which by default returns 200 rather than 404, which is a bad SEO experience.
So the question becomes if Firebase and/or Nextjs has any way for an html file to return a status 404? tried httpEquiv, didn't work, still 200...
I have a Gatsby blog. I am writing a set of tutorial posts for coding games in create-react-app. In my Gatsby post markdown, I'm trying to link to the built version of the demo react app for that post hosted on the same server, but Gatsby keeps giving me a 404 page.
I am using nginx. All the contents of the public folder resulting from gatsby build sit in the var/www/html directory of my webserver.
The create-react-app build sits inside var/www/html/tutorials/01/, and has its own index.html file.
In my markdown I have tried both these formats of links: view the code [here](/tutorials/01/) and view the code [here](//165.227.94.249/tutorials/01/).
If you're viewing the post in your browser at //165.227.94.249/posts/tutorial-01 and click on the link, it'll take you to //165.227.94.249/tutorials/01/ but display a 404 page. But if you refresh the browser at the same URL, the working react app will be served.
How do I keep Gatsby from overriding this request and showing a 404 page instead of just letting the web server serve up the index.html file that exists at that url?
The internal links in your markup are automatically converted into Gatsby Link while you build. Gatsby Link is only for internal ressources from the Gatsby build. Your create-react-app app is on the same server but outside the Gatsby build process.
From the documentation:
This component is intended only for links to pages handled by Gatsby.
For links to pages on other domains or pages on the same domain not
handled by the current Gatsby site, use the normal element.
I think using the full URL inside the markup including https might be successful: https://165.227.94.249/tutorials/01/
PS: When I tried I got a connection timeout from your server.
You should try to disable gatsby-plugin-catch-links. In case this doesn't works try to catch the onClick event, cancel the event and trigger your own redirect.
function processExternalSameDomainLink(event) {
window.location.href = url
event.stopPropagation()
event.preventDefault()
return false
}
<a href={newTo} onClick={processExternalSameDomainLink}>