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