Data Umum Komponen di NextJS

Ada situasi di mana beberapa komponen harus mengakses data yang sama. Sebagai contoh, mari kita memiliki sebuah array dengan pengguna. Misalnya di satu route kita ingin menampilkan daftar pengguna, dan di route lain dengan parameter dinamis - deskripsi pengguna tertentu berdasarkan id-nya.

Mari kita implementasikan hal yang dijelaskan. Kita akan buat struktur file berikut:

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

Mari buat file terpisah dengan data pengguna:

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

Mari buat komponen untuk menampilkan daftar pengguna:

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

Mari buat komponen untuk menampilkan pengguna tertentu berdasarkan id-nya:

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