Next.jsでローカルのjsonファイルを読み込む方法

Next.jsでサイトを作成するとき、そんなに頻繁に更新しない(DBやヘッドレスCMSを使うほどでもない)データをどうしようかと考えたところ、最終的にjsonファイルで管理することにした。

今回はそれをどう実現するかのメモ。

jsonファイルを作成

何はなくとも呼び出すjsonファイルが必要なので作成していく。

プロジェクトにjsonフォルダを作成し、そこにsample.jsonファイルを作成、サンプルとして今回は以下のような内容にする。

{
  "Links": [
    {
      "id": 1,
      "title": "Google",
      "url": "https://www.google.com/"
    },
    {
      "id": 2,
      "title": "Yahoo",
      "url": "https://www.yahoo.co.jp/"
    },
    {
      "id": 3,
      "title": "Amazon",
      "url": "https://www.amazon.co.jp/"
    }
  ]
}

Next.jsで呼び出す

ここからついに本題、Next.jsのアプリ側から呼び出すのだが、その方法が以下の通り。

import Link from "next/link";
import Data from "../json/sample.json";

export default async function Home() {

  const links = Data.Links;

  return (
    <main>
      {links.map((link) => {
        return (
          <div key={link.id}>
            <Link href={link.url} target="_blank">{link.title}</Link>
          </div>
        );
      })}
    </main>
  )
}

なんと、importしてやるだけ!!

こうすると画面に3つのサイトのリンクが表示されます。