├── .gitignore
├── packages
    ├── shared
    │   ├── src
    │   │   ├── index.tsx
    │   │   └── components
    │   │   │   └── atoms
    │   │   │       └── Button
    │   │   │           └── index.tsx
    │   ├── custom.d.ts
    │   ├── tsconfig.json
    │   └── package.json
    ├── admin
    │   ├── next-env.d.ts
    │   ├── next.config.js
    │   ├── src
    │   │   └── pages
    │   │   │   ├── _app.tsx
    │   │   │   ├── index.tsx
    │   │   │   └── next-page.tsx
    │   ├── package.json
    │   └── tsconfig.json
    └── users
    │   ├── next-env.d.ts
    │   ├── next.config.js
    │   ├── src
    │       └── pages
    │       │   ├── _app.tsx
    │       │   ├── index.tsx
    │       │   └── next-page.tsx
    │   ├── package.json
    │   └── tsconfig.json
├── lerna.json
├── README.md
├── tsconfig.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | 


--------------------------------------------------------------------------------
/packages/shared/src/index.tsx:
--------------------------------------------------------------------------------
1 | export {Button} from "./components/atoms/Button"


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 |   "packages": [
3 |     "packages/*"
4 |   ],
5 |   "version": "0.0.0"
6 | }
7 | 


--------------------------------------------------------------------------------
/packages/admin/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


--------------------------------------------------------------------------------
/packages/users/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


--------------------------------------------------------------------------------
/packages/admin/next.config.js:
--------------------------------------------------------------------------------
1 | const withTM = require("next-transpile-modules")(["shared"]);
2 | 
3 | module.exports = withTM()


--------------------------------------------------------------------------------
/packages/users/next.config.js:
--------------------------------------------------------------------------------
1 | const withTM = require("next-transpile-modules")(["shared"]);
2 | 
3 | module.exports = withTM();


--------------------------------------------------------------------------------
/packages/shared/custom.d.ts:
--------------------------------------------------------------------------------
1 | import 'react';
2 | 
3 | declare module 'react' {
4 |   interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
5 |     jsx?: boolean;
6 |     global?: boolean;
7 |   }
8 | }


--------------------------------------------------------------------------------
/packages/shared/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |     "extends": "../../tsconfig.json",
3 |     "compilerOptions": {
4 |       "noEmit": true,
5 |       "allowSyntheticDefaultImports": true,
6 |       "jsx": "preserve",
7 |     }
8 |   }


--------------------------------------------------------------------------------
/packages/admin/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { AppProps } from "next/app";
 3 | 
 4 | const App = ({ Component, pageProps }: AppProps) => {
 5 |     return (
 6 |         <Component {...pageProps} />
 7 |     )
 8 | }
 9 | 
10 | export default App;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### Monorepo with next.js and Lerna
2 | 
3 | ### Installation
4 | - `yarn bootstrap` to install all dependencies and initialize lerna repository
5 | 
6 | ### Run the project
7 | - `yarn start` start all the projects inside monorepo (localhost:3001 for admin and localhost:3002 for user)
8 | 


--------------------------------------------------------------------------------
/packages/users/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Router from 'next/router';
 3 | import { AppProps } from "next/app";
 4 | 
 5 | const App = ({ Component, pageProps }: AppProps) => {
 6 |     return (
 7 |         <Component {...pageProps} />
 8 |     )
 9 | }
10 | 
11 | export default App;


