My motivation to write this article
A few weeks ago I built a Next.js application and deployed it on Netlify.
I enjoyed working with Next.js but a few issues came up after the deploy on Netlify - main issues that will definitely be considered for future projects - and I decided to share them with the community in case someone’s been facing similar problems. So feel free to comment and share any thoughts/suggestions that can help me to have a better understanding of these issues :)
I had already created the project using the Pages Router when I decided to create a layout component and other server side components, and then I realized that the new App Router would be a better approach for what I was building. The App Router (or app directory) is still in experimental stages so clearly there’s a list of improvements to be done. But since I believe the idea is at some point having the old pages directory overridden by the app directory in a near future - so it made even more sense to me to use its latest features instead of sticking to the old pages router.
So I made the migration to the App Router and deployed on Netlify. Well, a few “surprises” along the way. Here are the challenges I faced.
Issue #1: 500 Internal Server Error
After migrating from Pages to App Router and deploying on Netlify that was the first issue I got. When trying to access specific URLs typing them directly instead of accessing them by navigating on the interface and clicking on the respective links, I started to get a 500 error. Or if I refreshed that page I also got the error. All the rest was working fine apparently but when trying to debug I found this discussion on Netlify Support forum describing a possible cause for what I was getting. After implementing the workaround suggested by the community, which is a prebuild script to set the env var __NEXT_PRIVATE_PREBUNDLED_REACT, the 500 error was gone.
It's not clear for me yet if the issue is related to Next.js, Netlify or even to React (see the discussion here).
Issue #2: Trailing Slash
Next.js has a trailingSlash option in next.config.js which we can set to true so that the URLs without trailing slashes are redirected to their counterparts with trailing slashes. And that worked for me running locally, it worked building locally, but it didn’t work properly when I deployed the application on Netlify. Even setting the trailingSlash option to true in Next.js and having the 'Pretty URLs' enabled on Netlify, it didn’t work for me for all pages. So I started to search about the issue and figured out that other people were having the same issue on Netlify and making a long story short: "it's a behaviour resulting from the logic on the Netlify CDN aimed at keeping site performance high by maximizing the cache hit rate".
So adding an edge function was the only workaround I found. Apparently it's an issue they're working on and I think it should be set as high priority since trailing slashes matter for SEO.
UPDATE: Netlify solved the issue on v5 release of Next.js runtime.
Issue #3: The 'prefetch' issue when using Next Link
This was from far the most annoying issue I faced during this project. Not only spent hours trying to debug and figure out what exactly was going on but also couldn’t find related issues or someone describing exactly the same issue I was having. Except for this discussion here that helped me a lot to understand on how to reproduce the bug. So basically I was on the home page and after clicking on a link, going to another page, clicking to go back to the home page, I was being kicked to the previous page that I just clicked after scrolling the home page. And I was so sure it was related to scrolling the page that it took me a long time to figure out that what was actually triggering the kicking behaviour was hovering any Next Link (or showing a Next Link in the viewport as I saw later in the Github discussion I found).
After many different tries I disabled the prefetch for all Next Links and that made the problem go away. But since I wasn't sure about the side effects of having prefetch={false} for the Next Links I decided it wasn't a viable solution. So I gave up on that approach and ended up removing the generateStaticParams for one of my page components. Issue was gone as well as generating static pages for that component on the server side which made me rethink about the point of using Nextjs. 😑
Issue #4: Preloaded CSS files not used within a few seconds
When importing a font from 'next/font/google' and using it in the layout component, the console in the browser starts triggering several warnings - and I mean it: several - saying 'The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriateasvalue and it is preloaded intentionally'. I realized removing the mentioned import made the warning go away. The warning was coming not only in dev but also in prod environment. And you can also find it on Next.js website, if you open the console you'll see the warnings coming. So I found a discussion on GitHub and an open issue related to it. Apparently there's no solution for that yet but I believe they're working on it considering the open issue progress.
My final impression and considerations
After all that buggy journey I found myself at the final week of the project rethinking my decision about migrating to the Next App Router. Or using Netlify instead of Vercel. And it's been a bit frustrating to be honest because I thought creating this simple application would be a smooth journey - and perhaps it would have been if the decisions along the way had been different. Because of all that I'm not sure if I'll use Nextjs + Netlify while the App Router is still in experimental stages. Or maybe not even to consider using the two technologies together in another project again. I had a great time learning and using Next.js but there's still a lot to be improved for the App Router and maybe it's more reliable to use it only when deploying on their ecosystem (Vercel), at least for now.
Top comments (11)
Thanks for the comments @ch3ber @vfulco @codebydex
As you mentioned it's been moving too fast, there's a lack of resources when you face issues, probably they're still developing and improving the App Router itself and its ecosystem. My intention is not to discourage people from using the App Router even because as my first experience working with Next.js I would really like to work with the technology again. I just hope all the issues don't become a bigger barrier to Next's growth to the point people start to give up on using it.
I've also been using nextjs recently, especially after using App Router, and I was so buggered that I felt helpless with very low 3rd party dependency support, I was wondering if I should give up and choose something stupid.
That's pretty typical of my experience on Netlify with anything more advanced than an SPA. Vercel in my experience just works. I'm having similar experiences right now with a Nuxt site and seriously considering just hosting on Vercel and seeing which platform wins.
I've never tried to deploy a Next.js app on Netlify, your post is very helpful, I'll consider all your issues for future deployments on netlify
I am not doubting any issues related to fast innovation with Next but I seriously question Netlify. I have never been a fan. I am currently deploying Next13 with app router (edge runtime enabled) on Cloudflare Pages + Functions (workers) with no issues and quite a pleasant experience. I create my Cloudflare deployments with Pulumi (IaC) and it is really solid in comparison to something like Netlify. I have not used Vercel yet, but I read about their greatness everywhere and I am sure I will try it soon.
They should have waited with server components and just do what remix did.
Ahora me encuentro desplegando una app de next 13 en netlify y la memoria caché no funciona, incluso con Next Runtime
Enfrenté el mismo problema (bien recordado, olvidé mencionar este), tuve que borrar el caché antes de compilar y terminé agregando esto en el comando npm cada vez que corría el build. Es frustrante porque pierdes las ventajas de usar Next.
I'm working on a project and yea the lack of documentation, maturity and resources for the App Router haver been very challenging
next13 has too many moving parts and has moved too fast resulting in a bunch of errors when I tried the app dir on aws amplify. Thanks for the perspective. I've moved back to pages dir.
Made an account here so that I can thank you! You clued me in on what was going on with the "prefetch" with next/link.