はじめに
Next.js TypescriptでWebアプリを開発するさいに調べたことをまとめます。
基礎
Next.js
Next.jsの基本がまとまった記事
Nextの特徴的であるSSRレンダリング、ページングやスタイルの基本知識、useStateとuseEffectを用いた画面更新など開発で必要になることがわかりやすくまとまっている。
公式チュートリアルをみたとは以下の記事で確認するほうがいい。
命名規則
ReactContext
アプリケーションのあらゆる場所からアクセスできるグローバル状態オブジェクトを管理する方法。
TypeScript
コーディング規約
TypeScriptで使用する型がまとまった記事、わかりやすかった
interfaceとTypeの違い
interfaceを用いて変なところで拡張されたくないからTypeを使用した。
interfaceでできることが大体typeでもできるし、typeのほうが表現できる範囲が広いし、知らないうちに拡張されたくないから最初からtypeでよいということがtype派の理由です。
export defaultとexportの違い
export defaultの場合は、変数や定数、関数などの処理を、１つの機能として渡します。いわゆるモジュールです。
exportの場合は変数や定数を複数渡すことができます。
メモ
パラメータをオプションにしたい場合は、構造体などで『?』を付けて指定する。
APIとの通信
axiosを用いたGET,POST,PUT,DELETEの基本
CORS
CORSとは、オリジン間リソース共有。オリジンが異なるもので通信しようとするとCORSエラーで引っかかる。
オリジンとは、リソース自身のURLの「スキーム」「ホスト」「ポート」の3つの組み合わせ。
別記事にまとめる。
SWR
Next.jsではGETメソッドを使用するとき、SWRの仕様が推奨されている。
ローディング、通信エラー、データ取得の状態を簡単に表すことができて便利。
公式
以下記事はSWRの使い方、メリットがわかりやすくまとまっている。
以下記事はNext.jsのSSGの仕組み、SWRの使い方を同時に理解することができる記事。
mutateはswrで同じデータを再度取得するときに使用する。
JWT認証
ReactアプリとGolangAPIサーバーとのJWT認証の実装についてまとまった記事
認証機能の実装については別記事にまとめる。
開発で参考にした記事
入力フォームのバリデーション機能
メッセージダイアログの表示方法
全ページで共通のメッセージダイアログを適宜する方法
その他
正規表現