I have a file names “page.js”,it’s the default page.In the “page.js”,I use the Link to link to the “buy.js”,but it return 404

It’s the code use for link to “buy.js” in the “page.js”

import Buy from "./buy";
<Link href="/buy" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">

It’s the “buy.js”

import { Inter } from "next/font/google";
import "./globals.css";

export default function Buy()
{
    return (
        <main>
            <h1>TEST</h1>
        </main>
    );
}

“buy.js” and “page.js” are both in the ./app directory

This was originally in Chinese, and my translation may have been incorrect. I would like to express my gratitude to all those who have answered my questions