PHP Laravelの学習に際し、ReaDoubleを読み進めていく中で出会った「単語、技術、考え方」などについて、個人的に関心を持ったトピックを中心に取り上げていきます。 本シリーズは、ReaDoubleの補足資料的に利用するのがおススメです。 参照するReaDouble 設定 9.x Laravel 対象読者 ...

PHP Laravelの学習に際し、ReaDoubleを読み進めていく中で出会った「単語、技術、考え方」などについて、個人的に関心を持ったトピックを中心に取り上げていきます。 本シリーズは、ReaDoubleの補足資料的に利用するのがおススメです。 参照するReaDouble インストール 9.x Laravel 対...

今回は、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...