diff --git a/docs/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx b/docs/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx index 1f9d6ef40d094..40a1db9d946e9 100644 --- a/docs/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx +++ b/docs/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx @@ -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 } ``` diff --git a/packages/next/src/server/config.ts b/packages/next/src/server/config.ts index e2240be056748..c1eedc43bce69 100644 --- a/packages/next/src/server/config.ts +++ b/packages/next/src/server/config.ts @@ -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` + diff --git a/test/development/app-dir/hmr-asset-prefix-full-url/asset-prefix.test.ts b/test/development/app-dir/hmr-asset-prefix-full-url/asset-prefix.test.ts index 16b582dcf5295..42bb67e99d429 100644 --- a/test/development/app-dir/hmr-asset-prefix-full-url/asset-prefix.test.ts +++ b/test/development/app-dir/hmr-asset-prefix-full-url/asset-prefix.test.ts @@ -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') }) }) })