Lobechat と Shadcn/ui のメタデータ構成の比較

この記事では、Lobechat と Shadcn/ui でメタデータがどのように設定されるかを学びます。この比較は、メタデータを構成する 2 つの方法を示しています。ここでの主な違いは、Shadcn/ui が UI コンポーネント プロバイダーであることです。バックエンドに対して行われた API 呼び出しは見られず、関連するデータベースも見つかりません。一方、Lobechat は私たちのチームのお気に入りで、非常に複雑で、データベースを備えた大規模なプロジェクトであり、tRPC を使用して API 呼び出しを行います。

コンテキストに応じてメタデータを構成するためにファイルとフォルダーがどのように使用されるかがわかります。これについては、この記事の後半で詳しく説明します。

Next.js レイアウトまたはページでメタデータを定義するには 2 つの方法があります

1. 構成ベースのメタデータ: 静的メタデータ オブジェクトまたは動的generateMetadata関数をlayout.jsまたはpage.jsファイルにエクスポートします。

2. ファイルベースのメタデータ: 静的または動的に生成された特殊ファイルをルート セグメントに追加します。

詳細についてはこちらをご覧ください:

- 静的メタデータ

- 動的メタデータ

- ファイルベースのメタデータ

ドキュメントからのこの情報を使用して、Shadcn/ui と Lobechat がどちらの方法を選択したかを確認します。

Shadcn/ui メタデータ構成

Shadcn/ui ソース コードの www/app/layout.tsx では、メタデータは次のように定義されています。

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s - ${siteConfig.name}`,
  },
  metadataBase: new URL(siteConfig.url),
  description: siteConfig.description,
  keywords: [
    "Next.js",
    "React",
    "Tailwind CSS",
    "Server Components",
    "Radix UI",
  ],
  authors: [
    {
      name: "shadcn",
      url: "https://shadcn.com",
    },
  ],
  creator: "shadcn",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: siteConfig.url,
    title: siteConfig.name,
    description: siteConfig.description,
    siteName: siteConfig.name,
    images: [
      {
        url: siteConfig.ogImage,
        width: 1200,
        height: 630,
        alt: siteConfig.name,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: siteConfig.name,
    description: siteConfig.description,
    images: [siteConfig.ogImage],
    creator: "@shadcn",
  },
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon-16x16.png",
    apple: "/apple-touch-icon.png",
  },
  manifest: `${siteConfig.url}/site.webmanifest`,
}

これが意味するのは、Shadcn/ui は静的メタデータを使用するということです。 SiteConfig は以下のようにインポートされます:

import { META_THEME_COLORS, siteConfig } from "@/config/site"

Lobechat メタデータ構成

Lobechat/src/app/layout.tsx に次のコードがあります:

export { generateMetadata } from './metadata';

ここでの

generateMetadata は、Lobechat が動的メタデータを使用することを意味します。以下は、Lobechat メタデータ ファイルから抽出されたコードです。

import { Metadata } from 'next';

import { appEnv } from '@/config/app';
import { BRANDING_LOGO_URL, BRANDING_NAME, ORG_NAME } from '@/const/branding';
import { OFFICIAL_URL, OG_URL } from '@/const/url';
import { isCustomBranding, isCustomORG } from '@/const/version';
import { translation } from '@/server/translation';

const BASE_PATH = appEnv.NEXT_PUBLIC_BASE_PATH;

// if there is a base path, then we don't need the manifest
const noManifest = !!BASE_PATH;

export const generateMetadata = async (): Promise<Metadata> => {
  const { t } = await translation('metadata');

  return {
    alternates: {
      canonical: OFFICIAL_URL,
    },
    appleWebApp: {
      statusBarStyle: 'black-translucent',
      title: BRANDING_NAME,
    },
    description: t('chat.description', { appName: BRANDING_NAME }),
    icons: isCustomBranding
      ? BRANDING_LOGO_URL
      : {
          apple: '/apple-touch-icon.png?v=1',
          icon: '/favicon.ico?v=1',
          shortcut: '/favicon-32x32.ico?v=1',
        },
    manifest: noManifest ? undefined : '/manifest.json',
    metadataBase: new URL(OFFICIAL_URL),
    openGraph: {
      description: t('chat.description', { appName: BRANDING_NAME }),
      images: [
        {
          alt: t('chat.title', { appName: BRANDING_NAME }),
          height: 640,
          url: OG_URL,
          width: 1200,
        },
      ],
      locale: 'en-US',
      siteName: BRANDING_NAME,
      title: BRANDING_NAME,
      type: 'website',
      url: OFFICIAL_URL,
    },
    title: {
      default: t('chat.title', { appName: BRANDING_NAME }),
      template: `%s · ${BRANDING_NAME}`,
    },
    twitter: {
      card: 'summary_large_image',
      description: t('chat.description', { appName: BRANDING_NAME }),
      images: [OG_URL],
      site: isCustomORG ? `@${ORG_NAME}` : '@lobehub',
      title: t('chat.title', { appName: BRANDING_NAME }),
    },
  };
};

Shadcn/ui サイト構成では、ブランド情報と関連 URL が含まれていることがわかりましたが、Lobechat ではそれが異なっていました。

などのファイルを含む const フォルダーがあります。

• ブランディング

• URL

• バージョン

Lobechat のこの設定は、Lobechat の config フォルダーであるため、Shadcn/ui のように、config ではなく const という名前のフォルダーから取得されます

私たちについて:

Thinkthroo では、大規模なオープンソース プロジェクトを研究し、アーキテクチャ ガイドを提供しています。私たちは、tailwind で構築された、プロジェクトで使用できる再利用可能なコンポーネントを開発しました。 Next.js、React、Node 開発サービスを提供します。

プロジェクトについて話し合うためのミーティングを予約してください。

参考文献:

1. https://github.com/lobehub/lobe-chat/blob/main/src/app/metadata.ts

2. https://github.com/shadcn-ui/ui/blob/main/apps/www/config/site.ts

3. https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata

4. https://github.com/lobehub/lobe-chat/blob/main/src/app/layout.tsx#L47

5. https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

以上がLobechat と Shadcn/ui のメタデータ構成の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。