diff --git a/packages/docs/src/pages/guides/jsx-pragma.mdx b/packages/docs/src/pages/guides/jsx-pragma.mdx
index b86167360..85f37af6f 100644
--- a/packages/docs/src/pages/guides/jsx-pragma.mdx
+++ b/packages/docs/src/pages/guides/jsx-pragma.mdx
@@ -147,6 +147,8 @@ NOTE: this requires
 
 ### Using next.js
 
+#### With Babel
+
 ```js
 // babel.config.js
 module.exports = {
@@ -168,3 +170,15 @@ module.exports = {
 
 You can read more about
 [customizing Babel config in Next.js docs](https://nextjs.org/docs/advanced-features/customizing-babel-config).
+
+#### With SWC
+
+In `jsconfig.json` or `tsconfig.json` (since Next.js 12.0.4):
+
+```json
+{
+  "compilerOptions": {
+    "jsxImportSource": "theme-ui"
+  }
+}
+```