feat: Add example of transpiling nextjs dependencies

Author: NiGhTTraX

packages/components/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "components",
+  "main": "dist/index",
+  "peerDependencies": {
+    "react": "~16.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "~16.9.43"
+  }
+}

packages/components/src/button.tsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const Button = () => <button onClick={() => alert('you clicked me')}>Click me</button>;

packages/components/src/index.tsx

@@ -0,0 +1 @@
+export * from "./button";

packages/components/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true
+  }
+}

packages/nextjs/next.config.js

@@ -0,0 +1,3 @@
+const withTM = require('next-transpile-modules')(['components']);
+
+module.exports = withTM();

packages/nextjs/package.json

@@ -12,5 +12,8 @@
     "react": "~16.13.1",
     "react-dom": "~16.13.1",
     "typescript": "~3.9.6"
+  },
+  "devDependencies": {
+    "next-transpile-modules": "~3.3.0"
   }
 }

packages/nextjs/pages/index.tsx

@@ -1,4 +1,8 @@
 import React from "react";
 import {meaningOfLife} from "foo";
+import {Button} from "components";
 
-export default () => <div>Meaning of life is {meaningOfLife}</div>;
+export default () => <div>
+  <p>Meaning of life is {meaningOfLife}</p>
+  <Button/>
+</div>;

packages/nextjs/tsconfig.json

@@ -8,7 +8,8 @@
     ],
     "baseUrl": "../",
     "paths": {
-      "foo": ["foo/src"]
+      "foo": ["foo/src"],
+      "components": ["components/src"]
     },
     "allowJs": true,
     "skipLibCheck": true,