Next.js– category –
-
Next.jsからCloudTasksにタスクを登録する
Next.js13からCloudTasksにタスクを登録する際に、ハマったので記事にします。 事前準備 CloduTasksでキューを作成 サービスアカウントにタスク追加のためのロールを追加 サービスアカウントのメール、シークレットキーを環境変数に登録 プロジェクトID、C... -
Next.jsのuseSearchParamsの返り値をオブジェクトに変換
Next.jsのuseSearchParamsはgetAll(), keys(), values(), entries(), forEach(), toString()が用意されていますが、オブジェクトを返してくれるメソッドは用意されていません。 そのため、コンポーネントなどにパラメーターをオブジェクトとして渡したい場... -
Next.js14のAPIの返り値が更新されない
Next.js14のAPIのリクエストヘッダーが Cache-Control:no-cache となっていましたが、返り値がキャッシュされて更新されませんでした。 その解決方法を紹介します。 【原因: キャッシュコントロールしていなかった】 apiでキャッシュコントロールを何もし... -
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... -
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.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...
12