プログラミング初心者のための入門ブログエンジニアが未来を切り開く。Next.jsでローカルのJSONファイルからデータの取得と表示この広告は、90日以上更新していないブログに表示しています。フレームワーク本日はNext.jsでローカルのJSONファイルからデータを読み取って表示する方法を示します。最後にサーバー側のレンダリングや静的Webサイトの生成などの追加機能に関して、Next.jsは非常に興味深いものです。これは、バックエンドをコーディングしたり、データベースのセットアップや接続に時間を費やしたりすることなく、小さなWebアプリをすばやく構築したい場合に非常に役立ちます。Next.jsの事前レンダリングNext.jsはいくつかの異なるデータ取得戦略を提供しています。それらは下記の通りです。・クライアント側のレンダリング(CSR)・サーバー側レンダリング(SSR)・静的サイトレンダリング(SSG)・増分静的再生(ISR)上記の中でNext.jsでは、静的生成とサーバー側レンダリングの2つの事前レンダリングがあります。その2つの違いは、ページのHTMLを生成するタイミングです。静的生成(SSG)静的生成には、データありとデータなしの2種類があります。Promiseを解決してデータをフェッチした後にHTMLが生成されます。静的生成は、ビルド時にHTMLを生成する事前レンダリング方法となっています。その後、事前にレンダリングされたHTMLが各リクエストで再利用されていきます。一つは、動的ページを使用しパスが外部データに依存する場合です。その場合、どの動的ルートをプリロードする必要があるかを伝えるためのgetStaticPaths関数を使用できます。動的ルートを使用するページを静的に事前レンダリングしている場合に使用されます。HTMLを生成する事前レンダリング方法となっています。これら2つのどちらかを選択していきますが、ほとんどのページで静的生成を使用します。クライアント側(CSR)のレンダリングでは、ページの初回ロードが少し遅くなります。サーバーとの通信は実行時に行われます。JSの伝統的なよくある方法でそれを行うことができ、クライアント側のデータフェッチでフックを使用し静的生成を使用できます。ページ制限Next.jsが同等に強力で使いやすい理由の1つは、ページの配信方法となります、Next.jsページの制限です。ページをレンダリングする前にデータをフェッチするオプションがありますが、基本的にページはReactコンポーネントとしてレンダリングされます。それらはアプリケーションレベルのコンポーネントにラップされます。Next.jsページのパターンに従って静的または動的なJSONページを生成するための簡単な方法がないということです。Next.jsアプリケーションでデータを取得したい場合はJSONとしてレンダリングするには、主に2つの方法がある事を先述で学んだはずです。ビルドごと(SSG)で更新されます。APIルートと呼ばれるものをサポートしています。そのAPIルートは、サーバー側で実行されユーザーにデータを返すメソッドとなります。静的ファイルサイトを構築する前に静的JSONファイルを生成し、それを静的アセットとして提供することができます。基本的にPrismaは使用しません。APIなどのデータベースを必要とするものであれば、JSでデータベースを作成したり、クエリを発行してデータを取得するのに役立つものです。ファイルから取得していきます。ファイルから供給されます。Next.jsを利用したアプリケーションを構築する過程で、多くの場合で内部APIルートファイルまたは外部APIからデータを取得する必要があることに気付くでしょう。Next.jsにはデータを取得するために使用できる3つの独自の関数があります。getStaticProps()データはビルド時にフェッチ(取得)され、クライアントのリクエストの前に利用可能となります。常にサーバー上で実行され、クライアント上では実行される事はありません。ページを静的生成(SSG)にできます。その結果、使用可能なすべてのデータフェッチメソッドの中で、GetStaticPropsが最速の読み込み時間を生成するので、データがクライアントに到達する前にレンダリングされるため、ページのSEOが飛躍的に向上します。ルートを使用してフェッチされます。Next.jsはこのgetStaticPathsによって提供されるすべてのパスを静的に事前レンダリングします。本番環境でのビルド中にのみ実行され、実行時には呼び出される事はありません。getStaticPathsはgetStaticPropsと一緒に使用されるのが最善となっていますが、getServerSidePropsと使用する事はできませんので注意して下さい。getServerSideProps()サーバー側レンダリング(SSR)として、外部データを取得するときに主に使用され、クライアントがページをロードするたびにデータが更新されるため、常に更新された情報を表示できます。クライアントの要求に応じてサーバーからデータを取得されます。getServerSidePropsはリクエストごとに実行されていきます。この関数ではデータがクライアントに到達する前にレンダリングされるためSEOを改善できます。JSONファイル自体は動的に生成する必要がありますが、静的にすることも可能という事です。Node.jsの組み込み機能であるため、サードパーティのパッケージを別途インストールする必要はありません。project-sample任意の名前でcreate-next-appのデフォルトテンプレートから始めることができます。data.jsonという名前の新しいファイルを作成します。例で使用するdata.jsonファイル内のJSONデータは下記になります。ご自身で用意下さっても構いません。APIを使用していきます。データの取得getStaticPropsでローカルAPIルートを呼び出す際にfetch()は使用しないでください。fetch()はネットワーク越しにJSONファイルを取得するためのものなのでローカルでは使用しません。外部APIからのフェッチは問題ございません。pages/index.jsのデフォルトのコードをすべて削除してから下記のように記述して下さい。}}getStaticPropsは、あるページからgetStaticProps(静的サイト生成)というasync関数をエクスポートすると、Next.jsはビルド時にgetStaticPropsが返す、Propsを使用してそのページをプリレンダリングされオブジェクトを返します。データはページコンポーネントにPropsとして渡されます。}}これは、エクスポートされたJSONのみが使用されます。リクエストから受け取ったデータをビルド時にサーバーでレンダリングしたい場合に特に便利です。'data.json');process.cwd()メソッドは、Node.jsプロセスの現在の作業ディレクトリを指定する文字列を返し、それを取得するために使用されるものです。それをfilePath変数に割り当てます。fsPromises.readFile(filePath);ファイルの読み込みは、fsPromises.readFile()メソッドを使用します。引数は、読み込むファイルの名前、または他の場所に保存されている場合はパス全体を保持する文字列、バッファ、URL、または変数名である必要があります。読み込んだJSONファイルをdata変数として割り当てます。JSON.parse(data)そして読み込んだJSONデータをJSON.parseメソッドでJSON形式で書かれた文字列をJavaScriptのJSONオブジェクトに変換しJavaScriptのオブジェクトを返します。objectDataをPropsとして渡してあげます。HomeコンポーネントでPropsを受けとり、map構文でそれぞれ処理を実行し表示させます。props.postLists;それでは、Next.jsアプリを起動し実行します。devfs.promises関数およびメソッドが分からない方はNode.jsのfsモジュールを学習してください。https://nodejs.dev/en/learn/the-nodejs-fs-module特にファイル操作などでは、fsモジュールはNode.jsで頻繁に使用する機能なのでなるべく扱えるようにしときましょう。下記の方法でも取得可能です。JSONファイルをインポートでロードしgetStaticPropsはオブジェクトとして返すのでそれをPropsとして渡してあげる単純な方法です。}}上記の出力を見て分かる通り、index.jsからアクセスしてもエラーがスローされる事なくオブジェクトとして渡されてるのが確認できます。本番用サーバーでもエラーがスローされる事なく表示されます。この方法は、Next.jsでローカルJSONファイルを取得するための方法としては正しいです、しかし、コード内の../data.jsonのパスは、JSONファイルがプロジェクトルートの直下にあることを想定している事が前提です。JSONファイルが他の場所にある場合は、パスを適切に変更する必要がありますので気をつけて下さい。Next.jsで静的JSONデータを取得する場合、必ずしもgetStaticPropsを使用しなければいけないという事ではありません。pages/api/data.jsonとして配置したとします、静的APIルートです。getStaticProps関数を使用するとエラーがスローされる可能性があります。その場合getStaticPropsは必要ありません、ビルド時にWebpackがJSONをバンドルするためです。getStaticPropsを使用した場合、json(data)をサーバーに渡すと、サーバーはHTMLを作成しクライアントにはjsonを渡す事はありません。サーバーはJSONデータを使用してデータを挿入し、キャッシュを作成します。使用しない場合、JSONファイルはキャッシュされずにクライアント側に挿入されるようになります。getStaticPropsの使用を推奨しますがgetStaticPropsを使用せずに、Next.jsで静的JSONデータを取得する場合の方法を示します。getStaticPropsを使用せずに静的JSONデータをローカルで取得import文でJSONデータを読み込む方法です。プロジェクト内にJSONファイルを作成します。/data/sample.jsonというファイルを作成します。下記のような形式でデータを用意します。description"}上記の作成したJSONファイルを読み込むには、import文を使用します。);}前述したように、JSONファイルをAPIエンドポイントとして利用することもできます。/pages/api/sample.jsというファイルを作成します。res.status(200).json(sampleData);}上記の例では、/api/sampleにリクエストが来た場合、sampleDataをJSON形式で返します。このAPIエンドポイントを使用して、クライアントサイドからJSONデータを取得することも可能です。使用せずにNext.jsで静的JSONデータをローカルで取得することができます。APIエンドポイントを使用する場合は、getStaticPropsを使用する場合と同様に、データの取得に時間がかかるため、パフォーマンスに注意する必要があります。クライアント側(CSR)でJSONを使用するか、サーバー側でJSONを使用するのか、それぞれどのアプローチを使用していくかは、完全にあなた次第です。最後にこれであなたはNext.jsでローカルのJSONファイルからデータを取得してレンダリングする方法を学習しました。これにより、比較的に小さなウェブサイトをほとんど労力をかけずに迅速に開発していくことが可能となります。大規模なプロジェクト構築の場合では、先述したようにMySQLやMongoDBまたは任意の種類のデータベースでセットアップし接続することをお勧めします。外部での取得方法は別途記事に致します。本日は以上となります。最後までこの記事を読んで頂きありがとうございます。この記事が気に入ったらブックマークして、他の方にも共有してください。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。