_next folder name change

[TheHellTower]

Hello,

I seen that basically Next is using _next as name for the "main folder"

So I wonder if it is possible to change it in the config or if it would need to be changed after the build ?

Thanks for the time you took to read whatever if you answer or no,

Regards.

[willfolsom]

@TheHellTower Not sure if you're still stuck on this, but you can do something like this:

cd into your build directory, possibly out/

grep -rl '/_next' * | xargs sed -i 's|/_next|/next2|g'

or

grep -rli '_next' * | xargs -I@ sed -i '' 's/_next/next2/g' @

Then rename the _next directory itself to next2 or whatever you want (as long as it matches the above command). If you're building to static, it'll likely be in the out/ directory.

Solved my problem with deploying two static Next projects on the same domain.

[TheHellTower]

Well.. To be honest I didn't think about it this way and just gave up on this idea when I seen no answer ! 😅
But you are a savior 🚀
Even if I might not use it tomorrow, I'll try it soon ! 😎
I'm not sure if it grep in every files or just the dir since I don't often use these commands but I'll try to tweak them if needed ! 🛠️

Thanks ! 🔥

[fcano-ut]

This workaround doesn't seem to work with the app router

[michielvanderros-tomtom]

Since there still is no way to configure this, we came up with a different approach. Maybe it's still relevant to anyone finding this thread.

You can change the webpack configuration in next.config.(m)js, to change the names or foldernames of your code and css chunks. This way you can prefix them with a projectname for example, and then filter on that in your ingress configuration or wherever you route your users to the correct app or service.

webpack(config, { webpack, buildId }) {
	//* Make sure that _next/static/* assets are placed in a subfolder with the project name.
	//* This is to avoid conflicts when deploying multiple projects on the same domain.
	//* Example: _next/static/myprojectname/chunks/main-408c841afee4897b.js

	const staticSubfolder = `static/${process.env.npm_package_name}`;

	//* Put JS chunks in a subfolder:
	config.output.filename = config.output.filename.replace('static', staticSubfolder);

	//* Put CSS in a subfolder, which is a bit less straightforward
	config.plugins.forEach(({ constructor, options }) => {
		if (constructor.name === 'NextMiniCssExtractPlugin' && options) {
			options.filename = options.filename.replace('static', staticSubfolder);
			options.chunkFilename = options.chunkFilename.replace('static', staticSubfolder);
		}
	});
	return config;
},

Note: next/dynamic imports seem to go around this config and may require additional configuration.