Using Monorepo for common functions and a nextJS project

I am using monorepo which has an apps & packages folder. In the packages, there are some common functions that I used for my nextJS frontend website in the apps folder. When I am in local dev, I try to run the build command without issues but when in netlify, it said that the package I am importing cannot be found.

Below are the captured screen for my deploy settings and also error msg

Your latest builds seem to throw completely different errors than what you’re asking about. Has something changed?

Oh yes. I was doing some testings previously(eg. set the base path to empty and directly pointing the .next path in publish). I have changed it back and the error should be the same as I posted above.

Could you share the file-structure of your repo?

Sure. It is like this. I just wonder will the following things help.

  1. do I need to yarn add very-common-utils in my nextapp?
  2. 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"
}

I have successfully built the project using the following settings but after I went to the link. It throws me a 404 error

//Deploy settings

Runtime: Not set
Base directory: Not set
Build command: yarn && cd apps/party-hub-admin-panel && yarn && yarn build
Publish directory: apps/party-hub-admin-panel/.next
Build status: Active

What do you think about the problems in my build commands?

Sorry for the delay. Since you’ve managed to solve the building issue the only remaining step is to add the Next.js Runtime to your project: GitHub - netlify/next-runtime: The Next.js Runtime allows Next.js to run on Netlify with zero configuration that would solve the 404 issue.

Thank u. It is working now but do you think it is a good idea to build the project from the top level in a monorepo? I wonder if it is possible to run into the related project and build.

Hi, this depends… building a project from the top level in a monorepo can be beneficial depending on your project. I’d consider your project’s size, complexity, interdependencies, and scalability needs.