Fix emotion-js transform for server components (#54284)

### What & Why

emotion-js has its own [jsx transform](https://emotion.sh/docs/typescript#emotionreact) which is being applied when `compiler.emotion` is enabled in `next.config.js`.

Thanks to emotion-js team that provided an emotion-js example setup with app router [here](emotion-js/emotion#2928 (comment)), so that we can use it as test example with app router. Based on the setup, we create a test case working with emotion js but failed with error mentioned in #41994 that some client hooks appearing in server components. That is because the emotion-js jsx factory includes some client hooks.

### How

For server components, css-in-js is not recommended to apply so we disabled the transform before, the emotion jsx factory is a separate config that should also not be applied in server components. So in this case we still use react jsx factory instead of the emotion-js one for server components then it won't error. The test case can also be used as an example for basic emotion-js use case with app router.


Fixes #41994
Closes NEXT-1368

package.json

@@ -66,6 +66,8 @@
     "@babel/preset-flow": "7.14.5",
     "@babel/preset-react": "7.14.5",
     "@edge-runtime/jest-environment": "2.2.5",
+    "@emotion/cache": "11.11.0",
+    "@emotion/react": "11.11.1",
     "@fullhuman/postcss-purgecss": "1.3.0",
     "@mdx-js/loader": "2.2.1",
     "@mdx-js/react": "2.2.1",

packages/next/src/build/swc/options.ts

@@ -105,7 +105,9 @@ function getBaseSWCOptions({
         react: {
           importSource:
             jsConfig?.compilerOptions?.jsxImportSource ??
-            (compilerOptions?.emotion ? '@emotion/react' : 'react'),
+            (compilerOptions?.emotion && !isServerLayer
+              ? '@emotion/react'
+              : 'react'),
           runtime: 'automatic',
           pragma: 'React.createElement',
           pragmaFrag: 'React.Fragment',