Next.js

【React】UAParser.jsを利用したモバイル判定方法

2022年9月3日

UAParser.jsとはユーザーエージェント（User-Agent）からブラウザやエンジン、OS、CPU、デ…

Next.js(TypeScript)にJestを設定する方法

2022年7月20日

Next.jsアプリケーションにJestを導入する方法は3つあります。1 Rust Compilerを利用する…

EmotionをNext.js x TypeScriptの環境にインストールする手順

2022年4月23日

Emotionは比較的最近できたCSS in JSライブラリです。後発ということもあり多機能で使い勝手がよいと…

Next.js+TypeScript+自動コードフォーマットの環境構築手順

2021年11月4日

以下の仕様のNext.jsアプリケーションの作成手順について紹介します。 Create Next AppでNe…

Next.jsのSSR回避(クライアントサイドでのみ実行)の実装パターン集

2021年11月3日

Next.jsのページはデフォルトでPre-renderingです。ですので、今回はNext.jsでSSR…

【Next.js】dynamic import(動的インポート)の概要と使いどころ

2021年11月3日

dynamic import（動的インポート）について dynamic import（動的インポート）とは動的…

【React】4つの観点で理解するCSR・SSR・next/linkの挙動の違い

2021年10月31日

ReactアプリケーションにおけるCSR・SSR・next/linkの挙動の違いについて4つの観点で紹介をしま…

【Next.js】Warningが発生する誤ったCookieの使用例と改善方法

2021年10月29日

Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-si…

【Next.js】Hydration時にReact.hydrate()による警告が発生するケースとその解決方法

2021年10月29日

Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリス…

【Next.js】SSR/SGでブラウザ機能(Cookieなど)を活用する際の注意点

2021年10月26日

SSR/SGではレンダリング時にブラウザの機能を使えない具体例は以下の通りです。 Next.jsのページのレ…

【Next.js】ページのレンダリング種別(SSR/SG/ISR/Static)の決定・確認方法

2021年10月25日

Next.jsではページごと（pagesディレクトリ直下のコンポーネントごと）にレンダリングの種類を決められま…

【Next.js】SSRとSG(SSG)のPre-renderingの挙動の違い

2021年10月24日

Next.jsの公式ドキュメントによるPre-renderingの説明は以下の通りです。1 上記のプロセスを手…

【初学者向け】Next.jsのSSR/SG(SSG)/CSRに関する基礎知識

2021年10月24日

『SSR（Server-side Rendering）はサーバサイドでHTMLを生成する仕組み』『SG（Sta…

【Next.js】next/linkの画面遷移（CSR）から画面反映までの流れの図解解説

2021年10月23日

Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-si…

【図解】Next.jsのSSRが画面反映されるまでの具体的な流れ

2021年10月22日

Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-si…

NextでSSGアプリを作成し、CircleCIでS3に自動デプロイする方法

2021年3月21日

SSGとは静的なHTMLを事前に生成し、配信する方法です。 SSGではファイルの配置をするだけでアプリケーショ…