Data passing probelm between files in next js - html

Question

So i have three files here :-
project.js
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 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 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>
)
}
Project Display page [project.js]
import { useRouter } from 'next/router'
import { useState } from 'react';
import Image from 'next/image';
import { DATA } from '../../components/Data';
import React, {useEffect} from 'react';
export default function title() {
const router = useRouter();
const { project } = router.query
const [state, setState] = useState()
// when user comes here i want the item sent to be read and injected into the html
useEffect(() => {
// project && console.log('value', project, 'length : ', project.length);
// setState(project)
console.log(DATA[project]['loc'])
}, [router])
return (
<div className='DISPLAY_Container'>
<div className="DISPLAY_Sub_Container">
<div className="DISPLAY_Image">
<Image
src={'/img/Projects/Cluq.PNG'}
layout='fill'
/>
</div>
<div className="DISPLAY_Info">
<h3>{state}</h3>
SUS
<p>lorem300</p>
</div>
</div>
</div>
)
}
DATA.JS file where i've kept all of the objects i want to be shown
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':""
}
]
when someone presses a link in the first file (check there are coments above the link) the item in the link shall be passed to the second file and i can use the item in [project].js file to inject it into the html

Answer 1

You can append query parameters to your url and use the useRouter hook from "next/router" for getting the content of those query parameters in your other file.
Let's imagine your item object has an id and we want to append that id as a query parameter to your route:
In project.js:
export const arrayOfItems = [
{id: 'A', title: 'A title'},
{id: 'B', title: 'B title'},
{id: 'C', title: 'C title'},
{id: 'D', title: 'D title'},
];
// Add query param "item_id" plus the id of your item to your url (note the '?')
{arrayOfItems.map((item)=>
<Link href={'/projects?item_id= + item.id }>
<a>{item.title}</a>
</Link>
)
In your product display page:
import { useRouter } from "next/router";
import { arrayOfItems } from "./project.js"; // path to where array is exported from
const ProductPage = () => {
const router = useRouter();
useEffect(() => {
// here you have access to the query parameters
console.log(router.query?.item_id);
// get item_id from route
const routeItemId = router.query?.item_id;
// search through array and find item with matching id
const matchingItem = arrayOfItems.find((item)=> item.id === routeItemId && item);
console.log(matchedItem);
}, [router]);
return(<></>)
}