Comments (11)
Unbelievable! great news, thank you very much :)
from next-on-netlify.
Hi @gamliela, thank you for opening this issue and for sharing solutions of your own!
I will look into it this week and get back to you soon. I'd be quite interested to hear how you ended up dealing with it after all: By copying the 404.html
to public
after building or by adding the redirect?
PS: Apologies for taking so long to get back. Somehow it totally slipped my attention.
PPS: I accidentally tagged this issue in the latest release, when I meant to tag the second pull request (#5) instead. 😶
from next-on-netlify.
No worries :) Yes, I simply copy the 404.html
file. Redirect didn't work well for me. Just thought it could be nice to add that feature, since it's already moving a lot of files around.
from next-on-netlify.
Hmmm, very true. I like the idea!
Two considerations:
-
If there is already a user-created
404.html
file in thepublic
folder, we don't want to overwrite that. We skip copying the404.html
in that case and print out a warning? -
If the NextJS 404 page is dynamic (uses getInitialProps), we need to route the request to a Netlify function. So in this case, we need to add that redirect you mentioned. This will break locally previewing with
netlify dev
, so we need to figure something out... Any ideas? I wishnetlify dev
was consistent with Netlify in how it handles redirects.
from next-on-netlify.
Good points!
If there is already a user-created 404.html file in the public folder, we don't want to overwrite that. We skip copying the 404.html in that case and print out a warning?
Probably not overriding - what is the existing behaviour (for example when generating the _redirects
file?)
If the NextJS 404 page is dynamic (uses getInitialProps), we need to route the request to a Netlify function. So in this case, we need to add that redirect you mentioned. This will break locally previewing with netlify dev, so we need to figure something out... Any ideas? I wish netlify dev was consistent with Netlify in how it handles redirects.
I am not sure that 404 page can be dynamic, it is a safe fallback mechanism that is supplied by Nelify (not next.js) when no other route could be found. As Netlify not aware to dynamic content, I'm not sure you can make this page dynamic. I tried catch-all rule at the end of the routes file, but I don't remember now if it ever worked for me...
from next-on-netlify.
Hey @gamliela,
This is finally being fixed in the upcoming next-on-netlify
v2.
I've already written the code and tests; it works wonderfully. There are a few more things I want to look into before releasing v2, but I'm getting very close!
Finn 🙂
PS:
I am not sure that 404 page can be dynamic, it is a safe fallback mechanism that is supplied by Nelify (not next.js) when no other route could be found. As Netlify not aware to dynamic content, I'm not sure you can make this page dynamic. I tried catch-all rule at the end of the routes file, but I don't remember now if it ever worked for me...
You were totally right on this. I was confusing it with the pages/_error.js
page.
from next-on-netlify.
Thanks for the update! great news :)
I've tested wip-version2
branch. I guess it's still work on progress, but if you want I can share some of my findings.
- I got error
Error: 'out/index.html' already exists
when I use/pages/index.jsx
file. When I rename the file to/pages/index2.jsx
it works; - I got 404.html generated on the project root, but also on
/out
directory. Is this by intent? I would suggest to avoid generate files on the project root as default behaviour; - Maybe worth to update documentation about what should be added to
.gitignore
. Not sure about that, but at least in my V1 configuration I had this block:
# auto-generated files by build/next-on-netlify
/functions/nextRouter
/public/_next
/public/404.html
/public/_redirects
My test project is at https://github.com/gamliela/playground-auth/tree/next-on-netlify-v2
Thanks for the awesome work! looking forward seeing the final version :)
from next-on-netlify.
Hey @gamliela,
Wow, thanks for checking it out so quickly and looking for issues!
-
OH!! You are right. When I copy the pre-rendered pages to
out/
, I do a check to make sure that the file does not already exist. This is to make sure that I don't silently overwrite one of the files copied frompublic/
.But for
index.js
files, Netlify always creates two page entries, one routing to/
and one routing to/index
. So in this case, the first copying ofindex.html
toout/
goes fine. The second copying fails becauseindex.js
already exists.I am so glad you caught that. In my tests, the
index.js
files were always usinggetInitialProps
, so the issue didn't show up 😶 I just fixed it and added a test to make sure it doesn't happen again in the future! If you get another chance to have a look, let me know if it works now. -
The duplicate 404.html page is on purpose. There is an inconsistency between deployed Netlify and netlify-cli dev. Currenly, Netlify (deployed) expects the 404.html file in the publish folder, while netlify-cli dev expects it at the directory root.
In order to cover both cases, I'm copying the 404.html to both locations until this is fixed. I want to file an issue with https://github.com/netlify/cli, but haven't had a chance yet. Feel free to go for it, if you want 😀
-
Yes, things changed a bit! The
wip-version2
README should be up to date: https://github.com/FinnWoelm/next-on-netlify/blob/wip-version2/README.mdNotable changes:
- The
publish
folder innetlify.toml
should now beout/
next-on-netlify
now copies pre-rendered pages and static assets and the contents of thepublic/
directory intoout/
. This way, we don't have to worry about messing up thepublic/
folders and it is consistent with whatnext export
does. - For local previewing, you should use
netlify-cli
v2.51.0 or later. Lots of inconsistencies between deployed Netlify and netlify dev have been fixed! - You no longer need a 3rd party library such as
serve
orhttp-server
for local previewing. netlify-cli comes with its own. But you do need to change thenetlify.toml
configuration:[dev] functions = "functions" publish = "out" # We manually set the framework to static, otherwise Netlify automatically # detects NextJS and redirects do not work. # Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection framework = "#static"
- If you do local previewing, you
.gitignore
should now cover:# Files generated by next-on-netlify command functions/nextRouter out/ 404.html
- The
Again, thanks for being so quick to take a look! 🙌 You definitely caught a major issue there! Keep up the search for more 😁
I am going to look into getStaticProps
and getServerSideProps
now and see if there is something we can do.
from next-on-netlify.
- Great!
- Sounds like an issue, not sure about this workaround, let's hope it will be resolved soon.
- I wasn't aware to all these changes. It seems that I need to read the README again :)
I'll continue playing with it and let you know if I find anything else. Thanks!
from next-on-netlify.
Hey @gamliela,
next-on-netlify
v2 is finally out 🎉 🎉 You can see the full list of changes in the changelog.
Thank you for your bug-hunting and for brainstorming the best way to tackle the 404-page!
Unfortunately, I had to change the configuration again. So you'll need to make some changes to your netlify.toml
for v2:
# netlify.toml
[build]
command = "npm run build"
functions = "out_functions"
publish = "out_publish"
[dev]
functions = "out_functions"
publish = "out_publish"
framework = "#static"
And you will want to adjust your .gitignore
for local preview:
# .gitignore
# Files generated by next-on-netlify command
/out_publish/
/out_functions/
/404.html
Let me know if you run into any trouble. I closed this issue for now, but let's reopen it at any time if necessary! I've made a note to file an issue with netlify-cli
about the 404.html being at directory root vs being in the publish
folder and will keep you posted!
If you build something awesome, let me know! I'd love to feature some real-world projects in the README.
Happy hacking! 🔥
Finn
from next-on-netlify.
I know it's been a while, but I wanted to share a quick update:
I finally wrote a fix for netlify/cli
that picks up the 404.html
from the /out_publish
folder (matching the behavior of netlify.com). This was merged into netlify/cli
a few days ago. The latest next-on-netlify
(v2.4.0) no longer generates a 404.html
at the project root! 😊
from next-on-netlify.
Related Issues (20)
- Add tests for root level index pages of all page types for i18n
- Use splats in SSG redirects instead of adding a redirect for every exact prerendered path HOT 5
- Investigate tradeoffs between redirects and copying files [to correct paths] HOT 1
- Netlify post processing/bundling causes some rendering to be blocked HOT 4
- "blocking" on getStaticPaths' fallback throwing ambiguous error HOT 1
- Cannot find module 'critters' HOT 2
- Missing `pages-manifest.json` HOT 1
- Failure when the publish directory is `public`. HOT 1
- Cannot find module 'jimp' HOT 12
- Header config causes CLI to throw "invalid rule: cannot contain anything after *" HOT 7
- _redirects sorted wrong when using catch all route and dynamic routes HOT 4
- Add clarification for deployment with submodules HOT 4
- Cannot find module critters HOT 15
- [i18n] preview redirects are failing with non-default locales HOT 8
- Forward options params to "nextOnNetlify" function from node command-line args HOT 1
- Allow API routes to optionally run as background function HOT 3
- "The 'path' argument must be of type string. Received undefined" when using next-auth HOT 18
- Missing locale files with next-i18next HOT 10
- Timeout error when using MongoDB in getServerSideProps HOT 4
- *** deprecating next-on-netlify *** (info & feedback) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-on-netlify.