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:

/app/users/users.jsexport 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:

app/users/list/page.jsximport 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:

app/users/show/[id]/page.jsximport 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>;
}

/app/prods/prods.jslet 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',
  },
];