CODEWITHSUNDEEP
reactjsnext.jsnext-link
Leo_Clouds
Leo_Clouds

Reputation: 13

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

Upvotes: 1

Views: 57

Answers (2)

hole
hole

Reputation: 49

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

Upvotes: 0

skit
skit

Reputation: 36

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.

Upvotes: 1

Related Questions