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

Question

我正致力于将我的Next.js应用程序转换为Turborepo安装程序，并将这些应用程序分解为自己的下一个应用程序；在这个应用程序库中，我将跨应用程序使用一个共享组件库，并在其中使用一个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

它允许全局SEO属性可以在逐页的基础上被覆盖.没有必要重新发明轮子，在我的项目中这样做。