Data Umum Komponen dalam NextJS

Ada situasi di mana beberapa komponen perlu mengakses data yang sama. Sebagai contoh, mari kita mempunyai array dengan pengguna. Pada satu route kita ingin menunjukkan senarai pengguna, dan pada route lain dengan parameter dinamik - keterangan pengguna tertentu mengikut id-nya.

Mari kita laksanakan apa yang diterangkan. Kita akan buat struktur fail berikut:

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

Mari buat fail berasingan 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 menunjukkan senarai 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 output pengguna tertentu mengikut 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',
  },
];