はじめに
next.jsをbuildした際にエラーが出て、buildできませんでした。
いくつかエラーが出たので。その解決方法についてまとめたいと思います。
①Type error: Route "app/api/qiita/route.ts" has an invalid "POST" export:
事象
next.jsでapi/qiita/route.tsにAPIを作成しました。
その際に、下記のように引数を二つ設定していましたが、その部分でエラーが出ていました。
import { NextApiResponse } from "next";
import { NextResponse } from "next/server";
export async function POST(req: Request, res: NextApiResponse) {
解決方法
POSTの際にはresの引数を定義しなくても良いみたいでした。
なので、下記のように修正しました。
import { NextApiResponse } from "next";
import { NextResponse } from "next/server";
export async function POST(req: Request) {
②Type '{ id: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]
事象
app/blogs/[id]/page.tsxにparamsでidを受け取るように定義していましたが、その部分でエラーが発生しました。
$ npm run build
> build
> next build
▲ Next.js 15.1.3
- Environments: .env.local
Creating an optimized production build ...
🌼 daisyUI 4.12.23
├─ ✔︎ 2 themes added https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project: https://opencollective.com/daisyui
✓ Compiled successfully
Linting and checking validity of types ..Failed to compile.
app/blogs/[id]/page.tsx
Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Static worker exited with code: 1 and signal: null
export default async function Page({ params }: { params: { id: string } }) {
const { id } = await params;
解決方法
next.js15にアップデートされたことによるエラーのようでした。
以前まではparamsは同期処理で受け取っていたのですが、next.js15からは非同期で受け取るようになったようです。
そのため、型定義を以下のように修正しました。
Promise<>を追加。
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
参考
③TypeError: fetch failed
事象
buildの際に、`TypeError: fetch failedというエラーがでました。
ローカルでは問題なくfetchできていたので、かなり悩まされました。
$ npm run build
> build
> next build
▲ Next.js 15.1.3
- Environments: .env.local
Creating an optimized production build ...
🌼 daisyUI 4.12.23
├─ ✔︎ 2 themes added https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project: https://opencollective.com/daisyui
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11576:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async h (/home/user_name/nextjs-dev/tech-blog/.next/server/app/page.js:1:5315)
Export encountered an error on /page: /, exiting the build.
⨯ Static worker exited with code: 1 and signal: null
解決方法
調べていると同じようなエラー記事が見つかりました。
どうやら、fetchで取得している部分には以下の記述を入れないとbuildできないようでした。
export const dynamic = "force-dynamic"; //動的にレンダリングする
export const fetchCache = "force-no-store"; // 常に最新のデータを取得する
ただし、動的レンダリングやキャッシュ無効化は、パフォーマンスに影響する場合があるので注意が必要です。
おわりに
以前とは違うバージョンを使用する際は、やはりエラーに悩まされます。
この記事がどなたかの役に立てば幸いです。