Lobechat과 Shadcn/ui 간의 메타데이터 구성 비교

이 글에서는 Lobechat과 Shadcn/ui에서 메타데이터를 구성하는 방법을 알아봅니다. 이 비교는 메타데이터를 구성하는 두 가지 방법을 보여줍니다. 여기서 주요 차이점은 Shadcn/ui가 UI 구성 요소 공급자라는 것입니다. 백엔드에 대한 API 호출이 표시되지 않으며 관련된 데이터베이스도 찾을 수 없습니다. 반면에 Lobechat은 우리 팀이 가장 좋아하는 것으로 상당히 복잡하고 데이터베이스가 있는 대규모 프로젝트로 tRPC를 사용하여 API 호출을 수행합니다.

상황에 따라 파일과 폴더를 사용하여 메타데이터를 구성하는 방법을 알아볼 수 있으며, 이에 대한 자세한 내용은 이 문서의 뒷부분에서 설명합니다.

Next.js 레이아웃이나 페이지에서 메타데이터를 정의하는 방법에는 두 가지가 있습니다

1. 구성 기반 메타데이터: 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 레이아웃.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/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 siteconfig에서 브랜드 정보와 관련 URL이 포함되어 있는 것을 확인했지만 Lobechat에서는 다르게 처리했습니다.

과 같은 파일이 포함된 const 폴더가 있습니다.

• 브랜딩

• URL

• 버전

Lobechat의 이 구성은 Shadcn/ui처럼 config 대신 const라는 폴더에서 나옵니다. 왜냐하면 Lobechat의 config 폴더는

회사 소개:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!