Deploy NextJS App directory on Netlify without Typeerror: cannot read properties of null (reading ‘endswith’)

You probably heard about it. NextJS 13 launching App Directory!

It is super cool and super nice to play around with.

So of course, I had to make a tiny side-project using this. It took me a couple of days to make an MVP ready and I was thrilled with this App directory feature.

I’ve always used Netlify for all my tiny side projects since it's just a few clicks and then your project is out. Huge fan!

My tiny side project (not gonna link to it, since it is super tiny and on danish) was ready to be deployed.

The first time running yarn dev in the project, I got the message that the node version should be at least ≥=18. I was using 16. And because of this, I made an environment variable on Netlify to be the same as in my project. I am using 18.4.0.

Then I tried to deploy and within the first minute I got

5. Edge Functions bundling                                    
Packaging Edge Functions from .netlify/edge-functions directory:
TypeError: Cannot read properties of null (reading 'endsWith')

I was searching for a while and there is not much documentation about this out there yet, so it took me a while to figure and — why I am writing this article.

Luckily the solution to this is just a package.

yarn add @netlify/plugin-nextjs@appdir --save-dev

Got this plugin installed and pushed to git and the tiny side project was now deployed correctly!

Come say hi on Twitter 👋