Next.js– category –

Material UIのバージョン5.14.0からNext.jsのApp Routerがサポートされたので、Material UIを使用するために"use client"を書く必要はありません。 このきじはこちらのgitリポジトリを参考にしています。 【muiをインストール】 まずはmuiをインストールし...

postしたデータはconst res = await request.json();することによってbodyデータを取得することができる。 import { NextResponse, NextRequest } from "next/server"; export async function POST(request: NextRequest) { const res = await r...

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

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

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

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

Next.jsのSWRでデータを取得するときにaxiosを使った方法をご紹介します。 APIサーバーはLaravelを想定しています。また、Laravelでデータを返すときはEloquentのAPI Resourcesを使用しているものとします。 https://laravel.com/docs/8.x/eloquent-resour...