typescript– tag –
-
Prismaでリレーション付きの型を取得する
このようなテーブルを作ったとき、特定のユーザーと一緒にリレーション先のPostのデータもほしいときがよくあります。 model User { id String @id @default(auto()) @map("_id") @db.ObjectId posts Post[] } model Post { id String @id @defa... -
Next.jsを最小のイメージサイズでCloudRunにデプロイする
この記事ではNext.js13をCloudRunにデプロイすることを想定しています。 Next.jsのstandalone機能を使うと通常のビルドと比較して小さいサイズになります。経験上、だいたい半分ぐらいのビルドサイズになるので必ず使います。 const nextConfig = { ... ou... -
Next.jsでPrismaを使ってデータベースを作る
この記事ではNext.jsでPrismaを使う方法をご紹介します。 Prismaを使うことでJSでデータベース作ったり、クエリを発行してデータを取得することができてとても便利です。 この記事ではPlatforms Starter KitとPrisma Examplesを参考にしています。 【prism... -
next-seoを使ってNext.jsプロジェクトのSEOを管理する
この記事ではNext.jsでnext-seoを使う方法をご紹介します。next-seoはNext.jsのプロジェクトでSEOで必須となるタイトルタグやメタタグを管理するプラグインです。 Next.jsをインストール済みとして進めていくので、Next.jsのインストールがまだの方は「Nex... -
react-beautiful-dndで順序をドラッグ&ドロップで入れ替える
この記事ではreact-beautiful-dndを使って要素の順序をドラッグ&ドロップで入れ替える方法をご紹介します。 react-beautiful-dndを使うと以下のデモのようにドラッグ&ドロップで質問の順序を入れ替えることができます。 react-beautiful-dndはyarnまたは... -
SWRのuseSWRInfinite()を使って無限スクロールを実装する
この記事ではSWRのuseSWRInfinite()を使って無限スクロールの実装方法をサンプルコードを使ってご紹介します。 サンプルコードのデモは次の通りです。 このデモの仕様は データは2件づつ取得一番下の「読み込み中」が表示されたのをトリガーとして次のデー... -
テキスト内のURLのプレビューを表示する
この記事ではテキスト内にあるツイッターのURLやyoutubeのURLをもとにプレビューを表示する方法をサンプルコード付きでご紹介します。 サンプルコードのデモは次の通りです。 デモではテキストエリアに入力されたツイッターのURLやyoutubeのURLを1つづつ表... -
Uploading multiple images using react.
In this article, we will show you how to select and upload multiple images in react. In the sample code shown later, we will use the material UI v5axiostypescript in the sample code I will show later. This sample code assumes a form wher... -
reactで複数の画像をアップロードする
この記事ではreactで複数の画像を選択してアップロードする方法をご紹介します。 後でご紹介するサンプルコードでは material UI v5axiostypescript を使用しています。 ご紹介するサンプルコードはコメントに画像を付けて投稿するフォームを想定していま... -
Cannot invoke an object which is possibly ‘undefined’.
In this article, I will show you how to solve the problem of "Cannot invoke an object which is possibly 'undefined'. In this article, I will show you how to solve the problem when you get the error "Cannot invoke an object which is possi...
12