Linkコンポーネントでページ遷移をしたい

なぜリンクで遷移できないのか教えていただきたいです。

next.jsでページ遷移の機能を作っています。
Linkコンポーネントのhrefの中で相対パス（href="/TwitterContents"）と書いたところ
error 404（そのようなファイルはありません）と言われてしまいました。
相対パスが間違っているようでしたら直したいのですが、間違ってないはずです（間違ってたらごめんなさい）。
import Link from "next/link"も書いてありますし、その他のエラーは何も出ていません。

発生している問題・エラーメッセージ

https://gyazo.com/736eaf63021e6c8ec609b086dc03e77a

該当のソースコード

Menu.tsx
1import styled from 'styled-components'
2import Link from "next/link"
3
4export function Menu() {
5    return (
6      <Wrapper>
7          <Header>
8            <Link href="/">
9              Youtube
10            </Link>
11            <Link href="../TwitterContents">
12              Twitter
13            </Link>
14            <Link href="/">
15              Instagram
16            </Link>
17          </Header>
18      </Wrapper>
19       
20    );
21  }
22  
23  const Wrapper = styled.div`
24    text-align: center;
25  `;
26  
27  const Header = styled.header`
28    background-color: #333333;
29    min-height: 10vh;
30    display:flex;
31    
32    align-items: center;
33    justify-content: space-around;
34    font-size: calc(10px + 2vmin);
35 
36  `;
37 
38  export default Menu;

TwitterContents.tsx
1
2import styled from 'styled-components'
3import {NextPage} from 'next'
4import Image from 'next/image'
5
6
7export function TwitterContents() {
8    return (
9        // flex-wrapができない
10
11        <ContentBg>
12            <ContentBoxes>
13                <ContentBox>
14                    <ParagraghCenter>
15                        <p>1</p>
16                    </ParagraghCenter>
17                    <Link href="/">
18                    <ImageBox/>
19                    </Link>
20                    
21                </ContentBox>
22                <ContentBox>
23                    <ParagraghCenter>
24                        <p>2</p>
25                    </ParagraghCenter>
26                    <Link href="/">
27                    <ImageBox/>
28                    </Link>
29                </ContentBox>
30                <ContentBox>
31                    <ParagraghCenter>
32                        <p>3</p>
33                    </ParagraghCenter>
34                    <Link href="/">
35                    <ImageBox/>
36                    </Link>
37                </ContentBox>
38            </ContentBoxes>
39            
40            <ContentBoxes>
41            <ContentBox>
42                <ParagraghCenter>
43                    <p>4</p>
44                </ParagraghCenter>
45                    <Link href="/">
46                    <ImageBox/>
47                    </Link>
48                    
49                </ContentBox>
50                <ContentBox>
51                    <ParagraghCenter>
52                        <p>5</p>
53                    </ParagraghCenter>
54                    <Link href="/">
55                    <ImageBox/>
56                    </Link>
57                </ContentBox>
58                <ContentBox>
59                    <ParagraghCenter>
60                        <p>6</p>
61                    </ParagraghCenter>
62                    <Link href="/">
63                    <ImageBox/>
64                    </Link>
65                </ContentBox>
66            </ContentBoxes>
67        </ContentBg>
68    )
69}
70
71export const ImageBox: React.FC = () => (
72    <Image src="" width={364} height={264}  alt="" />
73)
74
75// Contentsの背景
76const ContentBg = styled.div`
77    margin-top: 70px;
78` 
79
80// 動画３を1つの単位にした
81const ContentBoxes = styled.div`
82    display:flex;
83`
84
85const ContentBox = styled.div`
86    width: 1040px;
87    margin: 0 auto;
88    display: flex;
89    
90`
91const ParagraghCenter = styled.div `
92    display:flex;
93    justify-content: center;
94    align-items: center;
95`
96
97
98// エラー出ないように定義だけしてる
99const Link = styled.a`
100
101  `;
102
103  export default TwitterContents