{"id":2637,"title":"[Next.js]map\u3092\u4f7f\u3063\u3066\u9023\u60f3\u914d\u5217\u3092\u51fa\u529b\u3057\u3066\u307f\u308b","slug":"nextjs-getstaticprops-array-map","date":"2021\u5e7404\u670805\u65e5","voting":{"good":"5","bad":"2"},"modified":"2023\u5e7408\u670817\u65e5","tags":[{"name":"Next.js","slug":"next-js"},{"name":"Web","slug":"web"},{"name":"WebDev","slug":"webdev"}],"content":"![\u300c[Next.js]map\u3092\u4f7f\u3063\u3066\u9023\u60f3\u914d\u5217\u3092\u51fa\u529b\u3057\u3066\u307f\u308b\u300d\u306e\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf](\/images\/tmb\/nextjs-getstaticprops-array-map.jpg)\n\t\t\n\n\n## Next.js\u3067map\u3092\u4f7f\u3063\u3066\u9023\u60f3\u914d\u5217\u3092\u51fa\u529b\u3057\u3066\u307f\u308b\n\n#### `\/web.js`\n\n```json\nexport const web = [\n  { url: \"https:\/\/111.com\", comment: \"\u3044\u3061\", },\n  { url: \"https:\/\/222.com\", comment: \"\u306b\u3044\", },\n  { url: \"https:\/\/333.com\", comment: \"\u3055\u3093\", }\n]\n```\n\n#### `\/pages\/index.js`\n\n```js\nimport { web } from '..\/web'\n\nfunction Build( {web} ) {\n  return (\n    <ul> \/\/ul\u3067\u306a\u304f\u3066\u3082\u3044\u3044\u304c\u4f55\u304b\u3067\u56f2\u3093\u3067\u306a\u3044\u3068\u30c0\u30e1\n      {web.map(post => (\n        <li> \/\/map\u5185\u306b\u306f\u4e00\u3064\u306e\u89aa\u8981\u7d20\u3067\u306a\u3044\u3068\u30c0\u30e1\u3089\u3057\u3044\n       \t  <h2>{post.url}<\/h2>\n       \t\t<p>{post.comment}<\/p>\n        <\/li>\n      ))}\n    <\/ul>\n  );\n}\n\nexport async function getStaticProps() {\n  return { props: {web} };\n}\n\nexport default Build\n```\n\n##### \u51fa\u529b\u3055\u308c\u308bHTML\n\n```html\n<ul>\n  <li>\n    <h2>https:\/\/111.com<\/h2>\n    <p>\u3044\u3061<\/p>\n  <\/li>\n  <li>\n    <h2>https:\/\/222.com<\/h2>\n    <p>\u306b\u3044<\/p>\n  <\/li>\n  <li>\n    <h2>https:\/\/333.com<\/h2>\n    <p>\u3055\u3093<\/p>\n  <\/li>\n<\/ul>\n```\n\n"}