Next.js– category –
-
Next.js13のApp RouterでMaterial UI を使う
Material UIのバージョン5.14.0からNext.jsのApp Routerがサポートされたので、Material UIを使用するために"use client"を書く必要はありません。 このきじはこちらのgitリポジトリを参考にしています。 【muiをインストール】 まずはmuiをインストールし... -
Next.js13のapp routerのapiにPOSTしたbodyデータを取得する
postしたデータはconst res = await request.json();することによってbodyデータを取得することができる。 import { NextResponse, NextRequest } from "next/server"; export async function POST(request: NextRequest) { const res = await r... -
Next.js13のapp routerのapiでgetパラメータを取得
getパラメータはrequest.nextUrl.searchParamsで取得できる。 https://nextjs.org/docs/app/api-reference/functions/next-request#nexturl import { NextResponse, NextRequest } from "next/server"; import prisma from "@/lib/prisma&q... -
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...
12