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

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

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

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

https://gyazo.com/736eaf63021e6c8ec609b086dc03e77a

該当のソースコード

Menu.tsx

TwitterContents.tsx

12import 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// 動画3を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

試したこと

  • 相対パスで試した
Twitter 変化なし

コメントを投稿

0 コメント