Next.jsでローカルのJSONファイルからデータの取得と表示 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はNext.jsでローカルのJSONファイルからデータを読み取って表示する方法を示します。 Next.jsの事前レンダリング ページ制限 セットアップ JSONデータの作成 データの取得 getStaticPropsを使用せずに静的JSONデータをローカルで取得 最後に サーバー側のレンダリングや静的Webサイトの生成などの追加機能に関して、Next.jsは非常に興味深いものです。 これは、バックエンドをコーディングしたり、データベースのセットアップや接続に時間を費やしたりすることなく、小さなWebアプリをすばやく構築したい場合に非常に役立ちます。 Next.jsの事前レンダリング Next.jsはいくつかの異なるデータ取得戦略を提供しています。 それらは下記の通りです。 ・クライアント側のレンダリング(CSR) ・サーバー側レンダリング(SSR) ・静的サイトレンダリング(SSG)
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。 ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。 そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。 実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。（blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています） デモサイトのコードはGitHubにアップ
JSONの代わりにYAMLを使う
JSONはいいですね。扱いやすくて。 でもコメントが書けないとか、ネストが深くなると可読性が悪くなるとか色々問題があります。 そういった問題を解決するためにJSON5やらCSONやらいろんなaltJSONが存在します。 使ったことはないけどコメントが書けるっていうだけでも全然違いますね。 ただ、自分はコメントはもちろん配列やらオブジェクトの記号([]とか{})も極力書きたくないし、なんならダブルクォーテーションやカンマも書きたくない。 そんなワガママを実現するためにYAMLをよく使います。 PHPのSymfonyとかを触ったことがある人には馴染みがあると思います。 YAMLとは「人間が読みやすいように最適化された、すべてのプログラミング言語のための標準的なデータシリアライゼーション」と公式サイトがおっしゃっております。 YAMLの書き方 記述方法はいくつかありますが、下記はよく使う書き方で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
