reactjs - Next.js 的服务器端组件

Question

我正在开发一个供 Next.js 应用程序使用的开源包。其中一个组件是 Link 的替代品.在我的包中，API 使用 exports 公开在 package.json ， 像这样:

"exports": {
    "./link": "./lib/link/index.js",
    "./link-ssr": "./lib/link/ssr.js"
  }

因为需要服务端渲染，所以我有两个版本的 Link组件，一个用于客户端，另一个用于 SSR。我能够让 SSR 工作的方法是在 next.config.js 中使用这个特殊的 Webpack 配置(在使用我的包的应用程序上)。 :

  webpack(config, { isServer }) {
    if (isServer) {
      config.resolve.alias['my-package/link'] = require.resolve(
        'my-package/link-ssr'
      );
    });

因为 link-ssr仅在内部使用，我试图找到一种避免暴露其 API 的方法。我想到的一种方法是使用条件 isServer客户端内部的变量 link成分:

const isServer = typeof window === 'undefined'

if (isServer) {
  // Do server stuff
} else {
  // Do client stuff
}

服务器组件依赖于 fs (文件服务器)，当我这样做时，在尝试访问使用该组件的页面时出现 Next.js 编译错误:

event - compiled successfully
event - build page: /
wait  - compiling...
error - ../lib/Links.js:5:0
Module not found: Can't resolve 'fs'
  3 | exports.Links = void 0;
  4 | const path_1 = require("path");
> 5 | const fs_1 = require("fs");
  6 | /** Local rewrite cache to avoid non-required file system operations. */
  7 | let linksCache;
  8 | /**

这甚至可行还是有其他方法可以避免暴露 link-ssr作为公共(public)组件？

Answer 1

您可以尝试使用环境变量。不需要额外的依赖。
为此，在您的根目录中创建一个 .env.production 并在其中放置一个变量:

IS_SERVER=true

然后在您的源代码中，您可以使用此 ENV 变量来检查您是否在服务器上:

export async function getStaticProps() {
  isServer = process.env.IS_SERVER;
}