Une comparaison des configurations de métadonnées entre Lobechat et Shadcn/ui

Dans cet article, vous apprendrez comment les métadonnées sont configurées dans Lobechat et Shadcn/ui. Cette comparaison montre deux façons de configurer vos métadonnées, la principale différence ici est que Shadcn/ui est un fournisseur de composants d'interface utilisateur. Vous ne voyez aucun appel d’API effectué vers le backend et vous ne trouvez aucune base de données impliquée non plus. Lobechat, en revanche, est le favori de notre équipe et est assez complexe et un grand projet doté d'une base de données utilise tRPC pour effectuer des appels API.

Vous découvrirez comment les fichiers et dossiers sont utilisés pour configurer les métadonnées en fonction du contexte, nous y reviendrons plus en détail dans les dernières parties de cet article.

Il existe deux manières de définir des métadonnées dans une mise en page Next.js ou une page

1. Métadonnées basées sur la configuration : exportez un objet de métadonnées statiques ou une fonction generateMetadata dynamique dans un fichier layout.js ou page.js.

2. Métadonnées basées sur des fichiers : ajoutez des fichiers spéciaux statiques ou générés dynamiquement pour acheminer les segments.

En savoir plus sur :

- Métadonnées statiques

- Métadonnées dynamiques

- Métadonnées basées sur des fichiers

Avec ces informations issues de la documentation, nous découvrirons quelle voie Shadcn/ui et Lobechat ont choisi.

Configuration des métadonnées Shadcn/ui

Dans le code source www/app/layout.tsx de Shadcn/ui, les métadonnées sont définies comme indiqué ci-dessous :

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`,
}

Cela signifie que Shadcn/ui utilise des métadonnées statiques. SiteConfig est importé comme indiqué ci-dessous :

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

Configuration des métadonnées Lobechat

Dans le Lobechat/src/app/layout.tsx, vous trouverez le code ci-dessous :

export { generateMetadata } from './metadata';

generateMetadata signifie ici que Lobechat utilise des métadonnées dynamiques. Vous trouverez ci-dessous le code extrait du fichier de métadonnées 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 }),
    },
  };
};

Dans la configuration du site Shadcn/ui, nous avons vu qu'il contient des informations sur la marque et des URL pertinentes, mais Lobechat l'a fait différemment. Il existe un dossier const contenant des fichiers tels que

• Image de marque

• URL

• Version

Cette configuration dans Lobechat provient d'un dossier nommé const au lieu de config, comme dans Shadcn/ui, car le dossier config dans Lobechat

À propos de nous :

Chez Thinkthroo, nous étudions les grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants réutilisables, construits avec tailwind, que vous pouvez utiliser dans votre projet. Nous proposons des services de développement Next.js, React et Node.

Prenez rendez-vous avec nous pour discuter de votre projet.

Références :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!