getServersideProps

NextJS13のappディレクトリが便利そうですが変更点が多いようです。いざって時に使えるようにSSRの基本的な挙動を確認していきます。 ドキュメントはこちらに記載されてますが、まだ出来てないページもあります。 自分の手元のNextJSは13.2.3です。 セットアップ 最新のcreate-next-appを実行してインタラクティブに設定を入力していきます。設定値はこんな感じでappディレクトリをYesにして他はデフォルトのままにします。 ✔ What is your project named? … my-app ✔ Would you like to use TypeScript wit…

ポケモン SV 発売日から一ヶ月以上経過していますがポケモン SV をやっていますか？特にランクマッチ。育成したけどボックスに放置したまま、育成したはずなんだけど全然使えていない、そんなことがあると思います。そのようなことを防止するためにブックマークしやすくかつツイートしたくなる育成ポケモンのメモサイトを開発、リリースしました。 ポケモン育成カードジェネレーター ポケモン育成カードジェネレーター 今回はこちらについて紹介します。 使い方はシンプルです。 上記の URL にアクセスし、フォームを入力して作成するボタンをクリック(タップ)するだけです。 遷移するページに育成情報からカードが作成され…

こんにちは。Xイノベーション本部ソフトウェアデザインセンターの陳です。 この記事ではNext.jsのgetServerSidePropsの利用でハマったことについて話します。 Server-side Rendering（SSR）とgetServerSideProps Server-side Renderingはリクエストごとにサーバー側でレンダリングを行い、HTMLページを生成する機能です。 頻繁に変更されるデータを画面に表示させたい時はServer-side Renderingを利用します。Server-side Renderingを実現するには、サーバー側からデータを受け取る処理を行うge…

iframeでPDFを表示すると、iPhoneやiPadでは1枚目しか表示されない問題がある。これはstackoverflowや他のサイトでも報告されているとおりブラウザのバグっぽい。 iPhoneだとPDFの1枚目しか表示されない PCだと1枚目以降も表示される 対応策 PDF.jsを利用する BLOLオブジェクトURLで表示する Google Docs Viewerを利用する 今回は「2. BLOLオブジェクトURLで表示する」方法を紹介します。 一応「3. Google Docs Viewerを利用する」についても軽く紹介しておくと、下記のようなURLにすればPDFが表示できます。 ht…

Next.js に既存のReactアプリを移植してみたらビルド時にFirebase Admin SDK で次のエラーが発生した error - ./node_modules/gcs-resumable-upload/node_modules/google-auth-library/build/src/auth/googleauth.js:xxx:0 Module not found: Can't resolve 'child_process' 調べると、Firebase Admin SDKはサーバーサイドで利用するモジュールにもかかわらず、フロントエンド側で呼び出していることが原因だとわかった…

Next.jsでは、バックエンドからデータを取ってきて、それを使用したページを表示するとき（getServerSidePropsとかですね）、 データを取ってくる前に当然といえば当然だがページの表示自体はされてしまうので、 データを入れる予定の定数だったり変数はundefinedになる。 つまり大雑把にするとこういう感じ↓ ①ページを表示する（componentを読み込む→pageで構成する→表示されるの順） ②データを取ってきて格納する ③ページを表示する なので、①の時点でundefinedの考慮がされていないと、undefinedとか言う文字列がそのまま表に出てきてしまうのだった。こうい…

用語 Pre-rendering 日本語にすれば、プリレンダリング、事前レンダリングかな？ 事前にレンダリングする、つまり、前もってHTMLを生成しておくこと。 Data Fetching 文字のまま。データをフェッチするという意味。 つまり、データを取り込む、どこかからデータをとってくるといった感じ。 4-1. Pre-rendering and Data Fetching 最終的にブログを作成したいが、現時点ではブログのコンテンツがない状態 このレッスンでは、外部のブログデータをアプリに取り込む方法を学ぶ このチュートリアルでは、ブログのコンテンツをファイルシステムに格納する コンテンツが…

Next.jsの4つのレンダリング手法について 静的サイト生成(SSG: Static Site Generation) ビルド時にAPIを呼び出しデータを取得、ページを描画して静的ファイルとして生成する 生成した静的ファイルはビルド結果に保持され、ページアクセス時にはその静的ファイルをクライアントに送る メリット 初期描画が高速(静的ファイルをクライアントに渡すだけ) SEOに対して有効 デメリット データ取得がビルド時のみで、古いデータが表示される 使い時 ビルド後に表示内容が変わらないページ 初期描画後にデータを取得・表示するページ クライアントサイドレンダリング(CSR: Client…

Next.jsのアプリケーションで外部ページにリンクする方法を疑問に思っている方もいらっしゃるかと思います。 それを行うのは実際には非常に簡単ですが、組み込みのLinkコンポーネントについて少し混乱するかもしれません。 当記事では、外部URLを指すリンクを追加する方法を紹介します。 Linkコンポーネント 外部リンク 外部URLへのリダイレクト 最後に Linkコンポーネント Next.jsでは、組み込みのLinkコンポーネントにアクセスできます。 このコンポーネントを使用して、外部Webサイトへのリダイレクトを実装できるのではないかと考えたことがあるかもしれません、実際のところ属性指定なしの…

Next.jsのgetServerSideProps等でfetch APIを使用してSSRする場合に、queryパラメータを扱う方法を説明します。 実装 query-stringというNPMライブラリを使用します。 query-stringを使用することで、安全にqueryパラメータを生成することができます。 import queryString from 'query-string'; export async function getServerSideProps(context) { // contextからqueryを取得します const { query } = context; /…

本日はNext.jsでローカルのJSONファイルからデータを読み取って表示する方法を示します。 Next.jsの事前レンダリング ページ制限 セットアップ JSONデータの作成 データの取得 最後に サーバー側のレンダリングや静的Webサイトの生成などの追加機能に関して、Next.jsは非常に興味深いものです。 これは、バックエンドをコーディングしたり、データベースのセットアップや接続に時間を費やしたりすることなく、小さなWebアプリをすばやく構築したい場合に非常に役立ちます。 Next.jsの事前レンダリング Next.jsはいくつかの異なるデータ取得戦略を提供しています。 それらは下記の通…

本日はNext.js でwindowオブジェクトにアクセスするいくつかの方法を初学者様に解説していきます。 NextJSでwindowが定義されていないのはなぜですか? Next.jsでウィンドウReferenceErrorを修正するには？ useEffectフックを使用する 型のチェック globalThisプロパティを使用する 最後に Next.jsを使用するときに遭遇する可能性のある非常に一般的なエラーは、windowオブジェクトにアクセスした際に返されるエラーです。 Next.jsではwindowは定義されておりません。 Next.jsアプリで HTML DOMからwindowオブジェ…