NextJS'te Bileşenlerin Genel Verileri

Birkaç bileşenin aynı verilere erişmesi gereken durumlar olur. Örnek olarak, bir kullanıcı dizimiz olduğunu varsayalım. Bir rotada kullanıcıların listesini göstermek isteyelim, dinamik parametreye sahip başka bir rotada ise - onun id'sine göre belirli bir kullanıcının açıklaması.

Tanımlananı hayata geçirelim. Aşağıdaki dosya yapısını oluşturalım:

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

Kullanıcı verileriyle ayrı bir dosya yapalım:

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

Kullanıcı listesini göstermek için bir bileşen yapalım:

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

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

Onun id'sine göre belirli bir kullanıcıyı göstermek için bir bileşen yapalım:

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>;
}

Aşağıdaki dizi verilmiştir:

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',
	},
];

İki bileşen yapın. Birincisi ürünlerin listesini göstersin, ikincisi ise ürünün ayrıntılı açıklamasını göstersin.