Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    If you use app router, you should create route by folder. Nextjs will check page.js in folder to render page. You can see more here: https://nextjs.org/docs/app/building-your-application/routing/defining-routes

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search