diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..1aa7e8002
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    "@emotion/babel-plugin"
+  ]
+}
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index de742bff9..000000000
--- a/babel.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Babel configuration for Next.js
- *
- * @see https://nextjs.org/docs/advanced-features/customizing-babel-config Official doc reference v10
- * @see https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts You can take a look at this file to learn about the presets included by next/babel.
- * @see https://emotion.sh/docs/css-prop##babel-preset Configuring Emotion 11
- * @example https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config Next.js official example of customizing Babel
- */
-module.exports = {
-  presets: [
-    [
-      "next/babel",
-      {
-        "preset-react": {
-          "runtime": "automatic",
-          "importSource": "@emotion/react"
-        }
-      }
-    ]
-  ],
-  plugins: ["@emotion/babel-plugin"],
-};