TypeScriptとReact/Next.jsでつくる実践webアプリケーション開発をやっているが、Nextの話になってきてから分からない箇所が多く困惑しているが、その中での調べたことや調べても分からないことを記す。
本書のSSGによるページの実装で、ビルド時に実行されるgetStaticPropsという機能がある。
この名称の関数をexportすることによってビルド時に実行され、それをもとにサーバーはクライアントへ描画すべき初期レンダリングするページを返す。
性質上非同期関数となる。
静的サイト生成の名の通り、ビルドの際にあらかじめ表示する内容やデータを保存しておくわけだ。
型としてはGetStaticPropsをimportし使用するのだが、どう試行錯誤しても型エラーが発生する。
ジェネリックの型は複雑に見えたが、どうやら2つ以上の引数を型として受け取るらしい。
が、本書ではデータを取得する型、つまりひとつだけしか引き渡していない。
そもそもどうやら本書が出た時点でNextはv12、現在はv14となり変更点もあるのだろう。ファイル構成もpagesやstylesがなくなり、いまはappディレクトリへ一本化されているなど素人目に見ても変化が見て取れた。
まずGetStaticPropsの型は以下の通り。
type GetStaticProps<Props extends { [key: string]: any; } = { [key: string]: any; }, Params extends ParsedUrlQuery = ParsedUrlQuery, Preview extends PreviewData = PreviewData> = (context: GetStaticPropsContext<Params, Preview>) => Promise<GetStaticPropsResult<Props>> | GetStaticPropsResult<Props>
オブジェクトを引数に受け取り、それをもとにしたPromiseオブジェクトを返す。ふたつめは何やら書いてあるが、変数を見てみると情報を取得してくるURLなどを受け取るのだろうか。
公式にはオプションがあり、それがこのparamsに入ると思われる。
データ取得: getStaticProps | Next.js
ParsedUrlQueryはおそらく組み込みのインターフェイスだろうか。stringかstringの配列らしいので、やはりURLなのだろう。
ParsedUrlQuery | typescript - v3.7.7
今日はいったん寝るため明日以降にするが、どこかデータを安全にとってこれる無難なサイトでも探してみるか。
ただ、zennなどでは型をそのまま割り当ててやるだけで良いという記事も大量に見つかったのだが、変更がきたのだろうか。
ここまでいって戻ってを繰り返すなら一度公式リファレンスを通して読んでみるのもよいのだろう。
ほかにもsatisfies演算子というものがあるらしく、式の後にsatisfies 型とつけることで、型推論のようなことができるらしい。
ただ当然、通常の型割り当てがだめだったのでこちらもだめだった。
nextの機能はさておきいったん続きをやろうかと思ったんだけども、そもそも子コンポーネントへ受け渡しができない。
intrinsicAttributes & がどうこうとか出てくる。
グローバルな型定義ファイルで設定してインポートしてやるとか、とかく記事は出てきても何がどうこうというのはない。
nextの機能なら仕方ないと割り切って進められたが、これはTSのエラーなのでいずれまた出会うであろう。ここで倒せないのが残念である。
ほかの方もおっしゃっていたが、TSはありがたいけどReactと合わさるととたんに難しくなる、と。
厳格なTSの運用は、非常に難しいように感じる。あくまで型チェックだけでも良いのかも…。
あるいはTSに絞った本などで勉強をするか。幸いにも信頼できる方の本を買ってはいるが、ただ、Reactのサポートもしてくれる技術書があればもっと良いのだが。
本書は1年半前ということで多少前くらいの感じだったが、こうしてフロントエンドの技術の進歩は早い。テンプレートフラグを利用してnextプロジェクトを作ったらファイル構成が違うわ、おそらく型が必要になるわ、てんやわんやである。
本書はまだ半分程度しかやっておらず、Reactも知っている部分をなぞっただけ、Nextの冒頭から参考にならなさそうと、このまま続けるか悩むところである。
できない部分は飛ばし、参考になりそうなところをやりたいが……。
少なくともSSGとしてビルドすることには失敗したが、少なくとも通常のやり方であればビルドはできるため、本書でもいろいろと身になる部分があると信じて続けたい。
しかし、本書だけにかかりきりになるわけにもいかないため、他の書籍とも平行せねば。
