How do I create a component in "packages/ui" that uses "next" package?

[valentin-harrang]

Hi everyone 👋

I've just used TurboRepo for the first time, so I'm creating my components in the packages/ui folder provided for this purpose and I'd also like to use Next.js components in my components (e.g. import Link from "next/link").

Do I need to install the next package in the packages/ui folder?
I've tried this but ESLint isn't happy because I get this error:

'next' should be listed in the project's dependencies. Run 'npm i -S next' to add iteslintimport/no-extraneous-dependencies

package.json:

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./index.tsx",
  "types": "./index.tsx",
  "license": "MIT",
  "scripts": {
    "lint": "eslint .",
    "generate:component": "turbo gen react-component"
  },
  "dependencies": {
    "next": "^13.4.19"
  },
  "devDependencies": {
    "@turbo/gen": "^1.10.12",
    "@types/node": "^20.5.2",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "eslint-config-custom": "workspace:*",
    "react": "^18.2.0",
    "tailwind-config": "workspace:*",
    "tsconfig": "workspace:*",
    "typescript": "^4.5.2"
  }
}

What's de best way to do that?

Thank you!

[anthonyshew]

You don't want to install next into your ui package's dependencies directly. Rather, you have two options:

1. You can design your component so that it expects a linkComponent prop and use it so that linking works correctly for your framework.

2. Use peerDependencies to make the dependency available from consumers: https://nodejs.org/en/blog/npm/peer-dependencies

[desiboli]

Hi @anthonyshew, I found your example here in your website: https://www.shew.dev/monorepos/tools/nextjs#using-framework-specific-components-in-your-ui-package, @valentin-harrang you could have a look there!

@anthonyshew I have a question regarding next/font... is it possible to share "next/font" fonts from a package to multiple next.js apps ? How would that approach look like ?

Thank you! 🙏

[anthonyshew]

You won't want to install next into separate packages (at least not today). That would, of course, block the approach you've described.

[htakemoto]

To make packages/ui Framework-agnostic, our team decided to go with NavigationProvider approach.
Reference: https://bit.dev/blog/composable-link-component-that-works-in-any-react-meta-framework-l7i3qgmw/