NextJS'te Dinamik Link Üretimi

Bazı kullanıcı veri dosyamızın olduğunu varsayalım:

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

İki bileşen yapalım. İlk bileşen, detaylı açıklamalarına bağlantıları olan kullanıcıların listesini gösterecek. İkinci bileşen ise bu detaylı açıklamayı gösterecek.

URL /users/list adresinde tüm kullanıcıların listesinin gösterilmesine ve URL /users/show/:id adresinde ise - kimliğine göre belirli bir kullanıcının gösterilmesine izin verin.

Bunun için aşağıdaki dosya yapısını oluşturalım:

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

Her kullanıcının id'sini içine koyarak, içinde döngüsel olarak dinamik olarak bağlantılar oluşturacağımız ilk bileşeni oluşturalım:

import users from '../users.js';
import Link from 'next/link';

export default function List() {
	let list = users.map(user => {
		return <li>
			<Link href={`/users/show/${user.id}`}>
				{user.name}
			</Link>
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

id'sine göre belirli bir kullanıcıyı görüntülemek 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. İlkinin ürünlerin listesini, ürünün tam açıklamasına bağlantılar şeklinde göstermesine izin verin. İkinci bileşenin ürünün ayrıntılı açıklamasını göstermesine izin verin.

URL'de var olmayan bir ürünün kimliği iletilirse, ekranın 404 hatası göstermesini sağlayın.