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.