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