Next.js– tag –

Prismaでは実行したクエリの警告、エラーなどを次のようにコンソールに表示することができます。 Query: SELECT "public"."User"."id", "public"."User"."email", "public"."...

この記事では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...

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

この記事ではSWRのuseSWRInfinite()を使って「もっと見る」機能の実装方法をサンプルコードを使ってご紹介します。 サンプルコードのデモは次の通りです。 このデモの仕様は 1ページ目から取得1ページあたり2枚の写真ボタンをクリックすると次のページの写...

useSWR()を使ってデータを取得するには以下の方法で取得できました。 const commentsFetcher = (url: string): Promise<fetchCommentsReturnType> => axios(url).then((res) => res.data); const { data: comments, error:commentsError } = u...

Next.jsのLinkとMaterial-UIのLinkは通常併用できません。しかし、ちょっとした工夫でこれらを併用できます。 Next.jsとMaterial-UIのLinkを用いて作るリンクのコンポーネントの要件は次のとおりです。 リンクができるNext.jsのLinkが機能するMaterial-UI...

Next.jsとmaterial-tableはとても使い勝手がいいので僕はよく使います。しかし、これらは相性が悪く、Next.jsでmaterial-tableは素直に動いてくれません。 Next.jsでmaterial-tableを使用するにはハマりポイントがあり、以下のエラーが出ます。 TypeError:...