1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

next.jsのbuild時に出たいくつかのエラーの解決方法

Last updated at Posted at 2025-01-22

はじめに

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"; // 常に最新のデータを取得する

ただし、動的レンダリングやキャッシュ無効化は、パフォーマンスに影響する場合があるので注意が必要です。

おわりに

以前とは違うバージョンを使用する際は、やはりエラーに悩まされます。
この記事がどなたかの役に立てば幸いです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?