Të dhënat e përgjithshme të komponentëve në NextJS

Ka situata kur disa komponentë duhet të kenë qasje në të njëjtat të dhëna. Për shembull, le të kemi një varg me përdorues. Le të themi në një rrugë duam të shfaqim një listë përdoruesish, ndërsa në një rrugë tjetër me parametra dinamikë - përshkrimi i një përdoruesi specifik sipas id të tij.

Le të implementojmë atë që u përshkrua. Le të krijojmë strukturën e mëposhtme të skedarëve:

/app/
- /users/
  - users.js
  - /list/
    - page.jsx
  - /show/[id]/
    - page.jsx

Le të krijojmë një skedar të veçantë me të dhënat e përdoruesve:

export default users = [
	{
		id: 1,
		name: 'name1',
		surn: 'surn1',
	},
	{
		id: 2,
		name: 'name2',
		surn: 'surn2',
	},
	{
		id: 3,
		name: 'name3',
		surn: 'surn3',
	},
];

Le të krijojmë një komponent për të shfaqur listën e përdoruesve:

import users from '../users.js';

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

Le të krijojmë një komponent për shfaqjen e një përdoruesi specifik sipas id të tij:

import users from '../../users.js';

export default function User({params}) {
	let user = users[params.id];
	
	return <div>
		<span>{user.id}</span>
		<span>{user.name}</span>
		<span>{user.surn}</span>
	</div>;
}

Jepet vargu i mëposhtëm:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
		desc: 'desc1',
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
		desc: 'desc2',
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
		desc: 'desc3',
	},
];

Krijoni dy komponentë. Le të shfaqë i pari një listë produktesh, ndërsa i dyti - një përshkrim të hollësishëm të produktit.