Next.js Next.jsを少しずつ理解していく15【API GET Request】 今回はNext.jsを使ってAPIエンドポイントを作成し、GET Requestを扱う方法について紹介します。 環境構築 まずは新しいプロジェクトを作成します。今回は「next-api」というプロジェクト名にしました。 プロジェクトの作成の仕方は以下の記事を参考にどうぞ。 プロジェクトディレクトリに移動したら、下記3... 10月 16, 2022
Next.js Next.jsを少しずつ理解していく14【SSR+CSR｜SSG+CSR】 今回はSSRとCSRを組み合わせてデータをフェッチする方法について紹介します。 この記事でやること 今回はユーザーの操作に応じて、表示する記事一覧ページの内容を更新できるページを実装していきます。 具体的には、ページの上部に用意したカテゴリ選択ボタンをユーザーがクリックし、クリックされたカテゴリに応じてCSR側でデータ... 10月 16, 2022
Next.js Next.jsを少しずつ理解していく13【CSR/クライアントサイドレンダリング】 今回はNext.jsのクライアントサイドレンダリング（CSR）について紹介します。 クライアントサイドレンダリング（CSR）の必要性 これまで、Next.jsの事前レンダリングが提供する2つのレンダリング型、SSG（静的サイトジェネレーター）とSSR（サーバーサイドレンダリング）について説明してきました。 事前レンダリ... 10月 13, 2022
Next.js Next.jsを少しずつ理解していく12【SSR/サーバーサイドレンダリング】 今回からはNext.jsの2つ目のレンダリング型である「SSR」について紹介します。 Next.jsのSSGとSSR Next.jsにはSSGとSSRという2種類のレンダリング型があることは、以前の記事で解説しました。 SSGとは、ビルド時にサーバー側で全てのページのレンダリングを行い、生成したHTMLなどのファイル... 10月 13, 2022
Next.js Next.jsを少しずつ理解していく11【ISR/Incremental Static Regeneration】 今回は、SSGの問題点を紹介しつつその解決策としてISR（Incremental Static Regeneration）の仕組みと使い方を解説します。 SSG/静的サイトジェネレーターの問題点 SSG（Static Site Generation/静的サイトジェネレーション）とは、アプリケーションのビルド時にすべての... 9月 19, 2022
Next.js Next.jsを少しずつ理解していく10【getStaticPaths】 今回はNext.jsの動的パラメーターを使用してページを作成する方法を紹介します。例えばブログ記事の一覧ページから任意の記事を選択すると、その記事（固有のID）に応じたページに遷移する。といった仕組を構築したいときに利用できます。 今回は上記の例の通り、簡単なブログサイトを作成しながら動的パラメータの使い方を解説して... 9月 11, 2022
Next.js SSG Next.jsを少しずつ理解していく9【コンポーネント】 今回はNext.jsのコンポーネントについて紹介します。使用方法はReactのそれと変わりませんので、サクッと紹介していきます。 Next.jsでコンポーネントを使用する 今回は前回までに作成したusers.jsファイルの内容の一部を、新たに作成するコンポーネントファイルに移行したいと思います。 まずはpre-ren... 9月 9, 2022
Next.js SSG Next.jsを少しずつ理解していく8【getStaticProps】 今回はNext.jsのgetStaticProps関数について紹介します。getStaticProps関数はNext.jsの中でもよく利用される関数の1つなので、しっかり使い方を覚えておきましょう。 Next.jsのgetStaticPropsとは Next.jsのgetStaticProps関数を利用すると、ページを... 9月 9, 2022
Next.js SSG Next.jsを少しずつ理解していく7【SSG/静的サイトジェネレーター】 今回はNext.jsのSSG（Static Site Generation/静的サイトジェネレーション）について紹介します。 Next.jsのSSGとは？（静的サイトジェネレーター） Next.jsのSSG（Static Site Generation/静的サイトジェネレーション）とは、アプリケーションのビルド時にすべ... 9月 9, 2022
Next.js Next.jsを少しずつ理解していく6【事前レンダリング】 今回はNext.jsの事前レンダリング（pre-rendering）について紹介します。ReactのCSRとNext.jsのSSR/SSGの、計3つのレンダリング型の違いと特徴について詳しく解説していきます。 Next.jsとReactの違い ReactとNext.jsの違いを「レンダリングのタイミング」に注目して一言... 9月 7, 2022
