Remove next/asset (#6046)

* Remove next/asset

Reasoning described in #5970

* Remove next/asset tests

* Bring back asset-page

examples/with-zones/home/pages/about.js

@@ -1,4 +1,3 @@
-import asset from 'next/asset'
 import Link from 'next/link'
 
 export default () => (
@@ -9,6 +8,6 @@ export default () => (
         <a>Go Back</a>
       </Link>
     </div>
-    <img width={200} src={asset('/zeit.png')} />
+    <img width={200} src='/static/zeit.png' />
   </div>
 )

examples/with-zones/home/pages/index.js

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import asset from 'next/asset'
 import dynamic from 'next/dynamic'
 
 const Header = dynamic(import('../components/Header'))
@@ -18,6 +17,6 @@ export default () => (
         <a>About us</a>
       </Link>
     </div>
-    <img width={200} src={asset('/nextjs.png')} />
+    <img width={200} src='/static/nextjs.png' />
   </div>
 )

packages/next-server/asset.js

@@ -1 +0,0 @@
-module.exports = require('./dist/lib/asset')

packages/next-server/lib/asset.js

@@ -1,15 +0,0 @@
-let assetPrefix = typeof window !== 'undefined' ? (window.__NEXT_DATA__.assetPrefix) : undefined
-
-export default function asset (path) {
-  // If the URL starts with http, we assume it's an
-  if (/^https?:\/\//.test(path)) {
-    return path
-  }
-
-  const pathWithoutSlash = path.replace(/^\//, '')
-  return `${assetPrefix || ''}/static/${pathWithoutSlash}`
-}
-
-export function setAssetPrefix (url) {
-  assetPrefix = url
-}

packages/next-server/package.json

@@ -6,7 +6,6 @@
   "files": [
     "dist",
     "index.js",
-    "asset.js",
     "config.js",
     "constants.js",
     "dynamic.js",

packages/next-server/server/next-server.ts

@@ -11,7 +11,6 @@ import Router, {route, Route} from './router'
 import { isInternalUrl, isBlockedPage } from './utils'
 import loadConfig from 'next-server/next-config'
 import {PHASE_PRODUCTION_SERVER, BUILD_ID_FILE, CLIENT_STATIC_FILES_PATH, CLIENT_STATIC_FILES_RUNTIME} from 'next-server/constants'
-import * as asset from '../lib/asset'
 import * as envConfig from '../lib/runtime-config'
 import {loadComponents} from './load-components'
 
@@ -111,7 +110,6 @@ export default class Server {
 
   public setAssetPrefix(prefix?: string) {
     this.renderOpts.assetPrefix = prefix ? prefix.replace(/\/$/, '') : ''
-    asset.setAssetPrefix(this.renderOpts.assetPrefix)
   }
 
   // Backwards compatibility

packages/next/asset.js

@@ -1 +0,0 @@
-module.exports = require('next-server/asset')

packages/next/build/babel/plugins/next-to-next-server.ts

@@ -7,9 +7,6 @@ export default function NextToNextServer (): PluginObj {
     visitor: {
       ImportDeclaration (path: NodePath<ImportDeclaration>) {
         const source = path.node.source.value
-        if (source === 'next/asset') {
-          path.node.source.value = 'next-server/asset'
-        }
         if (source === 'next/dynamic') {
           path.node.source.value = 'next-server/dynamic'
         }

packages/next/export/index.js

@@ -7,7 +7,6 @@ import { resolve, join } from 'path'
 import { existsSync, readFileSync } from 'fs'
 import loadConfig from 'next-server/next-config'
 import { PHASE_EXPORT, SERVER_DIRECTORY, PAGES_MANIFEST, CONFIG_FILE, BUILD_ID_FILE, CLIENT_STATIC_FILES_PATH } from 'next-server/constants'
-import { setAssetPrefix } from 'next-server/asset'
 import * as envConfig from 'next-server/config'
 import createProgress from 'tty-aware-progress'
 
@@ -104,9 +103,6 @@ export default async function (dir, options, configuration) {
     publicRuntimeConfig
   })
 
-  // 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

packages/next/package.json

@@ -10,7 +10,6 @@
   "files": [
     "dist",
     "app.js",
-    "asset.js",
     "babel.js",
     "client.js",
     "config.js",

test/integration/basic/pages/using-asset/asset.js

@@ -1,10 +0,0 @@
-import asset from 'next/asset'
-
-export default () => (
-  <div id='asset-page'>
-    <img id='img1' src={asset('/the-image')} />
-    <img id='img2' src={asset('the-image')} />
-    <img id='img3' src={asset('http://the-image.com/the-image')} />
-    <img id='img4' src={asset('https://the-image.com/the-image')} />
-  </div>
-)

test/integration/basic/pages/using-asset/index.js

@@ -1,9 +0,0 @@
-import Link from 'next/link'
-
-export default () => (
-  <div>
-    <Link href='/using-asset/asset'>
-      <a id='go-asset'>Asset</a>
-    </Link>
-  </div>
-)

test/integration/basic/test/asset.js

@@ -1,57 +0,0 @@
-/* eslint-env jest */
-import cheerio from 'cheerio'
-import {
-  renderViaHTTP
-} from 'next-test-utils'
-import webdriver from 'next-webdriver'
-
-export default (context) => {
-  async function get$ (path) {
-    const html = await renderViaHTTP(context.appPort, path)
-    return cheerio.load(html)
-  }
-
-  describe('With next/asset', () => {
-    describe('with SSR', () => {
-      it('should handle beginning slash properly', async () => {
-        const $ = await get$('/using-asset/asset')
-        expect($('#img1').attr('src')).toBe('/static/the-image')
-        expect($('#img2').attr('src')).toBe('/static/the-image')
-      })
-
-      it('should handle http(s) properly', async () => {
-        const $ = await get$('/using-asset/asset')
-        expect($('#img3').attr('src')).toBe('http://the-image.com/the-image')
-        expect($('#img4').attr('src')).toBe('https://the-image.com/the-image')
-      })
-    })
-
-    describe('with client navigation', () => {
-      it('should handle beginning slash properly', async () => {
-        const browser = await webdriver(context.appPort, '/using-asset')
-        await browser
-          .elementByCss('#go-asset').click()
-          .waitForElementByCss('#asset-page')
-
-        expect(await browser.elementByCss('#img1').getAttribute('src'))
-          .toBe(`http://localhost:${context.appPort}/static/the-image`)
-        expect(await browser.elementByCss('#img2').getAttribute('src'))
-          .toBe(`http://localhost:${context.appPort}/static/the-image`)
-        browser.close()
-      })
-
-      it('should handle http(s) properly', async () => {
-        const browser = await webdriver(context.appPort, '/using-asset')
-        await browser
-          .elementByCss('#go-asset').click()
-          .waitForElementByCss('#asset-page')
-
-        expect(await browser.elementByCss('#img3').getAttribute('src'))
-          .toBe('http://the-image.com/the-image')
-        expect(await browser.elementByCss('#img4').getAttribute('src'))
-          .toBe('https://the-image.com/the-image')
-        browser.close()
-      })
-    })
-  })
-}

test/integration/basic/test/index.test.js

@@ -15,7 +15,6 @@ import clientNavigation from './client-navigation'
 import hmr from './hmr'
 import errorRecovery from './error-recovery'
 import dynamic from './dynamic'
-import asset from './asset'
 import processEnv from './process-env'
 
 const context = {}
@@ -72,6 +71,5 @@ describe('Basic Features', () => {
   dynamic(context, (p, q) => renderViaHTTP(context.appPort, p, q))
   hmr(context, (p, q) => renderViaHTTP(context.appPort, p, q))
   errorRecovery(context, (p, q) => renderViaHTTP(context.appPort, p, q))
-  asset(context)
   processEnv(context)
 })

test/integration/custom-server/pages/asset.js

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

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

@@ -3,14 +3,12 @@
 import { join } from 'path'
 import getPort from 'get-port'
 import clone from 'clone'
-import cheerio from 'cheerio'
 import {
   initNextServerScript,
   killApp,
   renderViaHTTP,
   fetchViaHTTP
 } from 'next-test-utils'
-import webdriver from 'next-webdriver'
 
 const appDir = join(__dirname, '../')
 let appPort
@@ -50,8 +48,8 @@ describe('Custom Server', () => {
     })
 
     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')
+      const normalUsage = await renderViaHTTP(appPort, '/asset?setEmptyAssetPrefix=1')
+      expect(normalUsage).toMatch(/"\/_next/)
     })
 
     it('should set the assetPrefix to a given request', async () => {
@@ -65,34 +63,6 @@ describe('Custom Server', () => {
         expect(dynamicUsage).toMatch(/127\.0\.0\.1/)
       }
     })
-
-    it('should support next/asset in server side', async () => {
-      const $normal = cheerio.load(await renderViaHTTP(appPort, '/asset'))
-      expect($normal('img').attr('src')).toBe('/static/myimage.png')
-
-      const $dynamic = cheerio.load(await renderViaHTTP(appPort, '/asset?setAssetPrefix=1'))
-      expect($dynamic('img').attr('src')).toBe(`http://127.0.0.1:${context.appPort}/static/myimage.png`)
-    })
-
-    it('should support next/asset in client side', async () => {
-      const browser = await webdriver(context.appPort, '/')
-      await browser
-        .elementByCss('#go-asset').click()
-        .waitForElementByCss('#asset-page')
-
-      expect(await browser.elementByCss('img').getAttribute('src'))
-        .toBe(`http://localhost:${context.appPort}/static/myimage.png`)
-      browser.close()
-
-      const browser2 = await webdriver(context.appPort, '/?setAssetPrefix=1')
-      await browser2
-        .elementByCss('#go-asset').click()
-        .waitForElementByCss('#asset-page')
-
-      expect(await browser2.elementByCss('img').getAttribute('src'))
-        .toBe(`http://127.0.0.1:${context.appPort}/static/myimage.png`)
-      browser2.close()
-    })
   })
 
   describe('with generateEtags enabled', () => {

test/integration/export/pages/asset.js

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

test/integration/export/test/ssr.js

@@ -43,12 +43,6 @@ export default function (context) {
       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')
-    })
-
     it('should render _error on 404', async () => {
       const html = await renderViaHTTP(context.port, '/404')
       expect(html).toMatch(/404/)