在MonorePo

Question

import Link from 'next/link'

typescript反应，因为它看不到共享组件包中的包装（它没有node_modules）。我使用PNPM，因此大多数外部NPM软件包仅可见使用它们的软件包，它们不会悬挂在monorepo的根上。

有一个很好的解决方案，告诉Typescript不要在这些错误上丢失错误，将它们视为同行？

您可以利用tsconfigs.ts

next/link

Configuration

解决您的问题。

通过添加这样的选项，Typescript将能够正确解决导入。

paths

Answer 1

I通过为Eslint-Config和Typescript-Config软件包中的内部下一个库创建新的配置文件来解决此问题，我将其添加到UI-Next软件包中，该软件包基本上包含了下一个组件的组件包装器（即链接和按钮链接以将下一个链接包装在我的UI awark axpect of My UI套件中）。

在paths中创建

{
  "compilerOptions": {
    "paths": {
      "next/link": ["packages/next-link/index.ts"] // should match the location of your package
    }
  }
}

：

next-internal.js

在

packages/eslint-config

Answer 2

import js from "@eslint/js";
import pluginNext from "@next/eslint-plugin-next";
import eslintConfigPrettier from "eslint-config-prettier";
import pluginReact from "eslint-plugin-react";
import pluginReactHooks from "eslint-plugin-react-hooks";
import globals from "globals";
import tseslint from "typescript-eslint";

import { config as baseConfig } from "./base.js";

/**
 * A custom ESLint configuration for libraries that use Next.js.
 *
 * @type {import("eslint").Linter.Config}
 */
export const config = [
  ...baseConfig,
  js.configs.recommended,
  eslintConfigPrettier,
  ...tseslint.configs.recommended,
  {
    ...pluginReact.configs.flat.recommended,
    languageOptions: {
      ...pluginReact.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
      },
    },
  },
  {
    plugins: {
      "@next/next": pluginNext,
    },
    rules: {
      // Include only Next.js rules that make sense for internal libraries
      "@next/next/no-html-link-for-pages": "off", // No access to pages directory
      "@next/next/no-img-element": "warn", // Warn but don't error on <img>
      "@next/next/no-head-element": "error", // Use Next.js Head component
      "@next/next/google-font-display": "error", // Ensure proper font loading
      "@next/next/google-font-preconnect": "error", // Ensure proper font loading
      "@next/next/inline-script-id": "error", // Ensure script tags have IDs
      "@next/next/no-title-in-document-head": "error", // Use page-level titles
      "@next/next/no-typos": "error", // Catch common Next.js API typos
      "@next/next/no-unwanted-polyfillio": "error", // Prevent duplicate polyfills
    },
  },
  {
    plugins: {
      "react-hooks": pluginReactHooks,
    },
    settings: { react: { version: "detect" } },
    rules: {
      ...pluginReactHooks.configs.recommended.rules,
      "react/react-in-jsx-scope": "off",
      "react/prop-types": "off",
      // Additional React rules for internal libraries
      "react/no-unknown-property": ["error", { ignore: ["css"] }], // Allow css prop
      "react/jsx-no-leaked-render": "error", // Prevent common SSR issues
      "react/jsx-no-useless-fragment": "warn", // Keep bundle size small
      "react/jsx-handler-names": [
        "warn",
        {
          // Consistent event handler naming
          eventHandlerPrefix: "handle",
          eventHandlerPropPrefix: "on",
        },
      ],
    },
  },
];

：

next-library.json

，然后在您共享的下一个软件包（我命名为

packages/typescript-config

）中，将您的

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Next.js Library",
  "extends": "./base.json",
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "emitDeclarationOnly": true,
    "types": ["react", "react-dom", "next"]
  }
}

更新为：

ui-next

并将您的

tsconfig.json

更新为：

{
  "extends": "@workspace/typescript-config/next-library.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@workspace/ui/*": ["../ui/src/*"],
      "@workspace/ui-next/*": ["./src/*"]
    }
  },
  "include": ["."],
  "exclude": ["node_modules", "dist"]
}

然后，您可以将下一个安装，React和其他依赖关系作为DEV依赖项（用于访问类型）。只要您接下来列出同行依赖性，您的应用程序就应该处理接下来的捆绑并反应依赖项。

eslint.config.js

以此，您应该能够创建在下一个应用中使用的通用配置和组件。例如，像常见的下一个配置：

import { nextJsConfig } from "@workspace/eslint-config/next-internal";

/** @type {import("eslint").Linter.Config} */
export default nextJsConfig;

使用一个主题提供商

  ...
  "devDependencies": {
    "@types/node": "catalog:",
    "@types/react": "catalog:",
    "@types/react-dom": "catalog:",
    "@workspace/ui": "workspace:*",
    "@workspace/eslint-config": "workspace:*",
    "@workspace/typescript-config": "workspace:*",
    "next": "catalog:",
    "next-themes": "catalog:",
    "typescript": "catalog:"
  },
  "peerDependencies": {
    "next": "catalog:",
    "react": "catalog:",
    "react-dom": "catalog:"
  },
  ...

如果需要的话：

/** @type {import('next').NextConfig} */
const config = {
  transpilePackages: ["@workspace/ui", "@workspace/ui-next"],
};

export default config;

或字体您希望您的应用程序共享（您还可以在UI软件包内添加到尾风）：

next-themes

您还可以使用下一个API生成图像和图标的常见元数据配置和utils-只要您在应用中使用相同的图像公共路径，它就应该有效。