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

Question

実現したいこと

<li><Link href='/concept'>Concept</Link></li> クリックするとconceptコンポーネントのページを表示したい

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

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

該当のソースコード

app/components/Header

import Link from 'next/link'
import React from 'react'


export const Header = () => {
  return (
    <div className='header container flex'>
      <nav className='header_menu flex'>
        <li><Link href='/concept'>Concept</Link></li>
      </nav>
    </div>
  )
}

app/components/concept

import React from 'react'

export const concept = () => {
  return (
    <div>Concept</div>
  )
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

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

補足

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

Answer 1

次の(1)(2)(3)をやってみるとどうでしょうか。

(1) ファイル内容の修正

• import React from 'react' の行は不要
• 関数コンポーネント名を大文字始まりのConceptに修正したうえで、
• Concept を export default する。

import React from 'react'

- export const concept = () => {
+ const Concept = () => {
  return (
    <div>Concept</div>
  )
}

+ export default Concept;

(2) 上記のファイル名を page.jsx に変更

(3) app/concept/ ディレクトリを作成して、そこに (2) の page.jsx を移動

---

訂正

import React from 'react'
は必要でした m(_ _)m

Comments

[fdewcds]

回答ありがとうございます。
試したところ問題が解決しました！お二方ありがとうございました。
ベストアンサーに選ばせていただきました。

Answer 2

Reactでカスタムコンポーネントを定義する際は、大文字始まりである必要があるかと思いますので、

export const concept = () => {}
↓
export const Concept = () => {}

に変更してみてください！

以下公式のドキュメントです

https://legacy.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized