Sure. It is like this. I just wonder will the following things help.
- do I need to
yarn add very-common-utils in my nextapp?
- For init the root monorepo directory, use some libraries(eg. Turbo, NX…) I see from some websites. Coz right now I rmb I just did a
npm init
apps/
nextapp/
src/
package.json
tsconfig.ts
next.config.js
packages/
very-common-utils/
src/
package.json
tsconfig.json
package.json
tsconfig.json
Below are the file references in different repo
// in the root monorepo, package.json
{
"name": "mono",
"version": "0.0.1",
"description": "mono",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"workspaces": [
"./apps/*",
"./packages/*"
],
"author": "",
"license": "ISC"
}
// In the `app` folder, which is my next-app, package.json & next-config.js
//package.json
{
"name": "nextapp",
"version": "3.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --write ./src/**/*.{js,ts,jsx,tsx}"
},
"dependencies": {
"@chakra-ui/react": "^2.6.0",
"@ctrl/react-adsense": "^1.7.0",
"@emotion/react": "^11.10.8",
"@emotion/styled": "^11.10.8",
"@firebase/app-compat": "^0.1.19",
"@firebase/app-types": "^0.7.0",
"@fortawesome/fontawesome-svg-core": "^6.1.0",
"@fortawesome/free-brands-svg-icons": "^6.1.0",
"@fortawesome/free-regular-svg-icons": "^6.1.0",
"@fortawesome/free-solid-svg-icons": "^6.1.0",
"@fortawesome/react-fontawesome": "0.1.18",
"@hookform/resolvers": "^2.8.8",
"@popperjs/core": "^2.11.2",
"@restart/hooks": "^0.4.5",
"@restart/ui": "^0.2.5",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.1",
"apexcharts": "3.31.0",
"bootstrap": "^5.1.3",
"classnames": "^2.2.6",
"compressorjs": "^1.2.1",
"create-react-class": "^15.7.0",
"dom-helpers": "^5.2.1",
"firebase": "^9.6.8",
"firebase-admin": "^10.0.2",
"framer-motion": "^10.12.4",
"invariant": "^2.2.4",
"isomorphic-unfetch": "^3.1.0",
"json2mq": "^0.2.0",
"ky": "^0.33.3",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"next": "^13.3.4",
"next-absolute-url": "^1.2.2",
"next-redux-wrapper": "^7.0.5",
"next-themes": "^0.0.15",
"nookies": "^2.5.2",
"nprogress": "^0.2.0",
"prop-types": "^15.8.1",
"quill": "1.3.7",
"react": "^18.2.0",
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.1.0",
"react-datetime": "^3.1.1",
"react-dom": "^18.2.0",
"react-dom-factories": "^1.0.2",
"react-dropzone": "^14.2.3",
"react-feather": "^2.0.9",
"react-hook-form": "^7.27.1",
"react-redux": "^7.2.6",
"react-slick": "^0.28.1",
"react-stickynode": "^4.0.0",
"react-transition-group": "^4.4.2",
"redux": "^4.1.2",
"redux-saga": "^1.1.3",
"resize-observer-polyfill": "^1.5.1",
"sass": "^1.48.0",
"simplebar": "^5.3.6",
"sweetalert2": "^11.3.0",
"sweetalert2-react-content": "^4.2.0",
"uncontrollable": "^7.2.1",
"yup": "^0.32.11",
"zustand": "^4.3.6"
},
"devDependencies": {
"@babel/core": "^7.16.7",
"@redux-devtools/extension": "^3.2.2",
"@svgr/webpack": "^7.0.0",
"@types/create-react-class": "^15.6.3",
"@types/invariant": "^2.2.35",
"@types/lodash": "^4.14.178",
"@types/node": "17.0.8",
"@types/nprogress": "^0.2.0",
"@types/prop-types": "^15.7.4",
"@types/react-dom-factories": "^1.0.2",
"@types/react-slick": "^0.23.8",
"@types/react-stickynode": "^4.0.0",
"@typescript-eslint/eslint-plugin": "^5.59.5",
"@typescript-eslint/parser": "^5.59.5",
"eslint": "^8.40.0",
"eslint-config-next": "12.0.7",
"postcss": "8.4.7",
"postcss-rtlcss": "^3.5.2",
"prettier": "^2.5.1",
"typescript": "4.5.4"
}
}
//next-config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
productionBrowserSourceMaps: false,
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
});
return config;
},
transpilePackages: ["very-common-utils"]
}
module.exports = nextConfig;
// in very-common-utils, package.json
{
"name": "very-common-utils",
"version": "1.0.0",
"private": true,
"main": "src/index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