--------------------------------------------------------------------------------
/packages/shared/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shared",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "src/index.tsx",
 6 |   "scripts": {
 7 |     "start": "BROWSER=none react-scripts start",
 8 |     "test": "react-scripts test",
 9 |     "eject": "react-scripts eject"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "ISC"
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/admin/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "admin",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "next -p 3001",
 8 |     "build": "next build",
 9 |     "start": "next start -p 3001"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "ISC",
14 |   "dependencies": {
15 |     "shared": "^1.0.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/users/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "users",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "next -p 3002",
 8 |     "build": "next build",
 9 |     "start": "next start -p 3002"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "ISC",
14 |   "dependencies": {
15 |     "shared": "^1.0.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/admin/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve"
20 |   },
21 |   "exclude": [
22 |     "node_modules"
23 |   ],
24 |   "include": [
25 |     "next-env.d.ts",
26 |     "**/*.ts",
27 |     "**/*.tsx"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/packages/users/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve"
20 |   },
21 |   "exclude": [
22 |     "node_modules"
23 |   ],
24 |   "include": [
25 |     "next-env.d.ts",
26 |     "**/*.ts",
27 |     "**/*.tsx"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |       "target": "es5",
 4 |       "lib": [
 5 |         "dom",
 6 |         "dom.iterable",
 7 |         "esnext"
 8 |       ],
 9 |       "allowJs": true,
10 |       "skipLibCheck": true,
11 |       "strict": false,
12 |       "forceConsistentCasingInFileNames": true,
13 |       "noEmit": true,
14 |       "esModuleInterop": true,
15 |       "module": "esnext",
16 |       "moduleResolution": "node",
17 |       "resolveJsonModule": true,
18 |       "isolatedModules": true,
19 |       "jsx": "preserve"
20 |     },
21 |     "exclude": [
22 |       "node_modules"
23 |     ],
24 |     "include": [
25 |       "next-env.d.ts",
26 |       "**/*.ts",
27 |       "**/*.tsx"
28 |     ]
29 |   }
30 |   


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-mono-repo",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "license": "MIT",
 6 |   "main": "index.js",
 7 |   "scripts": {
 8 |     "bootstrap": "npm install; lerna bootstrap;",
 9 |     "package:admin": "lerna run --scope admin --stream dev",
10 |     "package:users": "lerna run --scope users --stream dev",
11 |     "start": "run-p --print-label package:*",
12 |     "build": "lerna run --parallel build"
13 |   },
14 |   "devDependencies": {
15 |     "@types/node": "^14.0.23",
16 |     "lerna": "^3.22.1",
17 |     "npm-run-all": "^4.1.5",
18 |     "typescript": "^3.9.7"
19 |   },
20 |   "dependencies": {
21 |     "@types/next": "^9.0.0",
22 |     "@types/react": "^16.9.43",
23 |     "@zeit/next-typescript": "^1.1.1",
24 |     "next": "^9.4.4",
25 |     "next-transpile-modules": "^3.3.0",
26 |     "react": "^16.13.1",
27 |     "react-dom": "^16.13.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/packages/users/src/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from 'shared';
 3 | import Router from 'next/router';
 4 | 
 5 | const Index = () => {
 6 | 
 7 |     const handleClick = () => {
 8 |         Router.push("/next-page")
 9 |     }
10 |     return (
11 |         <div className="titleWrapper">
12 |             <div className="textStyle">
13 |                 Welcome to Users
14 |             </div>
15 |             <Button onClick={handleClick} buttonType="next">
16 |                 Next page
17 |             </Button>
18 |             <style jsx>
19 |                 {`
20 |                     .titleWrapper {
21 |                         display: flex;
22 |                         flex-direction: column;
23 |                         text-align: center;
24 |                         margin-top: 200px;
25 |                     }
26 |                     .textStyle {
27 |                         font-size: 50px;
28 |                     }
29 |                 `}
30 |             </style>
31 |         </div>
32 |     )
33 | }
34 | 
35 | export default Index;


--------------------------------------------------------------------------------
/packages/admin/src/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from 'shared';
 3 | import Router from "next/router";
 4 | 
 5 | const Index = () => {
 6 | 
 7 |     const handleClick = () => {
 8 |         Router.push("/next-page")
 9 |     }
10 |     return (
11 |         <div className="titleWrapper">
12 |             <div className="textStyle">
13 |                 Welcome to Admin
14 |             </div>
15 | 
16 |             <Button onClick={handleClick} buttonType="next">
17 |                 Next page
18 |             </Button>
19 |             <style jsx>
20 |                 {`
21 |                     .titleWrapper {
22 |                         display: flex;
23 |                         flex-direction: column;
24 |                         text-align: center;
25 |                         margin-top: 200px;
26 |                     }
27 |                     .textStyle {
28 |                         font-size: 50px;
29 |                     }
30 |                 `}
31 |             </style>
32 |         </div>
33 |     )
34 | }
35 | 
36 | export default Index;


--------------------------------------------------------------------------------
/packages/admin/src/pages/next-page.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button } from "shared";
 3 | import Router from "next/router";
 4 | 
 5 | const NextPage = () => {
 6 | 
 7 |     const handleClick = () => {
 8 |         Router.push("/")
 9 |     }
10 |     return (
11 |         <div className="titleWrapper">
12 |             <div className="textStyle">
13 |                 This is Admin Next Page.
14 |             </div>
15 |             <Button onClick={handleClick} buttonType="prev">
16 |                 Home Page
17 |             </Button>
18 |             <style jsx>
19 |                 {`
20 |                     .titleWrapper {
21 |                         display: flex;
22 |                         flex-direction: column;
23 |                         text-align: center;
24 |                         margin-top: 200px;
25 |                     }
26 |                     .textStyle {
27 |                         font-size: 50px;
28 |                     }
29 |                 `}
30 |             </style>
31 |         </div>
32 |     )
33 | }
34 | 
35 | export default NextPage;


--------------------------------------------------------------------------------
/packages/users/src/pages/next-page.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button } from "shared";
 3 | import Router from "next/router";
 4 | 
 5 | const NextPage = () => {
 6 | 
 7 |     const handleClick = () => {
 8 |         Router.push("/")
 9 |     }
10 |     return (
11 |         <div className="titleWrapper">
12 |             <div className="textStyle">
13 |              This is Users Next Page.
14 |             </div>
15 |             <Button onClick={handleClick} buttonType="prev">
16 |                 Home Page
17 |             </Button>
18 |             <style jsx>
19 |                 {`
20 |                     .titleWrapper {
21 |                         display: flex;
22 |                         flex-direction: column;
23 |                         text-align: center;
24 |                         margin-top: 200px;
25 |                     }
26 |                     .textStyle {
27 |                         font-size: 50px;
28 |                     }
29 |                 `}
30 |             </style>
31 |         </div>
32 |     )
33 | }
34 | 
35 | export default NextPage;


