Turborepo 中共享组件库的配置文件

Question

我正在努力将我的 Next.js 应用程序转换为 Turborepo monorepo 设置，并将应用程序问题拆分到它们自己的 Next 应用程序中；其中，我有一个共享组件库，我将在应用程序中使用它，并且在其中有一个 Head 组件。

Head.tsx

import { config } from '@vero/config';
import NextHead from 'next/head';
import { useRouter } from 'next/router';

interface SEOProps {
  title: string;
  description?: string;
  banner?: string;
  canonical?: string;
}

export const Head = ({ title, description }: SEOProps) => {
  const { asPath } = useRouter();
  const { siteUrl, siteTitle, favicon, metaDescription } = config;

  const seo = {
    title: title || siteTitle,
    url: `${siteUrl}${asPath || ''}`,
    description: description || metaDescription,
  };

  return (
    <>
      <NextHead>
        <title>{`${title} - ${siteTitle}`}</title>
        <link rel="shortcut icon" href={favicon} />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content={seo.description}></meta>
        <meta property="og:type" content="website" />
        <meta property="og:title" content={seo.title} />
        <meta property="og:description" content={seo.description} />
        <meta property="og:site_name" content={seo.title} />
        <meta property="twitter:card" content="summary" />
        <meta property="twitter:title" content={seo.title} />
        <meta property="twitter:description" content={seo.description} />
      </NextHead>
    </>
  );
};

现在我有这个包 @vero/config 只导出组件的值：

export const config = {
  siteTitle: 'VeroSkills',
  siteUrl: process.env.ROOT_URL,
  metaDescription: '',
  favicon: '',
  siteLanguage: 'en',
  author: 'VeroSkills',
  themeColor: '#2e3046',
  twitter: '',
  facebook: '',
};

这暂时完成了工作，并为我提供了 SEO 的全局配置；然而，随着我们最终创建更多的应用程序，我们可能需要为每个应用程序提供不同的 SEO 属性；我想做的是从位于 monorepo 中每个 Next.js 应用程序的根目录中的文件获取配置；类似于 site.config.js，如果配置文件不存在，则有一个默认的回退。我怎样才能做到这一点？

Answer 1

最终找到了这个图书馆：

next-seo

它允许可以在 page-by-page 基础上覆盖的全局 SEO 属性。无需重新发明轮子；在我的项目中使用它。

Turborepo 中共享组件库的配置文件

Config file for shared component library in a Turborepo

reactjs

monorepo

next.js

turborepo