projectのIDでルーティングするようにする

src/components/Portfolio/ProjectItem.tsx

@@ -29,7 +29,7 @@ export const ProjectItem: React.FC<ProjectItemProps> = ({
         'p-3 rounded border d-flex flex-column align-items-center ' + className
       }
     >
-      <Link href={`/projects/${project.title}`}>
+      <Link href={`/projects/${project.id}`}>
         <h3 className="h5 my-1 title-underline pb-1">{project.title}</h3>
       </Link>
       <p className="mt-2 mb-1 d-flex align-items-center">

src/containers/Project.tsx

@@ -9,17 +9,17 @@ import Link from 'next/link'
 import { MarkdownDisplay } from '@/components/Common/MarkdownDisplay'
 
 export type ProjectShowProps = {
-  title: string
+  id: string
 }
 
-export const ProjectShow: React.FC<ProjectShowProps> = ({ title }) => {
-  const project = projectsData.find((v) => v.title === title)
+export const ProjectShow: React.FC<ProjectShowProps> = ({ id }) => {
+  const project = projectsData.find((v) => v.id === id)
   const { theme } = useTheme()
 
   if (!project) return <Error statusCode={404} />
   return (
     <div className="wrapper mx-auto mt-3">
-      <h1 className="title-underline ps-2">{title}</h1>
+      <h1 className="title-underline ps-2">{project.title}</h1>
       <div className="row">
         <div className="col-lg-8">
           <div className="px-2">

src/data/projects.ts

@@ -4,6 +4,7 @@ import { ProjectType } from '@/resources/types'
 export const projectsData: ProjectType[] = [
   {
     title: '歌枠データベース',
+    id: 'song-list',
     description: 'Vtuberが歌った曲を検索できます',
     link: 'https://song-list.piny940.com',
     github: 'https://github.com/piny940/song-list',
@@ -13,6 +14,7 @@ export const projectsData: ProjectType[] = [
   },
   {
     title: 'スタンプ作成補助',
+    id: 'kokosuko-stamp',
     description:
       'Youtubeのコメント欄でタイムスタンプを作成するのを補助する拡張機能',
     link: 'https://chrome.google.com/webstore/detail/kokosuki-stamp/pnbpecefaimbeadmmombelidgkkgfeeg?hl=ja',
@@ -22,13 +24,15 @@ export const projectsData: ProjectType[] = [
   },
   {
     title: '絵文字召喚bot',
+    id: 'emoji-creater',
     description: 'slack上で使える絵文字を自動で生成するslackアプリです',
     github: 'https://github.com/piny940/emoji-creater',
     detailSrc: '',
     skills: [],
   },
   {
     title: 'チャットアプリ',
+    id: 'clubroom',
     description:
       'discordのようにグループごとにメンバーやトークルームを作ることができます。',
     github: 'https://github.com/piny940/clubroom',
@@ -37,6 +41,7 @@ export const projectsData: ProjectType[] = [
   },
   {
     title: 'ポートフォリオ',
+    id: 'portfolio',
     description: 'Piny940のポートフォリオです',
     github: 'https://github.com/piny940/portfolio',
     link: 'https://piny940.com',
@@ -45,20 +50,23 @@ export const projectsData: ProjectType[] = [
   },
   {
     title: 'スタンプラリー',
+    id: 'mashiro-calender',
     description: 'Vtuber凪乃ましろさん休暇中のスタンプラリー',
     github: 'https://github.com/piny940/mashiro-calender',
     detailSrc: '',
     skills: [],
   },
   {
     title: 'オセロアプリ',
+    id: 'python-reverse',
     description: '大学の授業でオセロアプリをチーム開発しました。',
     github: 'https://github.com/piny940/python-reverse',
     detailSrc: '',
     skills: [],
   },
   {
     title: 'メカ少女シューティング',
+    id: 'mekashojo',
     description: '大学のサークルでシューティングゲームをチームで開発しました。',
     link: 'https://kmc-jp.booth.pm/items/3438923',
     detailSrc: '',

src/pages/projects/[title].tsx → src/pages/projects/[id].tsx

@@ -3,8 +3,8 @@ import { useRouter } from 'next/router'
 
 const Project: React.FC = () => {
   const router = useRouter()
-  const title = router.query.title as string
-  return <ProjectShow title={title} />
+  const id = router.query.id as string
+  return <ProjectShow id={id} />
 }
 
 export default Project

src/resources/types.ts

@@ -9,6 +9,7 @@ export type SkillType = {
 }
 export type ProjectType = {
   title: string
+  id: string
   description: string
   link?: string
   github?: string