Migrate metadata to new file based metadata

src/app/[...parts]/error.tsx

@@ -2,7 +2,6 @@
 
 import { Button, Center, Code } from "@chakra-ui/react";
 import { useEffect } from "react";
-import { MetaData } from "^/lib/metaData";
 import type { ErrorComponent } from "^/next";
 import ErrorBox from "./_error/ErrorBox";
 
@@ -15,15 +14,13 @@ const DiffError: ErrorComponent = ({ error: error, reset }) => {
     }, [message]);
 
     return (
-        <MetaData title="Error">
-            <Center>
-                <ErrorBox>
-                    <h3>Something Went Wrong</h3>
-                    <Code maxWidth={700}>{`${message}`}</Code>
-                    <Button onClick={reset}>Try Again</Button>
-                </ErrorBox>
-            </Center>
-        </MetaData>
+        <Center>
+            <ErrorBox>
+                <h3>Something Went Wrong</h3>
+                <Code maxWidth={700}>{`${message}`}</Code>
+                <Button onClick={reset}>Try Again</Button>
+            </ErrorBox>
+        </Center>
     );
 };
 

src/app/[...parts]/page.client.tsx

@@ -2,7 +2,6 @@
 
 import { FunctionComponent, ReactNode } from "react";
 import DiffOptions from "^/lib/DiffOptions";
-import { MetaData } from "^/lib/metaData";
 import SimplePackageSpec from "^/lib/SimplePackageSpec";
 import DiffIntro from "./_page/DiffIntro";
 
