diff --git a/packages/docs/src/pages/guides/jsx-pragma.mdx b/packages/docs/src/pages/guides/jsx-pragma.mdx
index 85f37af6f..07d9657ad 100644
--- a/packages/docs/src/pages/guides/jsx-pragma.mdx
+++ b/packages/docs/src/pages/guides/jsx-pragma.mdx
@@ -145,12 +145,11 @@ typecheck), or for instance to run tests with `ts-jest`
 NOTE: this requires
 [TypeScript >= 4.1](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#react-17-jsx-factories)
 
-### Using next.js
+### Using Next.js
 
 #### With Babel
 
-```js
-// babel.config.js
+```js filename=babel.config.js
 module.exports = {
   presets: [
     [
@@ -173,12 +172,17 @@ You can read more about
 
 #### With SWC
 
+Next.js is [gradually migrating to SWC](https://nextjs.org/docs/advanced-features/compiler#why-swc),
+and recommends using it for all new projects.
+
 In `jsconfig.json` or `tsconfig.json` (since Next.js 12.0.4):
 
 ```json
 {
   "compilerOptions": {
-    "jsxImportSource": "theme-ui"
+    "jsx": "preserve",
+    "jsxImportSource": "theme-ui" // or "@theme-ui/core"
+    // ... the rest of your compilerOptions redacted for brevity
   }
 }
 ```