はじめに

Next.js TypescriptでWebアプリを開発するさいに調べたことをまとめます。

基礎

Nextの特徴的であるSSRレンダリング、ページングやスタイルの基本知識、useStateとuseEffectを用いた画面更新など開発で必要になることがわかりやすくまとまっている。
公式チュートリアルをみたとは以下の記事で確認するほうがいい。

アプリケーションのあらゆる場所からアクセスできるグローバル状態オブジェクトを管理する方法。

interfaceを用いて変なところで拡張されたくないからTypeを使用した。

interfaceでできることが大体typeでもできるし、typeのほうが表現できる範囲が広いし、知らないうちに拡張されたくないから最初からtypeでよいということがtype派の理由です。

export defaultの場合は、変数や定数、関数などの処理を、１つの機能として渡します。いわゆるモジュールです。
exportの場合は変数や定数を複数渡すことができます。

パラメータをオプションにしたい場合は、構造体などで『?』を付けて指定する。

CORSとは、オリジン間リソース共有。オリジンが異なるもので通信しようとするとCORSエラーで引っかかる。
オリジンとは、リソース自身のURLの「スキーム」「ホスト」「ポート」の3つの組み合わせ。
別記事にまとめる。

Next.jsではGETメソッドを使用するとき、SWRの仕様が推奨されている。
ローディング、通信エラー、データ取得の状態を簡単に表すことができて便利。

公式

以下記事はSWRの使い方、メリットがわかりやすくまとまっている。

以下記事はNext.jsのSSGの仕組み、SWRの使い方を同時に理解することができる記事。

mutateはswrで同じデータを再度取得するときに使用する。

ReactアプリとGolangAPIサーバーとのJWT認証の実装についてまとまった記事
認証機能の実装については別記事にまとめる。

全ページで共通のメッセージダイアログを適宜する方法