Currently I have two folders in app directory which are (web) and (mobile). Now depending on .env, I want to have bundle files inside (web) folder for web and (mobile) folder for native. How can I do that or do I need to have separate app directories altogether?

Current next.config.mjs which is ofc not working:

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,

  // Export statically for native builds
  ...(isNative && {
    env: {
      IS_NATIVE: "true",
    },
    output: "export",
  }),

  webpack: (config, { isServer, buildId, dev, webpack }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      // keep existing Next aliases
    };

    if (isNative) {
      config.plugins.push(
        new webpack.NormalModuleReplacementPlugin(
          /src[\\/]app[\\/](api)/, // Match requests for anything under src/app/api
          path.resolve(__dirname, "src/setup/empty-module.cjs")
        )
      );

      const blockPaths = [
        path.resolve(__dirname, "src/app/(app)"),
      ];

      config.module.rules.push({
        test: /\.(js|ts|jsx|tsx)$/,
        /** @param {string} filePath */
        include: (filePath) => {
          return blockPaths.some((bp) => filePath.startsWith(bp));
        },
        use: [
          {
            loader: path.resolve(__dirname, "src/setup/empty-module.cjs"),
          },
        ],
      });

      config.resolve.alias["src/app/(app)"] = false;

    } else {
      const mobilePath = path.resolve(__dirname, "src/app/(mobile)");

      config.module.rules.push({
        test: /\.(js|ts|jsx|tsx)$/,
        /** @param {string} filePath */
        include: (filePath) => filePath.startsWith(mobilePath),
        use: [
          {
            loader: path.resolve(__dirname, "src/setup/empty-module.cjs"),
          },
        ],
      });

      config.resolve.alias["src/app/(mobile)"] = false;
    }

    return config;
  },
};