[SOLVED] Use the next.js Link to another pages return 404

Use the next.js Link to another pages return 404

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

Solution

You should read the next.js official documentation. Defining Routes

Since you are using the app directory, you can configure it like this: ./app/page.js will be your default page (home route /). Create a subdirectory for buy.js to represent its route.

./app
├── page.js
└── buy
    └── page.js

Move buy.js to ./app/buy/page.js.