ようこそ

Hoshico Notes

日々の開発で学んだことや技術的な備忘録を綴っています。

Next.jsのmiddlewareに関して

今回はNext.jsのmiddlewareに関しての記事になります。本記事は Next.js 13 以降の App Routerを前提として解説しています。 1.Next.jsのmiddlewareでできること Next.jsのmidd...

Next.js

こちらは前回の記事のフロント側の実装になります。ポイントとしては、 ①Googleログイン後にid_tokenとrefresh_tokenを取得する ②id_tokenが有効期限(1時間)を過ぎていた場合はrefresh_tokenを...

TypeScriptNext.js

最近はNext.jsにおいてPages RouterではなくApp Routerを使う様になってきましたので今回は以前作ったNext.js用のスニペットをApp Router仕様に変更していきたいと思います。ちなみにですがスニペットに関...

Next.jsReactTypeScript

前回に引き続き、今回はReactのonchangeの型に付け方についてもまとめていこうと思います。 (1) changeEventの基本 changeEventの主な使用ケースとしてはinput要素(inputタグ)やselect要素(se...

TypeScriptNext.jsReact

今回はNext.jsでファイルのファイルを選択選択し、選択されたファイル名を表示させる実装についての記事になります。まずは今回の実装の要件をまとめておきたいと思います。 ①画像ファイル(jpeg/jpg/png)を選択、登録できるようにし...

TypeScriptNext.jsReact

今回は繰り返し使用するようなコンポーネントの中でReact Hook Formを使用する際のポイントをまとめていきます。 ※ MUIはv5 / react-hook-form v7 になります (1)イメージ図下の画像のように(親)コンポ...

TypeScriptReactNext.js

このページはNext.jsに関するメモ(基本的なこと)のページ。随時更新予定・アプリケーション作成 npx create-next-app <アプリ名> --typescript ・pages/api/hello.tsの型 ...

Next.js