I am currently working on a project using Next.js version v12.3, and I have encountered an issue related to excluding page files with a *.dev.* extension from the build process. In my configuration file next.config.js, I have configured the pageExtensions setting to adjust the behavior according to the environment.
My objective is to exclude pages with the *.dev.* extension from the build process in a production environment, while including them in a development environment.
However, all pages are currently returning a 404 error.
I am looking for assistance and recommendations on how to properly configure the next.config.js file to achieve the desired outcome. How can I ensure that page files with the *.dev.* extension are excluded from the build process only in a production environment and included during development?
Any help or suggestions would be greatly appreciated. Thank you for your time and support!
const withTM = require('next-transpile-modules')(['ui']);
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = withTM((phase) => {
const generatePageExtensions = (prodExtensions) => {
const isDev = phase === PHASE_DEVELOPMENT_SERVER;
console.log('isDev', isDev);
console.log('phase', phase);
console.log('PHASE_DEVELOPMENT_SERVER', PHASE_DEVELOPMENT_SERVER);
if (isDev) {
const devExtensions = prodExtensions.map((extension) => {
const devExtension = `dev.${extension}`;
return devExtension;
});
return [...prodExtensions, ...devExtensions];
}
return prodExtensions;
};
return {
i18n: {
locales: ['en-US'],
defaultLocale: 'en-US',
},
pageExtensions: generatePageExtensions(['page.tsx', 'page.ts']),
reactStrictMode: true,
images: {
domains: ['cdn.sanity.io'],
},
};
});