Handle empty assetPrefix scenario properly. (#3667)

Also make sure to init assetPrefix in next/asset in
the context of next-export.

lib/asset.js

@@ -7,7 +7,7 @@ export default function asset (path) {
   }
 
   const pathWithoutSlash = path.replace(/^\//, '')
-  return `${assetPrefix}/static/${pathWithoutSlash}`
+  return `${assetPrefix || ''}/static/${pathWithoutSlash}`
 }
 
 export function setAssetPrefix (url) {

server/export.js

@@ -8,6 +8,7 @@ import getConfig from './config'
 import { renderToHTML } from './render'
 import { getAvailableChunks } from './utils'
 import { printAndExit } from '../lib/utils'
+import { setAssetPrefix } from '../lib/asset'
 
 export default async function (dir, options, configuration) {
   dir = resolve(dir)
@@ -85,6 +86,9 @@ export default async function (dir, options, configuration) {
     availableChunks: getAvailableChunks(dir, config.distDir)
   }
 
+  // set the assetPrefix to use for 'next/asset'
+  setAssetPrefix(renderOpts.assetPrefix)
+
   // We need this for server rendering the Link component.
   global.__NEXT_DATA__ = {
     nextExport: true

server/index.js

@@ -85,7 +85,7 @@ export default class Server {
   }
 
   setAssetPrefix (prefix) {
-    this.renderOpts.assetPrefix = prefix.replace(/\/$/, '')
+    this.renderOpts.assetPrefix = prefix ? prefix.replace(/\/$/, '') : ''
     asset.setAssetPrefix(this.renderOpts.assetPrefix)
   }
 

test/integration/custom-server/server.js

@@ -12,6 +12,8 @@ app.prepare().then(() => {
   const server = micro((req, res) => {
     if (/setAssetPrefix/.test(req.url)) {
       app.setAssetPrefix(`http://127.0.0.1:${port}`)
+    } else if (/setEmptyAssetPrefix/.test(req.url)) {
+      app.setAssetPrefix(null)
     } else {
       // This is to support multi-zones support in localhost
       // and may be in staging deployments

test/integration/custom-server/test/index.test.js

@@ -38,6 +38,11 @@ describe('Custom Server', () => {
       expect(dynamicUsage).toMatch(/127\.0\.0\.1/)
     })
 
+    it('should handle null assetPrefix accordingly', async () => {
+      const $normal = cheerio.load(await renderViaHTTP(appPort, '/asset?setEmptyAssetPrefix=1'))
+      expect($normal('img').attr('src')).toBe('/static/myimage.png')
+    })
+
     it('should set the assetPrefix to a given request', async () => {
       for (let lc = 0; lc < 1000; lc++) {
         const [normalUsage, dynamicUsage] = await Promise.all([

test/integration/static/next.config.js

@@ -3,6 +3,7 @@ module.exports = {
     return {
       '/': { page: '/' },
       '/about': { page: '/about' },
+      '/asset': { page: '/asset' },
       '/button-link': { page: '/button-link' },
       '/get-initial-props-with-no-query': { page: '/get-initial-props-with-no-query' },
       '/counter': { page: '/counter' },

test/integration/static/pages/asset.js

@@ -0,0 +1,7 @@
+import asset from 'next/asset'
+
+export default () => (
+  <div id='asset-page'>
+    <img src={asset('/myimage.png')} />
+  </div>
+)

test/integration/static/test/ssr.js

@@ -42,5 +42,11 @@ export default function (context) {
       const html = await renderViaHTTP(context.port, '/get-initial-props-with-no-query')
       expect(html).toMatch(/Query is: {}/)
     })
+
+    it('should handle next/asset properly', async () => {
+      const html = await renderViaHTTP(context.port, '/asset')
+      const $ = cheerio.load(html)
+      expect($('img').attr('src')).toBe('/static/myimage.png')
+    })
   })
 }

test/node_modules/next

@@ -0,0 +1 @@
+../../