I'm learning Next.js and encountered a 404 error when implementing dynamic routing. I've followed the recommended folder structure and ensured my configuration is correct, yet I still face this issue. Below are the details of my folder structure and code setup for better clarity.

Issue

• Despite following these steps, visiting any dynamic route like /studentdetail/Muskan still results in a 404 error.

Question

• Am I missing any configuration steps for dynamic routing in Next.js with the app router?

• Is there something specific I should check to resolve this 404 error?

• Any guidance would be greatly appreciated!

Steps Taken

1. Verified folder structure is correct as per Next.js documentation.

2. Ensured appDir is enabled in next.config.mjs.

3. Restarted the dev server using npm run dev.

4. Cleared the cache using npx next build --no-lint && npx next dev.

/app
  /studentdetail
    [name]
      page.js
  /studentdetails
    page.js
/next.config.mjs

Code Details

/app/studentdetails/page.js

"use client";
import Link from "next/link";

export default function StudentDetails() {
    return (
        <div>
            <h1>Student Details</h1>
            <ul>
                <li><Link href="/studentdetail/Muskan">Muskan</Link></li>
                <li><Link href="/studentdetail/Mansi">Mansi</Link></li>
                <li><Link href="/studentdetail/Monika">Monika</Link></li>
                <li><Link href="/studentdetail/Maahi">Maahi</Link></li>
            </ul>
        </div>
    );
}

/app/studentdetail/[name]/page.js

"use client";
export default function Student({ params }) {
    console.log(params);
    return (
        <div>
            <h1>Student Details for {params.name}</h1>
        </div>
    );
}

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        appDir: true  // Ensured appDir is enabled
    }
};

export default nextConfig;

Error information