--------------------------------------------------------------------------------
/packages/shared/src/components/atoms/Button/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | type ButtonType = "primary" | "default";
 4 | 
 5 | export interface ButtonProps {
 6 |     className?: any;
 7 |     disabled?: boolean;
 8 |     loading?: boolean;
 9 |     size?: "small" | "middle" | "large";
10 |     id?: string;
11 |     buttonType?: string;
12 |     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
13 | }
14 | 
15 | export const Button: React.FC<ButtonProps> = ({
16 |     className,
17 |     id,
18 |     onClick,
19 |     buttonType,
20 |     ...props
21 | }) => {
22 |     return (
23 |         <>
24 |             <div className="buttonWrapper">
25 |                 <button
26 |                     className={`${className} ${"button"}`}
27 |                     id={id}
28 |                     {...props}
29 |                     onClick={onClick}
30 |                 >
31 |                     {props.children}
32 |                 </button>
33 |             </div>
34 |             <style jsx>
35 |                 {`
36 |                 .buttonWrapper {
37 |                     padding: 10px;
38 |                 }
39 |                 .button {
40 |                     padding: 20px;
41 |                     background:  ${buttonType === "next" ? `#32a852` : `#33598f`};
42 |                     color: #ffffff;
43 |                     border: 1px solid #ffffff;
44 |                     border-radius: 15px;
45 |                     cursor: pointer;
46 |                     font-size: 20px;
47 |                 }
48 |                 `}
49 |             </style>
50 |         </>
51 |     )
52 | }
53 | 
54 | 


--------------------------------------------------------------------------------