Next.js– category –
-
Next.js
useSearchParams() should be wrapped in a suspense boundary
Next.js14でuseSearchParams()を使うと以下のようなエラーが出ました。 ✓ Linting and checking validity of types ✓ Collecting page data Generating static pages (0/12) [ ] ⨯ useSearchParams() should be wrapped in a suspense boundary at page &q... -
Next.js
Parsing error: DeprecationError: ‘originalKeywordKind’ has been deprecated since v5.0.0 and can no longer be used. Use ‘identifierToKeywordKind(identifier)’ instead.
Next.js13のtypescriptのバージョンをアップグレードしたら、 Parsing error: DeprecationError: 'originalKeywordKind' has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instea... -
Next.js
Next.js13のApp RouterでMaterial UI を使う
Material UIのバージョン5.14.0からNext.jsのApp Routerがサポートされたので、Material UIを使用するために"use client"を書く必要はありません。 このきじはこちらのgitリポジトリを参考にしています。 【muiをインストール】 まずはmuiをインストールし... -
Next.js
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.js
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
Next.jsでPrismaが実行したクエリの各種ログをコンソール表示する
Prismaでは実行したクエリの警告、エラーなどを次のようにコンソールに表示することができます。 Query: SELECT "public"."User"."id", "public"."User"."email", "public"."... -
Next.js
Next.jsを最小のイメージサイズでCloudRunにデプロイする
この記事ではNext.js13をCloudRunにデプロイすることを想定しています。 Next.jsのstandalone機能を使うと通常のビルドと比較して小さいサイズになります。経験上、だいたい半分ぐらいのビルドサイズになるので必ず使います。 const nextConfig = { ... ou... -
Next.js
Next.jsでPrismaを使ってデータベースを作る
この記事ではNext.jsでPrismaを使う方法をご紹介します。 Prismaを使うことでJSでデータベース作ったり、クエリを発行してデータを取得することができてとても便利です。 この記事ではPlatforms Starter KitとPrisma Examplesを参考にしています。 【prism... -
Next.js
next-seoを使ってNext.jsプロジェクトのSEOを管理する
この記事ではNext.jsでnext-seoを使う方法をご紹介します。next-seoはNext.jsのプロジェクトでSEOで必須となるタイトルタグやメタタグを管理するプラグインです。 Next.jsをインストール済みとして進めていくので、Next.jsのインストールがまだの方は「Nex... -
Next.js
[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...
12