今回は、SSGの問題点を紹介しつつその解決策としてISR（Incremental Static Regeneration）の仕組みと使い方を解説します。 SSG/静的サイトジェネレーターの問題点 SSG（Static Site Generation/静的サイトジェネレーション）とは、アプリケーションのビルド時にすべての...

今回はNext.jsの動的パラメーターを使用してページを作成する方法を紹介します。例えばブログ記事の一覧ページから任意の記事を選択すると、その記事（固有のID）に応じたページに遷移する。といった仕組を構築したいときに利用できます。 今回は上記の例の通り、簡単なブログサイトを作成しながら動的パラメータの使い方を解説して...

今回はNext.jsのコンポーネントについて紹介します。使用方法はReactのそれと変わりませんので、サクッと紹介していきます。 Next.jsでコンポーネントを使用する 今回は前回までに作成したusers.jsファイルの内容の一部を、新たに作成するコンポーネントファイルに移行したいと思います。 まずはpre-ren...

今回はNext.jsのgetStaticProps関数について紹介します。getStaticProps関数はNext.jsの中でもよく利用される関数の1つなので、しっかり使い方を覚えておきましょう。 Next.jsのgetStaticPropsとは Next.jsのgetStaticProps関数を利用すると、ページを...

今回はNext.jsのSSG（Static Site Generation/静的サイトジェネレーション）について紹介します。 Next.jsのSSGとは？（静的サイトジェネレーター） Next.jsのSSG（Static Site Generation/静的サイトジェネレーション）とは、アプリケーションのビルド時にすべ...

今回はNext.jsの事前レンダリング（pre-rendering）について紹介します。ReactのCSRとNext.jsのSSR/SSGの、計3つのレンダリング型の違いと特徴について詳しく解説していきます。 Next.jsとReactの違い ReactとNext.jsの違いを「レンダリングのタイミング」に注目して一言...

今回はNext.jsのナビゲーション機能について紹介します。”Next.jsの”といったものの、ナビゲーション機能の実現にはlinkパッケージを用いるので使い方はReactと同じです。 Next.jsのプロジェクトを作る （環境構築が完了している人は次章「その①」に進んでください） Next.jsの環境構築については以...

今回は、今後の学習に活用するNext.jsの環境構築の手順を紹介します。Next.jsを導入するにはお手元の環境にNode.jsがインストールされていることが前提となります。 Node.js、WSLなどのセットアップについて 本記事ではNode.jsのインストール方法については解説していません。その他、Windows...

今回はNext.jsの構成ファイルについて紹介します。紹介しきれていないものについては今後加筆予定です。 現段階では、今後のプロジェクトで活用する重要度の高いファイルに絞って紹介しています。 Next.jsの構成ファイルを把握する create-next-appで生成されたファイルの構成を、よく使用するものを中心に確認...

今回はNext.jsのルーティング機能について紹介します。Next.jsはpagesディレクトリのファイル・ディレクトリ構成がそのままルーティングに対応しています。 この記事では、基本のルーティング、ネストルーティング、ダイナミックルーティング、ネストダイナミックルーティング、ルーティングの取得について解説しています。...