title: How to set basePath for a static exported NextJS app
body: <p>I need to build and deploy a React / NextJS app to a Weblogic J2ee server with a specific context. I have some React experience, but taking my first steps with NextJS.</p>
  <p>Currently the build/verification steps are;</p>
  <ul>
  <li><p>Create a vanilla NextJS app</p>
  </li>
  <li><p>Add a <code>next.config.js</code> with a <code>module.export</code> to change the basepath</p>
  <p>module.exports = {
  basePath: '/test'
  }</p>
  </li>
  <li><p>Execute <code>npm run dev</code> the application is available on 'http://localhost:3000/test'</p>
  </li>
  <li><p>Add an export script to the package.json <code>&quot;export&quot;: &quot;next build &amp;&amp; next export&quot;</code> to support static export</p>
  </li>
  <li><p>Add the export below to resolve issue 21079</p>
  <pre><code>//https://github.com/vercel/next.js/issues/21079
  module.exports = {
    images: {
      loader: &quot;imgix&quot;,
      path: &quot;&quot;,
    }
  }
  </code></pre>
  </li>
  </ul>
  <ul>
  <li><p>Executed <code>npm run export</code> to create a static HTML export. Export is completed successfully to the <code>out</code> folder.
  When inspecting the <code>index.html</code> in the <code>out</code> folder, all references to the static content still starts with <code>/_next/static</code> and not with <code>/test/_next/static</code>.</p>
  <p>So this can be a misinterpretation of my side, please correct me if i am wrong here.</p>
  </li>
  <li><p>To be able to test the vanilla app on the J2EE applicationserver it has to be packed into a war file. To accomplish this i added the file <code>warpack/warpack.ts</code> to the project.</p>
  </li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    const fs = require('fs');
      const archiver = require('archiver');
      const rimraf = require('rimraf') ;
      
      const distFolder = 'dist' ;
      const warFile = distFolder + '/test.war';
      const buildFolder = 'out';
      const contextRoot = 'test';
      
      // Destroy dist folder
      rimraf(distFolder, (error) =&gt; { 
          if (!error) {       
              // Create dist folder
              if (!fs.existsSync(distFolder)){
                  fs.mkdirSync(distFolder);
              }
          
              const output = fs.createWriteStream(warFile);
              const archive = archiver('zip', {});
          
              output.on('close', () =&gt; {
                  console.log('war (' + warFile + ') ' + archive.pointer() + ' total bytes');
              });
          
              // write archive to output file
              archive.pipe(output);
              // add build folder to archive
              archive.directory(buildFolder,'');
              // add weblogic.xml
              const weblogicXML = '&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;weblogic-web-app xmlns="http://xmlns.oracle.com/weblogic/weblogic-web-app" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://xmlns.oracle.com/weblogic/weblogic-web-app http://xmlns.oracle.com/weblogic/weblogic-web-app/1.2/weblogic-web-app.xsd"&gt;&lt;weblogic-version&gt;10.3.6&lt;/weblogic-version&gt;&lt;context-root&gt;' + contextRoot '&lt;/context-root&gt;&lt;description&gt;Test NextJS&lt;/description&gt;&lt;/weblogic-web-app&gt;'
              archive.append(weblogicXML,{ name: 'WEB-INF/weblogic.xml' });
          
              const manifestMF = 'Manifest-Version: 1.0\nBuild-Tag: 0.0.1-SNAPSHOT\nWeblogic-Application-Version: 0.0.1-SNAPSHOT';
              archive.append(manifestMF,{ name: 'META-INF/MANIFEST.MF' });
          
              archive.finalize();
          
          } else {
              console.log('Failed to delete "' + distFolder + '" folder.') ;
              process.exit(1);
          };
      });</code></pre>
  </div>
  </div>
  </p>
  <ul>
  <li><p>Installed the required packages for <code>webpack.ts</code></p>
  <p>npm install fs --save-dev
  npm install rimraf --save-dev
  npm install archiver --save-dev</p>
  </li>
  <li><p>Added the script <code>&quot;warpack&quot;: &quot;next build &amp;&amp; next export &amp;&amp; node warpack/warpack.ts&quot;</code> to build, export and pack the static app to an war.</p>
  </li>
  <li><p>After deployment of the war-file the page can be loaded on <code>http://something/test</code> but shows an empty page.
  Network development tools indicate that the requests are made to the root of the application server, not to the configured basepath.</p>
  <pre><code>  GET http://host:8001/static/css/main.09371e9d.chunk.css     net::ERR_ABORTED 404 (Not Found)
    GET http://host/static/js/2.0850eeb7.chunk.js net::ERR_ABORTED 404 (Not Found)
    GET http://host/static/js/main.dc0c945b.chunk.js net::ERR_ABORTED 404 (Not Found)
  </code></pre>
  </li>
  </ul>
  <p>​</p>