• ホーム
• Next.js

カテゴリー：Next.js

1. 

   【Next.js】「CSR」、「SSR」、「SSG」の違い

   08.13

   使い分け SEO リアルタイム更新 サイト再生成 初期ロード ページ遷移 サーバー負荷 用途 CSR × ○ × 遅い 早い SSR ○ ○ ○ 遅い…

   • Next.js
   • コメントを書く
2. 

   【Next.js】「CSR(UseSWR)」について

   05.16

   useSWRとは？ 「クライアントサイドレンダリング」の技術です。 「静的なページでSEO対策をしつつ、さらにリアルタイムにデータを取得する」と言うことを実現できます。 非同期なので少しラグがあった上で実行されます。公式ページ…

   • Next.js
   • コメントを書く
3. 

   【Next.js】ページ遷移について

   05.16

   リンク形式でページ遷移をさせたい場合 NextJsのLinkコンポーネントを使う。 ページ遷移を実現できるコンポーネントです。 [crayon-61794a6bcc364024855903/] 以下のように使います。 [crayo…

   • Next.js
   • コメントを書く
4. 

   【Next.js】「getStaticProps」、「Dynamic routes」について

   05.09

   getStaticPropsとは？ Next.js内（フロントエンド）で定義した関数が必ずバックエンドで実行される。 pages内でのみ使用可能 「npm run dev」の場合はリクエスト毎に実行される。 「n…

   • Next.js
   • コメントを書く
5. 

   【Next.js】「コンポーネント」一覧

   05.09

   Head [crayon-61794a6bcd060589846543/] 以下のように使います。タイトルが表示されます。 [crayon-61794a6bcd06f630537507/] Link ページ遷移を実現できるコンポー…

   • Next.js
   • コメントを書く
6. 

   【Next.js】導入

   05.08

   Next.jsプロジェクトのインストール [crayon-61794a6bcd930279646728/] コマンド npm run dev ローカルサーバーを起動する。以下のURLでアクセスすることができます。 [crayon-…

   • Next.js
   • コメントを書く
7. 

   【Next.js】「ISR(Incremental Static Regeneration)」について

   05.08

   ISR(Incremental Static Regeneration)とは？ ユーザーアクセスを起点として動的に静的コンテンツを更新してくれます。 「Stale while revalidation」と言うコンセプトがベースになっ…

   • Next.js
   • コメントを書く
8. 

   【Next.js】「Pre-render(HTML事前生成)」について

   05.08

   基本的に、Next.jsは全ページdefaultでHTMLを事前レンダリングしてくれます。 正確に言えば、同じ事前レンダリングでも以下のような種類があるので覚えておきましょう。 1.SSG SEOは意識しない。DocumentやH…

   • Next.js
   • コメントを書く
9. 

   【Next.js】概要

   05.08

   Next.jsとは？ Reactのフレームワーク SSG(Static Site Generation) 日本語で言えば「静的サイトジェネレーション」の略です。事前にHTMLを生成することでSEO対策になったり、高速でサイトを表示させ…

   • Next.js
   • コメントを書く