カテゴリー：Next.js
-
09.16
【Next.js】デプロイ先検討
Saas Vercel ISRや、Image Optimization、CDNでの静的ファイルキャッシュといった機能を設定なしで使うことができるのでNext.js動かすならこれを使った方が楽。 というか、Next.jsの…
-
09.02
【Next.js】サーバーコンポーネントについて
サーバーコンポーネントの特徴 サーバーでレンダリングされるのでjsはクライアントに送られない。 実装したJSのソースだったりとか、利用しているnpmパッケージなどすべてクライアントに送られません。あくまでサーバーでJSを実行し…
-
09.01
【Next.js】App Routerについて
Next.js13から登場したApp Routerという機能について解説していきます。 なぜこの技術が出てきたのか？ 今までのNext.jsはデータ取得はサーバーサイド、レンダリングはクライアントサイドという形で明確に役割が分…
-
08.30
【フロントエンド】2023年9月現在の技術選定
Next.js create-next-appは使っていけばよい。 Nuxt.jsとNext.jsでrouterかlinkがどうとか言っていたな。 App Routerとは？ Next.js13から登場した新しいル…
-
SSG(Static Site Generation)とは？ 事前にサーバーサイドでデータを取得するのでブラウザのJavaScriptが無効になっていてもデータを読み込むことができます。 初回のビルドを前もってやっておくのでページの…
-
Next.jsではクライアントサイドとサーバーサイドの処理を扱うことができるのでApolloClientを使う場合は処理の切り分けが重要になってきます。 サーバーサイドで実行される箇所（SSG、ISR：getStaticProps、get…
-
ReactやNext.js(バージョン9.4から使えるようです。)には標準で環境変数機能が備わっています。 環境変数設定ファイル 変数の定義方法 環境変数の反映にはアプリの再起動が必要になります。なお、クライアントに送ら…
-
01.20
【Next.js】「エラーハンドリング」
Error Boundary コンポーネント内で発生する特定のエラー（実行時エラーなど）しかcatchしてくれない。以下のエラーは捕捉しないので、現状はあまり使い道はないかもしれない。 イベントハンドラ内で発生したエラー …
-
ディレクトリ名説明.nextプロジェクト作成時にはなく実行すると生成されます。この中にプロジェクトから生成されたWebアプリのファイル類が保存されます。pagesここで指定したファイル名はパス名になる。（_app以外）└_app.tsxこ…
-
01.16
【Next.js】各種コマンドについて
next dev 開発時にはこれを実行します。リクエストの都度サーバーサイドでページの生成(SSG)、クライアントサイドでレンダリング(CSR)が実行されるのでページの取得はページ遷移は遅くなります。 具体的な挙動 「ge…
