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つのサイトのリンクが表示されます。