Next js Problem - Sending data from one page to another

Question

I have a file called Data.js where i've exported a list with some objects as below

export const DATA = [
    {
        'loc':'WEB',
        'title':"Bukkit List",
        'img':'/img/Projects/Bukkit-List.PNG',
        'desc':"Bukkit-List is a easy to use and free task managing webapp, with password protection now!",
        'fullDesc':""
    },
    {
        'loc':'WEB',
        'title':"SilenxIka-Github",
        'img':'/img/Projects/SilenxIkaGithub.PNG',
        'desc':"First github website for Project SilenxIka, which is completly made from vanilla HTML/CSS/JS",
        'fullDesc':""
    }
]

Now i have a page called projects.js where i've imported this list and displayed it's content in HTML as below

import Image from 'next/image';
import Link from 'next/link'
import { DATA } from '../../components/Data'

const WEB_RELATED = []
const PC_EXES = []

for(let i=0;i<DATA.length; i++){
    if(DATA[i]['loc'] == 'WEB'){
        WEB_RELATED.push(DATA[i])
    }
    else if(DATA[i]['loc'] == 'EXE'){
        PC_EXES.push(DATA[i])
    }
}

const WEB = WEB_RELATED.map(item =>
    <div className="PROJECTS_Projects">
        <div className="PROJECTS_Projects_Image">
            <Image
                className='PROJECTS_Projects_image'
                src={item['img']}
                layout='fill'
            // objectFit='contain'
            />
        </div>
        {/* if someone clicks on this link i want them to go to [project].js and send This item to [projcet].js */}


        // Link-2
        <Link href={'/projects/' + WEB_RELATED.indexOf(item)}>
            <a>{item['title']}</a>
        </Link>
        <p>{item['desc']}</p>
    </div>
);


const PC = PC_EXES.map(item =>
    <div className="PROJECTS_Projects">
        <div className="PROJECTS_Projects_Image">
            <Image
                className='PROJECTS_Projects_image'
                src={item['img']}
                layout='fill'
            // objectFit='contain'
            />
        </div>
        {/* if someone clicks on this link i want them to go to [project].js and send This item to [projcet].js */}


        // LINK -1
        <Link href={'/projects/' + PC_EXES.indexOf(item)}>
            <a>{item['title']}</a>
        </Link>
        <p>{item['desc']}</p>
    </div>
);


export default function index() {
    return (
        <div className="PROJECTS_Container">
            <div className="PROJECTS_Sub_Container">

                <div className="PROJECTS_New">

                    <h1>Web-Related</h1>

                    <div className="PROJECTS_Present">

                        {WEB}

                    </div>

                </div>

                <div className="PROJECTS_New">

                    <h1>Pc apllications</h1>

                    <div className="PROJECTS_Present">

                        {PC}

                    </div>

                </div>


            </div>
        </div>
    )
}

then i have a link in this page with link /projectsDisplay/{index_of_item_in_Data.js_List} which then leads to the page below

This projectDisplay.js file is covered in [] so it has the router.query thingie

export default function title({project}) {
    return (
        <div className='DISPLAY_Container'> 
            <div className="DISPLAY_Sub_Container">
                <div className="DISPLAY_Image">
                    <Image
                        // src={`'/${img}'`}
                        src={'/img/Projects/Cluq.PNG'}
                        // src={data['img']}
                        layout='fill'
                    />
                </div>
                <div className="DISPLAY_Info">
                    <h3>Here also</h3>
                    <a href="">SUS</a>
                    <p>Want data here</p>
                </div>
            </div>
        </div>
    )
}

I wanna display the same data the user clicked for in the first page, in simple words the item in the first page shall be accessible here in the last page's HTML