diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index b1604e5c284fe..97fee15486dfd 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -1280,6 +1280,11 @@ export default async function getBaseWebpackConfig(
loader: 'next-flight-client-loader',
},
},
+ // _app should be treated as a client component as well as all its dependencies.
+ {
+ test: new RegExp(`_app\\.(${rawPageExtensions.join('|')})$`),
+ layer: 'sc_client',
+ },
]
: []
: []),
diff --git a/test/integration/react-streaming-and-server-components/test/css.js b/test/integration/react-streaming-and-server-components/test/css.js
index 39bcf1bfafdd0..b48a62cf35665 100644
--- a/test/integration/react-streaming-and-server-components/test/css.js
+++ b/test/integration/react-streaming-and-server-components/test/css.js
@@ -9,6 +9,7 @@ export default function (context) {
)
expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
})
+
it('should include global styles with `serverComponents: true`', async () => {
const browser = await webdriver(context.appPort, '/global-styles-rsc')
const currentColor = await browser.eval(
@@ -24,4 +25,10 @@ export default function (context) {
)
expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
})
+
+ it('should support next/head inside _app with RSC', async () => {
+ const browser = await webdriver(context.appPort, '/multi')
+ const title = await browser.eval(`document.title`)
+ expect(title).toBe('hi')
+ })
}
diff --git a/test/integration/react-streaming-and-server-components/test/index.test.js b/test/integration/react-streaming-and-server-components/test/index.test.js
index 238f16b6b6ec2..549c08a1c7c2a 100644
--- a/test/integration/react-streaming-and-server-components/test/index.test.js
+++ b/test/integration/react-streaming-and-server-components/test/index.test.js
@@ -24,11 +24,17 @@ import streaming from './streaming'
import basic from './basic'
import { getNodeBuiltinModuleNotSupportedInEdgeRuntimeMessage } from 'next/dist/build/utils'
-const appWithGlobalCss = `
+const appWithGlobalCssAndHead = `
import '../styles.css'
+import Head from 'next/head'
function App({ Component, pageProps }) {
- return
+ return <>
+
+ hi
+
+
+
}
export default App
@@ -156,7 +162,7 @@ const nodejsRuntimeBasicSuite = {
const cssSuite = {
runTests: css,
- beforeAll: () => appPage.write(appWithGlobalCss),
+ beforeAll: () => appPage.write(appWithGlobalCssAndHead),
afterAll: () => appPage.delete(),
}