metadataの設定、constants.tsの作成等

lib/constants.ts

@@ -0,0 +1,3 @@
+export const SITE_NAME = "first-contributions-ja";
+export const SITE_URL = "https://first-contributions-ja.github.io/";
+export const SITE_DESC = "Git/Githubの実践的な使い方やオープンソースでコラボレーションする作法を学ぶための日本語のチュートリアルです！";

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter, Noto_Sans_JP } from "next/font/google";
 import "./globals.css";
 import Footer from "@/components/footer";
+import { SITE_NAME, SITE_URL, SITE_DESC } from "../../lib/constants";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -15,8 +16,24 @@ const notojp = Noto_Sans_JP({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    default: SITE_NAME,
+    template: `%s - ${SITE_NAME}`,
+  },
+  description: SITE_DESC,
+  openGraph: {
+    title: SITE_NAME,
+    description: SITE_DESC,
+    url: SITE_URL,
+    siteName: SITE_NAME,
+    locale: 'ja_JP',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: SITE_NAME,
+    description: SITE_DESC,
+  },
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import { basePath } from "../../next.config";
 const BASE_PATH = basePath ? basePath : "";
 import GitHubIcon from '@mui/icons-material/GitHub';
+import { SITE_NAME } from "../../lib/constants";
 
 export default function Home() {
   return (
@@ -18,7 +19,7 @@ export default function Home() {
             コントリビューション体験
           </p>
           <h2 className="bg-red-600 text-white text-5xl inline-block px-4 py-2 font-bold mt-4">
-            first-contributions-ja
+            {SITE_NAME}
           </h2>
           <p className="mt-4">
             完全日本語のコントリビューション体験リポジトリです。フォーク、クローン、コミット、プルリクを行うことでOSSプロジェクト貢献方法を学べます。

src/components/footer.tsx

@@ -1,7 +1,9 @@
+import { SITE_NAME } from "../../lib/constants";
+
 export default function Footer() {
   return (
     <footer className="bg-red-600 text-white text-center py-2">
-      <small>&copy; first-contributions-ja</small>
+      <small>&copy; {SITE_NAME}</small>
     </footer>
   );
 }