fix: head was rendered in client

mrskiro · Apr 14, 2024 · 027be72 · 027be72
1 parent 3da69c9
commit 027be72
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 86 deletions.
diff --git a/src/lib/meta/index.tsx b/src/lib/meta/index.tsx
diff --git a/src/pages/404/index.tsx b/src/pages/404/index.tsx
@@ -1,11 +1,16 @@
 import { NextPage } from "next"
 import { NotFoundPage } from "@/components/pages/404"
-import { Meta } from "@/lib/meta"
 
-const Page: NextPage<unknown> = () => (
-  <>
-    <Meta title="404" ogType="website" />
-    <NotFoundPage />
-  </>
-)
+export const getStaticProps = async () => {
+  return {
+    props: {
+      meta: {
+        title: "404",
+        ogType: "website",
+      },
+    },
+  }
+}
+
+const Page: NextPage<unknown> = () => <NotFoundPage />
 export default Page
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,4 +1,6 @@
 import * as React from "react"
+import Head from "next/head"
+import { useRouter } from "next/router"
 import { ErrorBoundary } from "@/components/error-boundary"
 import { ThemeProvider } from "@/features/theme/context"
 import { TwoColumn } from "@/layouts/two-column"
@@ -7,11 +9,43 @@ import { GoogleAnalytics, usePegeView } from "@/lib/log"
 import { ResetStyle } from "@/lib/style/reset-style"
 import type { AppProps } from "next/app"
 
-const MyApp = (props: AppProps) => {
+const MyApp = (
+  props: AppProps<{
+    meta?: {
+      title?: string
+      ogType?: "website" | "article"
+    }
+  }>
+) => {
   usePegeView()
 
+  const { meta } = props.pageProps
+
+  const router = useRouter()
+  const url = `https://mrskiro.dev${router.asPath}`
   return (
     <>
+      <Head>
+        <link
+          rel="icon"
+          href="data:image/svg+xml,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22&gt;&lt;text x=%2250%%22 y=%2250%%22 style=%22dominant-baseline:central;text-anchor:middle;font-size:90px;%22&gt;🟣&lt;/text&gt;&lt;/svg&gt;"
+        />
+        <link rel="canonical" href={url} />
+
+        <title>
+          {meta?.title ? `${meta.title} | mrskiro.dev` : "mrskiro.dev"}
+        </title>
+        <meta name="twitter:site" content="@mrskiro_" />
+        <meta name="twitter:card" content="summary" />
+        <meta property="og:site_name" content="mrskiro.dev" />
+        <meta
+          property="og:image"
+          content="https://www.mrskiro.dev/assets/mrskiro.png"
+        />
+        <meta property="og:title" content={meta?.title ?? "mrskiro.dev"} />
+        <meta property="og:type" content={meta?.ogType ?? "website"} />
+        <meta property="og:url" content={url} />
+      </Head>
       {isPrd() && <GoogleAnalytics />}
       {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
       {/* @ts-ignore */}

diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
@@ -4,7 +4,6 @@ import { AboutPage } from "@/components/pages/about"
 import { findPostDetailById } from "@/features/post/api"
 import * as PostTypes from "@/features/post/types"
 import { load } from "@/lib/config"
-import { Meta } from "@/lib/meta"
 
 type Props = {
   aboutPageDetail: PostTypes.PostDetail
@@ -16,6 +15,10 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
   return {
     props: {
       aboutPageDetail,
+      meta: {
+        title: "About",
+        ogType: "article",
+      },
     },
   }
 }
@@ -26,16 +29,7 @@ const Page: NextPage<Props> = (props) => {
     return <p>loading...</p>
   }
 
-  return (
-    <>
-      <Meta
-        title="About"
-        ogType="article"
-        description="むらさきの自己紹介です。"
-      />
-      <AboutPage aboutPageDetail={props.aboutPageDetail} />
-    </>
-  )
+  return <AboutPage aboutPageDetail={props.aboutPageDetail} />
 }
 
 export default Page
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -3,7 +3,6 @@ import { RootPage } from "@/components/pages/root/root"
 import { findPosts } from "@/features/post/api"
 import { Post } from "@/features/post/types/post"
 import { load } from "@/lib/config"
-import { Meta } from "@/lib/meta"
 import { parseByURL } from "@/lib/parser/rss"
 
 type Props = {
@@ -36,19 +35,14 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
   return {
     props: {
       posts,
+      meta: {
+        title: "Posts",
+        ogType: "website",
+      },
     },
   }
 }
 
-const Page: NextPage<Props> = (props) => (
-  <>
-    <Meta
-      title="Posts"
-      description="むらさきの技術ブログです。"
-      ogType="website"
-    />
-    <RootPage posts={props.posts} />
-  </>
-)
+const Page: NextPage<Props> = (props) => <RootPage posts={props.posts} />
 
 export default Page
diff --git a/src/pages/posts/[param]/index.tsx b/src/pages/posts/[param]/index.tsx
@@ -4,7 +4,6 @@ import { PostDetailPage } from "@/components/pages/posts/[param]"
 import { findPostDetailBySlug, findPosts } from "@/features/post/api"
 import * as PostTypes from "@/features/post/types"
 import { toPublic } from "@/lib/image"
-import { Meta } from "@/lib/meta"
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const posts = await findPosts()
@@ -43,6 +42,10 @@ export const getStaticProps: GetStaticProps<Props, { param: string }> = async (
   return {
     props: {
       postDetail,
+      meta: {
+        title: postDetail.title.plainText,
+        ogType: "article",
+      },
     },
   }
 }
@@ -53,12 +56,7 @@ const Page: NextPage<Props> = (props) => {
     return <p>loading...</p>
   }
 
-  return (
-    <>
-      <Meta title={props.postDetail.title.plainText} ogType="article" />
-      <PostDetailPage postDetail={props.postDetail} />
-    </>
-  )
+  return <PostDetailPage postDetail={props.postDetail} />
 }
 
 export default Page