Skip to content

Commit

Permalink
chore: remove asset prefix warning log and update docs (#68681)
Browse files Browse the repository at this point in the history
### Why?

In #68622 we fixed a bug that HMR
breaks when `assetPrefix` is set to full URL.
The fix was targeted to the edge case where the user may set `localhost`
to the `assetPrefix`, and technically, when the request is valid the HMR
should work.

However, we do not recommend this pattern as the `assetPrefix` is
intended to be used for setting a CDN URL.

### How?

Therefore we modify the docs to gently imply that the `assetPrefix` is
for CDN URL.
Also, removed the warning log that could be confusing whether we support
it or not.
Setting localhost will still work, but we do not mention about it within
the app.
  • Loading branch information
devjiwonchoi authored Aug 8, 2024
1 parent 7c10fcf commit 485497d
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 19 deletions.
25 changes: 17 additions & 8 deletions docs/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,25 @@ description: Learn how to use the assetPrefix config option to configure your CD
> suited for hosting your application on a sub-path like `/docs`.
> We do not suggest you use a custom Asset Prefix for this use case.
To set up a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network), you can set up an asset prefix and configure your CDN's origin to resolve to the domain that Next.js is hosted on.

Open `next.config.js` and add the `assetPrefix` config:
## Set up a CDN

```js filename="next.config.js"
const isProd = process.env.NODE_ENV === 'production'
To set up a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network), you can set up an asset prefix and configure your CDN's origin to resolve to the domain that Next.js is hosted on.

module.exports = {
// Use the CDN in production and localhost for development.
assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
Open `next.config.mjs` and add the `assetPrefix` config based on the [phase](/docs/app/api-reference/next-config-js#async-configuration):

```js filename="next.config.mjs"
// @ts-check
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'

export default (phase) => {
const isDev = phase === PHASE_DEVELOPMENT_SERVER
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
assetPrefix: isDev ? undefined : 'https://cdn.mydomain.com',
}
return nextConfig
}
```

Expand Down
10 changes: 0 additions & 10 deletions packages/next/src/server/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1069,16 +1069,6 @@ export default async function loadConfig(
}
}

if (
phase === PHASE_DEVELOPMENT_SERVER &&
URL.canParse(userConfig.assetPrefix ?? '')
) {
curLog.warn(
`Absolute URL assetPrefix "${userConfig.assetPrefix}" may disrupt development HMR.\n` +
'See more info here https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix'
)
}

if (userConfig.target && userConfig.target !== 'server') {
throw new Error(
`The "target" property is no longer supported in ${configFileName}.\n` +
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe('app-dir assetPrefix full URL', () => {
})

await retry(async () => {
expect(await browser.elementByCss('p').text()).toContain('after edit')
expect(await browser.elementByCss('p').text()).toBe('after edit')
})
})
})

0 comments on commit 485497d

Please sign in to comment.