The one with decorators

Next/.babelrc

@@ -0,0 +1,17 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+                "legacy": true
+            }
+        ],
+        [
+            "@babel/plugin-proposal-class-properties",
+            {
+                "loose": false
+            }
+        ]
+    ]
+}

Next/package.json

@@ -12,11 +12,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "mobx": "^6.1.8",
+    "mobx-react": "^7.1.0",
     "next": "^10.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
     "@types/node": "^14.14.35",
     "@types/react": "^17.0.3",
     "typescript": "^4.2.3"

Next/pages/index.tsx

@@ -1,6 +1,24 @@
-function Index() {
+import { makeObservable, observable, action } from 'mobx';
-    return (
+import { observer } from 'mobx-react';
-        <p>Hello World</p>
+import React from 'react';
-    );
+
+@observer class Index extends React.Component {
+    @observable x: number = 0;
+
+    constructor(props) {
+        super(props);
+    }
+
+    @action
+    clickMe() {
+        this.x += 1;
+    }
+
+    render() {
+        return (
+            <button onClick={this.clickMe.bind(this)}>{this.x}</button>
+        );
+    }
 }
+
 export default Index;

Next/tsconfig.json

@@ -23,7 +23,8 @@
       "resolveJsonModule": true,
       "isolatedModules": true,
       "jsx": "preserve",
-      "esModuleInterop": true
+      "esModuleInterop": true,
+      "experimentalDecorators": true
   },
   "include": [
       "next-env.d.ts",

package.json

@@ -0,0 +1,5 @@
+{
+	"devDependencies": {
+		"tslib": "^2.1.0"
+	}
+}

pnpm-lock.yaml

@@ -0,0 +1,10 @@
+devDependencies:
+  tslib: 2.1.0
+lockfileVersion: 5.2
+packages:
+  /tslib/2.1.0:
+    dev: true
+    resolution:
+      integrity: sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+specifiers:
+  tslib: ^2.1.0