Mongodb – How do I link data to a new page in Next.js?

• To pass value from page A to B, you need to use Link component & set its href.
• Read Linking to Dynamic Segments :
  https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#linking-to-dynamic-segments
• You should also read : https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

Here is a small example code that I made which might help you understand, I have kept it simple as possible (this code is in .js, you may edit as needed) :

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
│       │   └── DropDown.js
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.js
│       ├── nbh
│       │   ├── page.js
│       │   └── [id]
│       │       └── page.js
│       └── page.js
└── tailwind.config.js

DropDown Component locsrcappcompDropDown.js

This component gets data & shows dropdown.

'use client'
import React, { useEffect, useMemo, useState } from 'react'
import Link from 'next/link'

const DropDown = ({ Data }) => {
    const [SelectedID, SetSelectedID] = useState(null)
    return (
        <div>
            <h3>List of Neighbourhoods </h3>
            <label >Choose a Neighbourhood: </label>
            <select
                onChange={(e) => {
                    console.log(e.target.value)
                    SetSelectedID(e.target.value)
                }}
                name="Neighbourhoods">
                <option value="null">Select an Option</option>
                {
                    Data.map((val, ind) => {

                        return (
                            <option key={ind} value={ind} >{val.Title}</option>
                        )
                    })
                }
            </select>

            <p>
                You selected :
                {
                    SelectedID ?
                        <Link style={{ color: "blue" }} href={"/nbh/" + SelectedID} >Go to details page {Data[SelectedID].Title} </Link>
                        :
                        null
                }
            </p>
        </div>
    )
}

export default DropDown

page.js locsrcappnbhpage.js

*This page shows options. *

import React from 'react'
import DropDown from '../comp/DropDown'
const page = () => {
    const data = [{
        "id": 1,
        "Title": "Village Green",
        "description": "Fusce consequat. Nulla nisl. Nunc nisl.nnDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.nnIn hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo."
    }, {
        "id": 2,
        "Title": "Mandrake",
        "description": "Fusce consequat. Nulla nisl. Nunc nisl.nnDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum."
    }, {
        "id": 3,
        "Title": "Cascade",
        "description": "Curabitur gravida nisi at nibh. In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.nnInteger tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat.nnPraesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede."
    }, {
        "id": 4,
        "Title": "Mayfield",
        "description": "Morbi porttitor lorem id ligula. Suspendisse ornare consequat lectus. In est risus, auctor sed, tristique in, tempus sit amet, sem."
    }]
    return (
        <div>
            <h3>Page that Shows options : </h3>
            <DropDown Data={data} />
        </div>
    )
}
export default page

page.js inside locsrcappnbh[id]

This page will get id from the page that shows options

export default function Page({ params }) {
    return <div>Details Page : {params.id}</div>
}

Output :

1. Goto http://localhost:3000/nbh
2. You will see a dropdown, select a option, the you will see a Link to that option click on it.
3. It will take you to details page & you will see ID that we passed through the link.