Next.js– category –
-
Next.jsでPrismaが実行したクエリの各種ログをコンソール表示する
Prismaでは実行したクエリの警告、エラーなどを次のようにコンソールに表示することができます。 Query: SELECT "public"."User"."id", "public"."User"."email", "public"."... -
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... -
[Next.js] Using axios to get data with SWR
I will show you how to use axios to get data in Next.js SWR. The API server is assumed to be Laravel.We also assume that Laravel is using Eloquent's API Resources when returning data. https://laravel.com/docs/8.x/eloquent-resources So, w... -
【Next.js】useSWR()でPOSTする
useSWR()を使ってデータを取得するには以下の方法で取得できました。 const commentsFetcher = (url: string): Promise<fetchCommentsReturnType> => axios(url).then((res) => res.data); const { data: comments, error:commentsError } = u... -
【Next.js】axiosを使ってSWRで取得する
Next.jsのSWRでデータを取得するときにaxiosを使った方法をご紹介します。 APIサーバーはLaravelを想定しています。また、Laravelでデータを返すときはEloquentのAPI Resourcesを使用しているものとします。 https://laravel.com/docs/8.x/eloquent-resour... -
How to use Next.js and Material-UI’s Link together
Next.js links and Material-UI links cannot normally be used together.However, with a little ingenuity, they can be used together. The following are the requirements for the Link component that we will create using Next.js and Material-UI... -
Use material-table in Next.js
Next.js and material-table are very easy to use and I use them a lot.However, they don't work well together, and material-table doesn't work straightforwardly with Next.js. There is a sticking point for using material-table in Next.js, a... -
Next.jsとMaterial-UIのLinkを併用する方法
Next.jsのLinkとMaterial-UIのLinkは通常併用できません。しかし、ちょっとした工夫でこれらを併用できます。 Next.jsとMaterial-UIのLinkを用いて作るリンクのコンポーネントの要件は次のとおりです。 リンクができるNext.jsのLinkが機能するMaterial-UI...
12