How do you fix Next.js 14 next/link routing 404 error page issue

Question

I just did a fresh install of Next.js using npx create-next-app@latest on Windows (using an elevated shell).

My /src/app/components/Header.tsx file has this code:

import React from 'react';
import styles from '../page.module.css'
import Link from 'next/link'

export default function Header() {
  return (    
    <header className={styles.header}>
        <nav className='navbar navbar-expand-lg bg-success navbar-dark p-4'>
            
            <ul className="navbar-nav nav-pills mr-auto">
              <li className='nav-item home'>
                <Link 
                  className='nav-link active'
                  href="/"
                  >Home
                </Link>
              </li>

                <li className='nav-item'>
                  <Link 
                    className='nav-link'
                    href="/react-page"
                    >ReactJS
                  </Link>
                </li>
            </ul>
        </nav>
    </header>
  )
}

...and my /src/app/pages/react-page.tsx file has:

import Image from 'next/image'

export default function ReactPage() {
  return (
    <>
      <div className="jumbotron jumbotron-fluid">
        <div className="container">
          <div className='row d-flex justify-content-start align-items-center' id="hp_logo_container">
            <div className='col-sm p-5'>
              <Image
                className=""
                id="react_logo"
                src="/react-logo.svg"
                alt="React Logo"
                width={300}
                height={300}
                priority
              />
            </div>
            
            <div className='col-sm p-5'>
                <h1 className="display-6">React!</h1>
                <p className="lead">
                  some text
                </p>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

The problem: When I click on the "ReactJS" link from the Header.tsx, I get a 404 error page not found.

(tried) I've tried moving the /pages folder just about anywhere, and I did read somewhere that Next.js automatically creates a route to any page you place in the /pages folder, but they don't tell you where to make that folder in the first place. Do I place it in /src, /src/app, or in my root project folder?

Since I've tried placing the /pages folder just about anywhere possible inside my root folder (and sub folders) I suspect my problem might lie elsewhere.

(expecting) I expect the link to work and route me to the page as it should.

Any help with this issue is appreciated.

Answer 1

You would want to modify your file directory as so /src/app/react-page/page.tsx

import Image from 'next/image'

export default function ReactPage() {
  return (
    <>
      <div className="jumbotron jumbotron-fluid">
        <div className="container">
          <div className='row d-flex justify-content-start align-items-center' id="hp_logo_container">
            <div className='col-sm p-5'>
              <Image
                className=""
                id="react_logo"
                src="/react-logo.svg"
                alt="React Logo"
                width={300}
                height={300}
                priority
              />
            </div>
            
            <div className='col-sm p-5'>
                <h1 className="display-6">React!</h1>
                <p className="lead">
                  some text
                </p>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

The above code block goes in page.tsx

Find more info here