![「[Next.js]mapを使って連想配列を出力してみる」のアイキャッチ画像](/images/tmb/nextjs-getstaticprops-array-map.jpg)

## Next.jsでmapを使って連想配列を出力してみる

#### `/web.js`

“`json
export const web = [
{ url: “https://111.com”, comment: “いち”, },
{ url: “https://222.com”, comment: “にい”, },
{ url: “https://333.com”, comment: “さん”, }
]
“`

#### `/pages/index.js`

“`js
import { web } from ‘../web’

function Build( {web} ) {
return (

//ulでなくてもいいが何かで囲んでないとダメ
{web.map(post => (
• //map内には一つの親要素でないとダメらしい
  

  {post.url}

  {post.comment}

))}

);
}

export async function getStaticProps() {
return { props: {web} };
}

export default Build
“`

##### 出力されるHTML

“`html

• https://111.com

  いち

• https://222.com

  にい

• https://333.com

  さん

“`