yarn create next-appを実行した後、連想配列をjsonファイルに保存し、index.jsからアクセスしようとすると以下のエラーが出てしまう。

/data.json

[
  { url: "https://111.com", comment: "いち", },
  { url: "https://222.com", comment: "にい", },
  { url: "https://333.com", comment: "さん", }
]

/pages/index.js

import json from '../data.json'

function Build() {
  console.log(json)
  return ( <h1>コンソールを確認！</h1> );
}

export default Build

エラー

Module parse failed: Unexpected token u in JSON at position 10 while parsing near "〜". You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders SyntaxError: Unexpected token u in JSON at position 10 while parsing near "〜"

jsファイルで変数に格納してあげる

そんな時は、jsonファイルではなく、jsファイルにexportで連想配列を指定し、index.jsでgetStaticPropsを使うとアクセスできた。

/web.js

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

/pages/index.js

import { web } from '../web'

function Build( {web} ) {
  console.log(web)
  return ( <h1>コンソールを確認！</h1> );
}

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

export default Build