A solution to selectively build specific sets of files in a Next JS project within a mono repo organization is by utilizing the pageExtensions feature.
In our current setup, we manage multiple websites within a single Next JS project, each with its unique build process, all accessible under the same domain but different paths.
To achieve this, you can categorize the files based on their purpose by naming them with distinct extensions (e.g., .ila.tsx, .msr.tsx). This allows you to conditionally build only the files matching a specific extension when needed.
Within the next.config.js file:
const nextConfig = {
output: 'export',
pageExtensions: (() => {
const { NEXT_PUBLIC_BUILDTYPE } = process.env;
switch (NEXT_PUBLIC_BUILDTYPE) {
case 'ila':
return ['ila.tsx', 'ila.ts', 'ila.js', 'ila.jsx'];
case 'msr':
return ['msr.tsx', 'msr.js', 'msr.js', 'msr.jsx'];
default:
return ['tsx', 'ts', 'jsx', 'js'];
}
})()
}
It's worth noting that using an Immediately Invoked Function Expression (IIFE) for the 'pageExtensions' property enables dynamic selection of the file types to build based on the provided environment variable.
Key point: The default case in the switch statement ensures that only files with extensions .tsx, .ts, .jsx, or .js explicitly listed are built, excluding potential mismatches like .ila.tsx or .msr.js even if they appear similar to the default cases.