I have added an assetPrefix: http://localhost:8081 in the next.config file. Due to this the application gets the assets directly from the localhost bypassing the tunnel. Also the hmr reloading happens directly form localhost server.

Only the requests directed to the shopify api go through the tunnel.

const { parsed: localEnv } = require("dotenv").config();
const webpack = require("webpack");
const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
const host = JSON.stringify(process.env.HOST);
module.exports = {
  webpack: (config) => {
    const env = { API_KEY: apiKey, HOST_URL: host };
    config.plugins.push(new webpack.DefinePlugin(env));

    // Add ESM support for .mjs files in webpack 4
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });

    return config;
  },
<!--  add this line  -->
  assetPrefix: "http://localhost:8081",
};