typescript– tag –

このようなテーブルを作ったとき、特定のユーザーと一緒にリレーション先のPostのデータもほしいときがよくあります。 model User { id String @id @default(auto()) @map("_id") @db.ObjectId posts Post[] } model Post { id String @id @defa...

この記事ではNext.js13をCloudRunにデプロイすることを想定しています。 Next.jsのstandalone機能を使うと通常のビルドと比較して小さいサイズになります。経験上、だいたい半分ぐらいのビルドサイズになるので必ず使います。 const nextConfig = { ... ou...

この記事ではNext.jsでPrismaを使う方法をご紹介します。 Prismaを使うことでJSでデータベース作ったり、クエリを発行してデータを取得することができてとても便利です。 この記事ではPlatforms Starter KitとPrisma Examplesを参考にしています。 【prism...

この記事ではNext.jsでnext-seoを使う方法をご紹介します。next-seoはNext.jsのプロジェクトでSEOで必須となるタイトルタグやメタタグを管理するプラグインです。 Next.jsをインストール済みとして進めていくので、Next.jsのインストールがまだの方は「Nex...

この記事ではreact-beautiful-dndを使って要素の順序をドラッグ＆ドロップで入れ替える方法をご紹介します。 react-beautiful-dndを使うと以下のデモのようにドラッグ＆ドロップで質問の順序を入れ替えることができます。 react-beautiful-dndはyarnまたは...

この記事ではSWRのuseSWRInfinite()を使って無限スクロールの実装方法をサンプルコードを使ってご紹介します。 サンプルコードのデモは次の通りです。 このデモの仕様は データは2件づつ取得一番下の「読み込み中」が表示されたのをトリガーとして次のデー...

この記事ではテキスト内にあるツイッターのURLやyoutubeのURLをもとにプレビューを表示する方法をサンプルコード付きでご紹介します。 サンプルコードのデモは次の通りです。 デモではテキストエリアに入力されたツイッターのURLやyoutubeのURLを1つづつ表...

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で複数の画像を選択してアップロードする方法をご紹介します。 後でご紹介するサンプルコードでは material UI v5axiostypescript を使用しています。 ご紹介するサンプルコードはコメントに画像を付けて投稿するフォームを想定していま...

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...