Next.jsで画面遷移ができない

実現したいこと

Concept クリックするとconceptコンポーネントのページを表示したい

発生している問題・分からないこと

クリックしても404になります

該当のソースコード

JavaScript

1app/components/Header2 3import Link from 'next/link'4import React from 'react'5 6 7export const Header = () => {8 return (9 <div className='header container flex'>10 <nav className='header_menu flex'>11 <li><Link href='/concept'>Concept</Link></li>12 </nav>13 </div>14 )15}16

JavaScript

1app/components/concept 2 3import React from 'react'4 5export const concept = () => {6 return (7 <div>Concept</div>8 )9}

試したこと・調べたこと

上記の詳細・結果

concept.jsxをappディレクトリにpagesフォルダを作成してそこに配置。
大文字小文字が間違いないか確認
結果変わらず４０４エラー

補足

"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.1.0"
},