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,

1. 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".

2. 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.

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,

1. 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".

2. 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.

• javascript
• reactjs
• next.js

• This might help: stackoverflow./questions/57004513/… – Youssouf Oumar Commented Dec 6, 2022 at 21:02
• And maybe this more: github./vercel/next.js/issues/15880 – Youssouf Oumar Commented Dec 6, 2022 at 21:03
• @yousoumar. I have tried those solutions and added an exportPathMap but I am still get the 404 error pages instead of the actual pages on production – Idris Commented Dec 7, 2022 at 7:03

2 Answers 2

I tweeted about the issue and luckily for me, Lee Robinson, the VP of Developer Experience at Vercel saw it and took a look at the repository. The issue was caused because I used i18n with appDir in the next.config.js file like this:

const nextConfig = {
  experimental: {
    appDir: true,
  },
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  ...
}

Since the app only supports English for now and we are not planning to add any languages, I decided to remove it and all the 404 errors disappeared. Here is the updated next.config.js file:

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

If you need to support multiple languages within the app directory using Next JS 13, Here is a guide written here by Vercel.

Thank you.

I had the same issue. Removing the following from my next.config.js did the trick:

i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  }