Saturday, 10 December 2022

Next JS 13 'next build' outputs app directory app/page.js and route group pages as 0 bytes and causes 404 error in production

Using the Next JS 13 experimental appDir feature, I have been able to port all my pages from the pages directory to the app directory and everything works well in the dev environment but the issue is that I have been getting 404 error in production.

I decided to troubleshoot by running next build locally and noticed that Next JS was building all the nested route group paths with the index path page app/page.js as 0 byte which in turn causes the 404 error for all those pages.

NOTE: In my next.config.js file, I have the experimental appDir flag configured while I have also deleted the pages directory because all the pages have now been moved to the app directory.

Here is a look at my next.config.js file:

/** @type {import('next').NextConfig} */

const nextConfig = {
  experimental: {
    appDir: true,
  },
  ...
};

module.exports = nextConfig;

I have tried to look at the official documentation for possible configurations and fixes but I haven't found anything to help.

What can I do?

Thank you.

EDIT:

So on further trials, I decided to eliminate the route group to test if it would actually build successfully and it did. I did that by changing (dashboard) folder name to dashboard which in turn added '/dashboard' to my routes which I don't want. I need the route group in the app directory for shared layouts across the app without changing the pathname. For instance, the route group directory example: app/(dashboard)/meeting/page.js still has a route of "/meeting" instead of this directory; app/dashboard/meeting/page.js which now has a route of "/dashboard/meeting".

After going through a similar issue on the vercel/next repository on Github, I discovered that the error in this particular issue occurred because the output: "standalone" option was set in the next.config.js file of the project but I do not have that option set in mine. Besides, the particular fix for this issue still noted the particular error with route groups which is what I am facing.

The baffling thing about my issue however is that the app/page.js meant to replace pages/index.js with the route "/" also returns 404 in production in addition with the 404 errors encountered with the route group pages.



from Next JS 13 'next build' outputs app directory app/page.js and route group pages as 0 bytes and causes 404 error in production

No comments:

Post a Comment