Production error with the .next directory on Netlify

I'm improving my website everyday, particularly my blog. Talk about the layouts, a few server-side calls here and there in the codebase. Next.js gives me this flexibility, and I love it!

Recently, I decided to add a full-stack feature to my blog that'll allow me to know the number of people reading any article — or at least see the number of views an article gets — on my blog. If you look closely, beside the date this article was published, you should see it. I'll share an article about how you can do this on your own blog too, soon.

To do this, I needed to tap into the superpower of Next.js, as it provided a means for me to create and consume server-side functions with the API route.

.next directory returns a 404 error page

By default, if your site or app doesn't have any need for server-side functionalities like the live views component I implemented on my blog, you can build a Next.js app with the default command for static apps, see it below

// in package.json
{
  "scripts": {
    "build": "next build && next export"
  }
}

But, if your case is the other way around. Your build command should be like the one below. Why? When you go with "next export", Next.js removes access to the API routes feature since "next-export" builds your static site and you may not be needing any dynamic features.

{
  "scripts": {
    "build": "next build"
  }
}

But, for this to work, you'd need to set your publish directory to be .next instead of the out directory that you'd normally use. On Netlify, there's a next-runtime plugin that helps with the build process of all Next.js apps. You'd need to make sure that this plugin is installed in your project, and go ahead to add it in your netlify.toml file like so:

[[plugins]]
    package = "@netlify/plugin-nextjs"
 
[build]
    command = "npm run build"
    publish = ".next"

You'll notice that I've also specified the publish directory in the netlify config. You are not entirely limited to go with this approach. You can decide to make use of the Netlify dashboard, see an example below.

With this out of the way, one would think that everything will be fine at least, not until you hit the "deploy" button and you'd realize that your page comes up with a 404 error.

Apparently, this issue is somewhat related to the Next.js Runtime plugin developed by the folks at Netlify, and by default, its environment variable — NETLIFY_NEXT_PLUGIN_SKIP — is set to true when you go with next export, just as Matt Kane said:

The runtime needs to be disabled when you're using next export, but is needed for all other cases.

Setting that variable's value to true fixes the 404 error issue. To do that, you'll have to go into your site's settings page in your dashboard.

Wrapping up.

It is not a must that you use the next build command, but, whenever you think your app/project requires it, make sure that you've crossed all your Ts (Tees) and dotted all your Is (eyes). I'm glad that you read this article up to this point, thank you for doing so.

I'll add the link to how I built my real-time view counter here, in the coming days.