Config file for shared component library in a Turborepo

Question

I'm working on converting my Next.js app to a Turborepo monorepo setup and splitting the apps concerns into their own Next apps; within that, I have a shared component library that I'll use across applications, and within that a Head component.

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>
    </>
  );
};

Right now I have this package @vero/config that just exports values for the component:

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

This gets the job done for now and gives me a global config for the SEO; however, as we end up creating more apps we could have a need for different SEO properties for each; what I'd like to do is get the config from a file that sits in the root of each Next.js application inside the monorepo; something like site.config.js , that then has a default fallback if the config file isn't present. How could I accomplish this?

Answer 1

Ended up finding this library:

next-seo

It allows for global SEO properties that can be overwritten on a page-by-page basis. No need to reinvent the wheel; going with this in my projects.