@@ -21,10 +20,7 @@ const DiffPageClient: FunctionComponent<DiffPageClientProps> = ({
     services,
     diffResults,
 }) => (
-    <MetaData
-        title={`Comparing ${a.name}@${a.version}...${b.name}@${b.version}`}
-        description={`A diff between the npm packages "${a.name}@${a.version}" and "${b.name}@${b.version}"`}
-    >
+    <>
         <DiffIntro
             alignSelf="stretch"
             a={a}
@@ -33,7 +29,7 @@ const DiffPageClient: FunctionComponent<DiffPageClientProps> = ({
             options={options}
         />
         {diffResults}
-    </MetaData>
+    </>
 );
 
 export default DiffPageClient;

src/app/[...parts]/page.tsx

@@ -15,6 +15,22 @@ import PackagephobiaDiff from "./_page/PackagephobiaDiff";
 import { DIFF_TYPE_PARAM_NAME } from "./_page/paramNames";
 import DiffPageClient from "./page.client";
 
+export interface DiffPageProps {
+    params: { parts: string | string[] };
+    searchParams: QueryParams & { [DIFF_TYPE_PARAM_NAME]: ViewType };
+}
+
+export function generateMetadata({ params: { parts } }: DiffPageProps) {
+    const specs = splitParts(decodePartts(parts));
+
+    const [a, b] = specs.map((spec) => parseSimplePackageSpec(spec));
+
+    return {
+        title: `Comparing ${a.name}@${a.version}...${b.name}@${b.version}`,
+        description: `A diff between the npm packages "${a.name}@${a.version}" and "${b.name}@${b.version}"`,
+    };
+}
+
 // Ensure static rendering https://beta.nextjs.org/docs/api-reference/segment-config#dynamic
 export const dynamic = "force-static";
 
@@ -26,15 +42,10 @@ export function generateStaticParams() {
 
 // We need nodejs since we use Npm libs https://beta.nextjs.org/docs/api-reference/segment-config#runtime
 export const runtime = "nodejs";
-// TODO: Set title and description using `head.tsx` so that they
-//       are set before `useEffect()`
 const DiffPage = async ({
     params: { parts },
     searchParams,
-}: {
-    params: { parts: string | string[] };
-    searchParams: QueryParams & { [DIFF_TYPE_PARAM_NAME]: ViewType };
-}): Promise<JSX.Element> => {
+}: DiffPageProps): Promise<JSX.Element> => {
     const { diffFiles, ...optionsQuery } = searchParams;
 
     const specsOrVersions = splitParts(decodePartts(parts));

src/app/about/api/page.client.tsx

@@ -2,7 +2,6 @@
 import { Code, Heading, Text, VStack } from "@chakra-ui/react";
 import ExternalLink from "^/components/ExternalLink";
 import Tooltip from "^/components/Tooltip";
-import { MetaData } from "^/lib/metaData";
 
 export interface AboutApiPageClientProps {
     diff: string;
@@ -15,48 +14,46 @@ const AboutApiPageClient = ({
     specs,
     exampleAbsoluteUrl,
 }: AboutApiPageClientProps) => (
-    <MetaData title="API" description="API documentation for npm-diff.app">
-        <VStack p={5} shadow="md" borderWidth="1px" spacing={8}>
-            <Heading as="h2" size="lg">
-                npm-diff.app API
-            </Heading>
-            <Text>
-                npm-diff.app exposes a online API to equal{" "}
-                <ExternalLink href="https://docs.npmjs.com/cli/v7/commands/npm-diff">
-                    <Code>npm diff</Code>
-                </ExternalLink>
-                , to be able to see the changes between versions of packages or
-                forks of packages.
-            </Text>
+    <VStack p={5} shadow="md" borderWidth="1px" spacing={8}>
+        <Heading as="h2" size="lg">
+            npm-diff.app API
+        </Heading>
+        <Text>
+            npm-diff.app exposes a online API to equal{" "}
+            <ExternalLink href="https://docs.npmjs.com/cli/v7/commands/npm-diff">
+                <Code>npm diff</Code>
+            </ExternalLink>
+            , to be able to see the changes between versions of packages or
+            forks of packages.
+        </Text>
 
-            <Text>
-                <Code>
-                    GET{" "}
-                    <Tooltip label="Click to view the response from the API">
-                        <ExternalLink href={exampleAbsoluteUrl}>
-                            {exampleAbsoluteUrl}
-                        </ExternalLink>
-                    </Tooltip>
-                </Code>
-                <br />
-                will return the same as
-                <br />
-                <Code>
-                    npm diff --diff={specs[0]} --diff={specs[1]}
-                </Code>
-            </Text>
-            <Text>
-                a <Text as="i">diff</Text> of the two provided packages
-            </Text>
-            <Code
-                as="pre"
-                whiteSpace="pre-wrap"
-                display={{ base: "none", lg: "initial" }}
-            >
-                {diff}
+        <Text>
+            <Code>
+                GET{" "}
+                <Tooltip label="Click to view the response from the API">
+                    <ExternalLink href={exampleAbsoluteUrl}>
+                        {exampleAbsoluteUrl}
+                    </ExternalLink>
+                </Tooltip>
             </Code>
-        </VStack>
-    </MetaData>
+            <br />
+            will return the same as
+            <br />
+            <Code>
+                npm diff --diff={specs[0]} --diff={specs[1]}
+            </Code>
+        </Text>
+        <Text>
+            a <Text as="i">diff</Text> of the two provided packages
+        </Text>
+        <Code
+            as="pre"
+            whiteSpace="pre-wrap"
+            display={{ base: "none", lg: "initial" }}
+        >
+            {diff}
+        </Code>
+    </VStack>
 );
 
 export default AboutApiPageClient;

src/app/about/api/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import destination from "^/lib/destination";
 import doDiff from "^/lib/diff";
 import EXAMPLES from "^/lib/examples";
@@ -13,6 +14,11 @@ const EXAMPLE_RELATIVE_LINK = `${API_PATH}/${EXAMPLE_QUERY}` as const;
 const DOMAIN = "https://npm-diff.app";
 const EXAMPLE_ABSOLUTE_URL = `${DOMAIN}${EXAMPLE_RELATIVE_LINK}` as const;
 
+export const metadata = {
+    title: "API",
+    description: "API documentation for npm-diff.app",
+} satisfies Metadata;
+
 // Ensure static rendering https://beta.nextjs.org/docs/api-reference/segment-config#dynamic
 export const dynamic = "force-static";
 // We need nodejs since we use Npm libs https://beta.nextjs.org/docs/api-reference/segment-config#runtime

src/app/about/page.client.tsx

@@ -8,7 +8,6 @@ import {
     VStack,
 } from "@chakra-ui/react";
 import NextImage from "next/image";
-import { defaultMetaData, MetaData } from "^/lib/metaData";
 import {
     externalServicesDarkmode,
     externalServicesLightmode,
@@ -21,74 +20,68 @@ const AboutPageClient = () => {
     );
 
     return (
-        <MetaData title="About">
-            <VStack p={5} shadow="md" borderWidth="1px" spacing={8}>
-                <Heading as="h2" size="lg">
-                    About npm-diff.app
-                </Heading>
-                <Text>{defaultMetaData.description}</Text>
-                <Text>
-                    The comparing matches the behaviour of the CLI by using the
-                    official{" "}
-                    <Link
-                        href="https://npmjs.com/libnpmdiff"
-                        rel="noreferrer noopener"
-                        target="_blank"
-                    >
-                        <Code>libnpmdiff</Code>
-                    </Link>{" "}
-                    package to perform a diff between the packages you chose. We
-                    then visualize the differance.
-                </Text>
-                <Heading as="h3" size="md">
-                    Redirection
-                </Heading>
-                <Text>
-                    For the URL you can use formats that are not exact, like:{" "}
-                    <Link
-                        href="https://npm-diff.app/[email protected]...~4.17.15"
-                        rel="noreferrer noopener"
-                        target="_blank"
-                    >
-                        <Code>
-                            https://npm-diff.app/[email protected]...~4.17.15
-                        </Code>
-                    </Link>{" "}
-                    or{" "}
-                    <Link
-                        href="https://npm-diff.app/[email protected]@latest"
-                        rel="noreferrer noopener"
-                        target="_blank"
-                    >
-                        <Code>
-                            https://npm-diff.app/[email protected]@latest
-                        </Code>
-                    </Link>
-                    . If you go to any URL which is not exact, and therefore can
-                    change over time, we will redirect you to the exact URL. You
-                    will be redirected to an exact, canonical URL. This means
-                    you will get a cached version even if you used a unique
-                    query.
-                </Text>
-                <Heading as="h3" size="md">
-                    External services
-                </Heading>
-                <NextImage
-                    src={externalServicesImage}
-                    alt="Screenshot of external services in npm-diff.app"
-                    priority
-                    style={{ width: "auto", height: "auto" }}
-                />
-                <Text>
-                    We also use external services{" "}
-                    <Link href="https://bundlephobia.com">bundlephobia</Link>{" "}
-                    and{" "}
-                    <Link href="https://packagephobia.com">packagephobia</Link>{" "}
-                    to give an overview of the differances between the two,
-                    measured in install and bundle size.
-                </Text>
-            </VStack>
-        </MetaData>
+        <VStack p={5} shadow="md" borderWidth="1px" spacing={8}>
+            <Heading as="h2" size="lg">
+                About npm-diff.app
+            </Heading>
+            <Text>Inspect changes between npm packages in a webapp</Text>
+            <Text>
+                The comparing matches the behaviour of the CLI by using the
+                official{" "}
+                <Link
+                    href="https://npmjs.com/libnpmdiff"
+                    rel="noreferrer noopener"
+                    target="_blank"
+                >
+                    <Code>libnpmdiff</Code>
+                </Link>{" "}
+                package to perform a diff between the packages you chose. We
+                then visualize the differance.
+            </Text>
+            <Heading as="h3" size="md">
+                Redirection
+            </Heading>
+            <Text>
+                For the URL you can use formats that are not exact, like:{" "}
+                <Link
+                    href="https://npm-diff.app/[email protected]...~4.17.15"
+                    rel="noreferrer noopener"
+                    target="_blank"
+                >
+                    <Code>https://npm-diff.app/[email protected]...~4.17.15</Code>
+                </Link>{" "}
+                or{" "}
+                <Link
+                    href="https://npm-diff.app/[email protected]@latest"
+                    rel="noreferrer noopener"
+                    target="_blank"
+                >
+                    <Code>
+                        https://npm-diff.app/[email protected]@latest
+                    </Code>
+                </Link>
+                . If you go to any URL which is not exact, and therefore can
+                change over time, we will redirect you to the exact URL. You
+                will be redirected to an exact, canonical URL. This means you
+                will get a cached version even if you used a unique query.
+            </Text>
+            <Heading as="h3" size="md">
+                External services
+            </Heading>
+            <NextImage
+                src={externalServicesImage}
+                alt="Screenshot of external services in npm-diff.app"
+                priority
+                style={{ width: "auto", height: "auto" }}
+            />
+            <Text>
+                We also use external services{" "}
+                <Link href="https://bundlephobia.com">bundlephobia</Link> and{" "}
+                <Link href="https://packagephobia.com">packagephobia</Link> to
+                give an overview of the differances between the two, measured in
+                install and bundle size.
+            </Text>
+        </VStack>
     );
 };
 

src/app/about/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import AboutPageClient from "./page.client";
 
+export const metadata = {
+    title: "About",
+} satisfies Metadata;
+
 // Ensure static rendering https://beta.nextjs.org/docs/api-reference/segment-config#dynamic
 export const dynamic = "force-static";
 // TODO export const runtime = "experimental-edge";