title: How to change base path for assets, images, etc
body: <p>I need my app to work well on a subfolder of the main domain. Exactly <a href="https://www.sergiosdorje.com/out/index.html" rel="nofollow noreferrer">here</a>
  At first I had a plenty of errors of scripts, css and images not being loaded.</p>
  <p>I added the following to next.config.js:</p>
  <pre><code>basePath: &quot;/out&quot;,
  </code></pre>
  <p>Now scripts and css are working well when exported, they have the /out/ in the path.</p>
  <p>However the files do not have yet the /out/ in the path, thus they are giving 404 errors.</p>
  <p>I tried to follow <a href="https://levelup.gitconnected.com/deploy-your-nextjs-application-on-a-different-base-path-i-e-not-root-1c4d210cce8a" rel="nofollow noreferrer">this</a> tutorial, but it looks like I am still doing something wrong,</p>
  <p>My next.config.js now is:</p>
  <pre><code>const path = require(&quot;path&quot;);
  
  module.exports = {
    trailingSlash: true,
    sassOptions: {
      includePaths: [path.join(__dirname, &quot;styles&quot;)],
    },
  
    basePath: &quot;/out&quot;,
    assetPrefix: process.env.BASE_PATH || '',
    publicRuntimeConfig: {
      basePath: process.env.BASE_PATH || '',
    },
  };
  </code></pre>
  <p>The relevant piece of the package.json is:</p>
  <p>&quot;scripts&quot;: {
  &quot;dev&quot;: &quot;node server.js -p $PORT&quot;,
  &quot;build&quot;: &quot;next build&quot;,
  &quot;prod&quot;: &quot;BASE_PATH=/out next build &amp;&amp; next export&quot;,
  &quot;start&quot;: &quot;NODE_ENV=production node server.js -p $PORT&quot;,
  &quot;start2&quot;: &quot;next start&quot;
  },</p>
  <p>The server.js is:</p>
  <pre><code>const express = require('express');
  const next = require('next');
  const path = require('path');
  const bodyParser = require('body-parser');
  const keys = require(&quot;./server/config/keys&quot;);
  const stripe = require('stripe')(keys.stripeSecretKey);
  const routes = require('./routes');
  
  const dev = process.env.NODE_ENV !== 'production';
  
  const app = next({ dir: '.', dev });
  const handle = routes.getRequestHandler(app);
  
  app.prepare().then(() =&gt; {
      const server = express();
          // Static files
          // https://github.com/zeit/next.js/tree/4.2.3#user-content-static-file-serving-eg-images
      server.use('/images', express.static(path.join(__dirname, 'images'), {
          maxAge: dev ? '0' : '365d'
      }));
  
      server.use(bodyParser.json());
  
      server.get('*', (req, res) =&gt; {
          return handle(req, res)
      });
  
      server.post('/api/stripe/checkout', async (req, res) =&gt; {
          await stripe.charges.create({
              amount: req.body.amount,
              currency: 'usd',
              description: 'Mojosa - React Next Landing Page Templates',
              source: req.body.token.id
          });
          res.send({})
      });
  
      const PORT = process.env.PORT || 3000;
  
      server.listen(PORT, (err) =&gt; {
          if (err) throw err
          console.log(`&gt; Read on http://localhost:${PORT}`)
      });
  })
  </code></pre>
  <p>And here is an example of an image in a component:</p>
  <pre><code>&lt;div className=&quot;col-lg-6 col-md-12&quot;&gt;
      &lt;div className=&quot;book-image&quot;&gt;
      &lt;img src='/images/book-img.png' alt=&quot;image&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>With this configuration:</strong></p>
  <ul>
  <li>EXPORT - next build &amp;&amp; next export on the /out/ folder are working well when uploaded to the live website, BUT images are giving 404</li>
  <li>DEV or BUILD they are giving 404 and working much worse than the EXPORT site published on the real domain. If I remove <code>basePath: &quot;/out&quot;,</code> the dev mode works excellent</li>
  </ul>
  <p><strong>Questions:</strong>
  How can I make the /out/ path be added to all the images/assets?
  I am ok to re-add basePath: &quot;/out&quot;,` when exporting.</p>