title: How to load jQuery files at specific locales in Next JS
body: <p>I have two projects in Next JS in which both I am using jQuery in One in which the jQuery is working the url is without locale i.e. https://yoursite/page but I have another project in which jQuery is not loading and neither running and its url is like https://yoursite/es/page
  Below is the attached screenshot of both the embedded browser files:
  <a href="https://i.stack.imgur.com/46GhU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/46GhU.jpg" alt="enter image description here" /></a>
  as you can see the project in which jQuery is running the js/slider is loading from the public folder but for the other, it is not loading. What could be the possible fix for that?
  this is my tsconfig.json:</p>
  <pre><code>    {
        &quot;compilerOptions&quot;: {
          &quot;target&quot;: &quot;es2021&quot;,
          &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
          &quot;allowJs&quot;: true,
          &quot;skipLibCheck&quot;: true,
          &quot;strict&quot;: true,
          &quot;forceConsistentCasingInFileNames&quot;: true,
          &quot;noEmit&quot;: true,
          &quot;esModuleInterop&quot;: true,
          &quot;module&quot;: &quot;esnext&quot;,
          &quot;moduleResolution&quot;: &quot;node&quot;,
          &quot;resolveJsonModule&quot;: true,
          &quot;isolatedModules&quot;: true,
          &quot;jsx&quot;: &quot;preserve&quot;,
          &quot;incremental&quot;: true,
          &quot;emitDecoratorMetadata&quot;: true,
          &quot;experimentalDecorators&quot;: true
        },
        &quot;include&quot;: [&quot;next-env.d.ts&quot;, &quot;**/*.ts&quot;, &quot;**/*.tsx&quot;],
        &quot;exclude&quot;: [&quot;node_modules&quot;]
      }
  next-i18next.config.js file :
  
      module.exports = {
          i18n: {
            defaultLocale: 'en',
            locales: ['en', 'es', 'pt'],
          },
          defaultNS: 'common',
          localeExtension: 'json',
          localePath: './public/locales',
          localeStructure: '{{lng}}/{{ns}}',
          reloadOnPrerender: false,
          serializeConfig: true,
          strictMode: true,
          use: [], // for other plugins
          fallbackLng: 'en',
          react: { useSuspense: true }
        };
  the next.config.js file is :
  /** @type {import('next').NextConfig} */
  const isProd = process.env.NODE_ENV === 'production';
  const { i18n } = require('./next-i18next.config');
  
  const fs = require('fs');
  const http = require('http');
  
  module.exports = {
    // allows you the rewriting of URLs
    i18n,
    // allows you to set headers for certain requests
    async headers() { return []; },
    pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
    reactStrictMode: true,
    eslint: {
      dirs: ['components', 'containers', 'core', 'pages', 'redux', 'shared', 'sockets', 'utils']
    },
    env: {
      pubnub: {
        publishKey: 'PUBLISHKEY',
        subscribeKey: 'SUBSCRIBEKEY',
        uuid: 'UUID',
        channels: {}
      },
      api: {
        baseUrl: 'BASEURL',
        configurationUrl: () =&gt; this.env.api.baseUrl + 'clients/config'
      },
    },
    basePath: '',
    assetPrefix: isProd ? '' : '',
    poweredByHeader: false,
    images: {
      domains: ['3qqk4c7swve3mhkbo1xpvbtm-wpengine.netdna-ssl.com', 'vepimg.b8cdn.com', 'vepimg1.b8cdn.com', 'images.unsplash.com']
    }
  };
  </code></pre>
  <p>and the _app.js is :</p>
  <pre><code>Router.events.on('routeChangeStart', (url: string) =&gt; {
      // debugger;
  });
  
  const { store, persistor } = rootStore();
  
  type NextPageWithLayout = NextPage &amp; {
      getLayout?: (page: ReactElement) =&gt; ReactNode;
  }
  
  type AppPropsWithLayout = AppProps &amp; {
      Component: NextPageWithLayout;
      props: any;
      apiResult: any;
      environmentVariables: any;
      isLocalhost: boolean;
  }
  
  export function reportWebVitals(metric: IWebVital) {
      metric.label &amp;&amp; metric.label === WEB_VITAL_LABEL ? webVitalsHandler(metric) : customVitalsHandler(metric);
  }
  
  function MyApp({ Component, environmentVariables, pageProps, apiResult, isLocalhost }: AppPropsWithLayout) {
      // const { getSocketInstance, stopSocketTransport } = useSocketTransport();
      // const socketInstance = getSocketInstance();
      // const { initUserStory } = useUserStory();
      const router = useRouter();
  
      useEffect(() =&gt; {
          if (!config.api.isEndpointLoaded &amp;&amp; apiResult) {
              config.api.configJson = apiResult;
              config.api.isLocalhost = isLocalhost;
              config.api.isEndpointLoaded = true;
              config.defaultLanguage = apiResult.languages.default;
              config.availableLanguages = commonUtils.convertStringToArray(apiResult.languages.options) ?? [];
          }
  
          if (environmentVariables) {
              config.envVariables = environmentVariables;
          }
  
          // initUserStory();
          // return () =&gt; stopSocketTransport();
      });
  
      // get Layout of page if defined, otherwise fallback to Normal Layout
  
      // eslint-disable-next-line arrow-body-style
      const getLayoutFn = () =&gt; {
          return Component.getLayout
              ? Component.getLayout(&lt;Component {...pageProps} /&gt;)
              : Component;
      };
  
      return (
          &lt;&gt;
              &lt;Provider store={store}&gt;
                  &lt;PersistGate loading={null} persistor={persistor}&gt;
                      {/* &lt;PubNubProvider client={socketInstance}&gt; */}
                      {/* Layout is added here for consistent Layout across pages */}
                      &lt;Head&gt;
                          &lt;link rel=&quot;stylesheet&quot; id=&quot;fontawesome-css&quot; href=&quot;http://themes.cray.bg/html/storylineslider/demo/css/font-awesome/css/font-awesome.css&quot; type=&quot;text/css&quot; media=&quot;all&quot;/&gt;
                      &lt;/Head&gt;
                      &lt;div className=&quot;main&quot;&gt;
                          {!isMobile &amp;&amp; &lt;Wrapper&gt;
                              &lt;Component {...pageProps} /&gt;
                          &lt;/Wrapper&gt;}
                          {isMobile &amp;&amp; &lt;Component {...pageProps} /&gt;}
  
                      &lt;/div&gt;
                      {/* {getLayoutFn()} */}
                      {/* &lt;/PubNubProvider&gt; */}
                  &lt;/PersistGate&gt;
              &lt;/Provider&gt;
          &lt;/&gt;
      );
  }
  
  let isApplicationLoaded = false;
  
  // Method to get Serverside Api URL Configuration
  MyApp.getInitialProps = async ({ Component, ctx }: any) =&gt; {
      // process.env.newvariable = 'Done!!!';
      if (ctx &amp;&amp; ctx.req) {
          // added a dummy commit
          const processKeys = { ...process.env };
  
          let { host } = ctx.req.headers;
          let pageProps = {};
  
          // [Todo: Remove] This code needs to be removed
          let isLocalhost = false;
          if (!host || host.indexOf('localhost') &gt; -1) {
              isLocalhost = true;
          }
  
          host = 'jovenesmercosur2021.com'; // 'semex.vfairs.com';
          // }
          // const configurationUrl = config.api.configurationUrl(host);
          const serverApi = new ServerAPI();
          const apiResult = await serverApi.getServerApiUrl(host);
  
          if (Component.getInitialProps) {
              pageProps = await Component.getInitialProps(ctx);
          }
  
          if (ctx.res &amp;&amp; !isApplicationLoaded &amp;&amp; apiResult.languages.default !== 'en') {
              isApplicationLoaded = true;
              ctx?.res?.writeHead(307, { Location: '/' + apiResult.languages.default + ctx.req.url });
              ctx?.res?.end();
          }
  
          return { environmentVariables: processKeys, pageProps, apiResult, isLocalhost };
      }
  
      consoleLogUtils.coloredLog('Initial Props for Client side');
      return { pageProps: {} };
  };
  
  export default appWithTranslation(MyApp, nextI18NextConfig);
  </code></pre>
  <p>what could be a possible solution for js/slider not loading in that project? I am unable to find the solution I am new to Next JS</p>