diff --git a/packages/next/build/webpack/loaders/next-flight-server-loader.ts b/packages/next/build/webpack/loaders/next-flight-server-loader.ts index 1beb921a9d07..fdaf07b21277 100644 --- a/packages/next/build/webpack/loaders/next-flight-server-loader.ts +++ b/packages/next/build/webpack/loaders/next-flight-server-loader.ts @@ -5,38 +5,27 @@ import { parse } from '../../swc' import { getBaseSWCOptions } from '../../swc/options' import { getRawPageExtensions } from '../../utils' -const createClientComponentFilter = - (pageExtensions: string[]) => (importSource: string) => { - const hasClientExtension = new RegExp( - `\\.client(\\.(${pageExtensions.join('|')}))?` - ).test(importSource) - // Special cases for Next.js APIs that are considered as client components: - return ( - hasClientExtension || - isNextComponent(importSource) || - isImageImport(importSource) - ) - } - -const createServerComponentFilter = - (pageExtensions: string[]) => (importSource: string) => { - return new RegExp(`\\.server(\\.(${pageExtensions.join('|')}))?`).test( - importSource - ) - } - -function isNextComponent(importSource: string) { - return ( - importSource.includes('next/link') || importSource.includes('next/image') +const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif'] + +const createClientComponentFilter = (pageExtensions: string[]) => { + // Special cases for Next.js APIs that are considered as client components: + // - .client.[ext] + // - next/link, next/image + // - .[imageExt] + const regex = new RegExp( + '(' + + `\\.client(\\.(${pageExtensions.join('|')}))?|` + + `next/link|next/image|` + + `\\.(${imageExtensions.join('|')})` + + ')$' ) + + return (importSource: string) => regex.test(importSource) } -function isImageImport(importSource: string) { - // TODO: share extension with next/image - // TODO: add other static assets, jpeg -> jpg - return ['jpg', 'jpeg', 'png', 'webp', 'avif'].some((imageExt) => - importSource.endsWith('.' + imageExt) - ) +const createServerComponentFilter = (pageExtensions: string[]) => { + const regex = new RegExp(`\\.server(\\.(${pageExtensions.join('|')}))?$`) + return (importSource: string) => regex.test(importSource) } async function parseImportsInfo({