Javascript – How can I make my button in NextJS go to another page I created in the same app?

Heres a example code I made :
Explaination:

• there is a pets page which shows all pets name,
• It contains 2 elements 1st is Link tag & 2nd is a Button as link
• Take a look at folder structure, focus on pets folder
• On pets page I have shown pets data (you may show it using ur card component) using URL present in your code.

Folder Structure :

projectName
├── .gitignore
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── images
│   ├── next.svg
│   └── vercel.svg
├── README.md
├── src
│   └── app
│       ├── api
│       ├── comp
│       │   ├── LinkButton.js
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.js
│       ├── page.js
│       ├── pets
│       │   ├── page.js
│       │   └── [id]
│       │       └── page.js
└── tailwind.config.js

• now I will show pets data, & from it i will pass ID to Link tag & Button component.

• Button Component is client side bcoz of event click.

• Now if someone clicks on link or button, they will get navigated to pets/id

• Using url present in code I appended id to it get details of pet by id. Details page is under folder pets/[id]/page.js

You may read this for more clarity of concepts :

• Routing Fundamentals :
  https://nextjs.org/docs/app/building-your-application/routing

• Dynamic Routes :
  https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

• Linking and Navigating :
  https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

• Server Components :
  https://nextjs.org/docs/app/building-your-application/rendering/server-components

• Client Components :
  https://nextjs.org/docs/app/building-your-application/rendering/client-components

• When to use Server and Client Components? :
  https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components

All Pets Detail Page: projectNamesrcapppetspage.js

import Link from "next/link"
import LinkButton from "../comp/LinkButton"

async function GetPets() {
    let data = await fetch('https://653bf08fd5d6790f5ec7a989.mockapi.io/pets')
    let PetsData = await data.json()
    // console.log(PetsData);
    // LOGGED IN TERMINAL BCOZ ITS SERVER-SIDE

    return PetsData
}

export default async function Pets() {


    const PetsData = await GetPets()

    return (
        <div>
            <h1>All Pets !</h1>
            {
                PetsData.map((p, i) => {
                    return (
                        <div style={{
                            border: "1px solid black",
                            padding: "25px",
                            margin: '25px'
                        }}
                            key={i}
                        >
                            <img src={p.avatar} width="250" alt="" />
                            <h3>{p.name}</h3>
                            <Link style={{ color: "blue" }} href={`/pets/` + p.id}> VIew </Link>

                            <LinkButton ID={p.id} />
                        </div>
                    )
                })
            }

        </div>
    )
}

Pet Detail page : projectNamesrcapppets[id]page.js

async function GetDetailsByID(ID) {
    let data = await fetch('https://653bf08fd5d6790f5ec7a989.mockapi.io/pets/' + ID)

    // I GOT THIS URL BY TRYING TO APPEND ID TO URL PROVIDED IN CODE

    let PetDetails = await data.json()
    // console.log(Object.keys(PetDetails));
    // LOGGED IN TERMINAL BCOZ ITS SERVER-SIDE


    return PetDetails
}

export default async function DetailsPage({ params }) {
    let Details = await GetDetailsByID(params.id)
    // AFTER GETTING ID I WILL PASS IT THE API CALL

    // THIS PAGE WILL BE SERVER RENDERED

    return (
        <div>
            <h1>Full Pet Deyails :</h1>
            <img src={Details.avatar} alt="" />
            <p className="text-gray-600">{Details.name}</p>
            <p className="text-gray-600">{Details.id}</p>
            <p className="text-gray-600">{Details.age}</p>
            <p className="text-gray-600">{Details.Gender}</p>
            <p className="text-gray-600">{Details.breed}</p>
            <p className="text-gray-600">{Details.description}</p>
            <p className="text-gray-600">{Details.createdAt}</p>




        </div>
    )
}

LinkButton.js Component projectNamesrcappcompLinkButton.js under comp folder

'use client'
import { useRouter } from 'next/navigation'
import React from 'react'

const LinkButton = ({ ID }) => {
    const MyRouter = useRouter()

    // IF YOU WANT TO USE A BUTTON THEN IT COMES UNDER CLIENT SIDE 
    // RENDERING BECAUSE OF CLICK EVENT


    // HERE IM PASSING THE ID TO LINK & USING ROUTER TO NAVIGATE
    return (
        <button onClick={() => {
            MyRouter.push(`/pets/` + ID)
        }}>
            Button
        </button>
    )
}

export default LinkButton

Instead of using button you can style that Link tag to look like a button !

Output:

1. Goto http://localhost:3000/pets
2. You will a card like layout, with Link Tag named as View in blue color & Button named as Button.
3. Click on them you will go on a page ex. 1st pet was clicked http://localhost:3000/pets/1
4. On this page details are fetched by ID.
5. Open console & then open Network Tab click on pets, then on right hand side click on preview you will see page is pre-rendered !
6. Siilarly for details page, you will id in Network Tab click on preview you will see page is pre-rendered.

Comment to ask for any doubts.

This code will be deleted from myside(personal computer).