Next.js Discord

Discord Forum

getting TypeError: fetch failed using generateStaticParams

Answered
Orinoco Crocodile posted this in #help-forum
Open in Discord
Avatar
Orinoco CrocodileOP
I'm getting TypeError: fetch failed with Error occurred prerendering page "/places/50" (for all 60 pages)

/places/[id]/page.ts is:
const API_BASE = process.env.API_BASE

interface Place {
    id: number,
    title: string,
    desc: string,
    pos: [number, number],
    type: string,
    state: string,
    img: string,
}

export async function generateStaticParams() {
    const postIds = await fetch(API_BASE + '/places', { next: { revalidate: 60 } }).then((res) => res.json())
    return postIds.map(({ id }: Place) => ({ id: `${id}` }))
}

export default async function Page({ params }: { params: { id: string } }) {

    const { id, title, desc } = await fetch(`${API_BASE}/places/${params.id}`, { next: { revalidate: 60 } }).then((res) => res.json())
    
    return (
        <>
            <h1>{title}</h1>
            <pre>{desc}</pre>
        </>
    )
}


/api/places/[id]/route.tsx is:
import { NextResponse } from "next/server";

import { places } from "../../store";

export async function GET(
    request: Request,
    { params }: { params: { id: string } }
) {
    const place = places.filter((place) => `${place.id}` == params.id)[0];
    return NextResponse.json(place);
}

the api endpoint works when I do npm run dev so I'm not sure where the problem is coming from. Any help is appreciated ❤️
Answered by Clown
Its probably because your next server wont running at the time of build so it can't fetch your Route Handlers
View full answer

11 Replies

Avatar
Clown
Its probably because your next server wont running at the time of build so it can't fetch your Route Handlers
Answer
Avatar
Clown
Use server actions instead
Avatar
Orinoco CrocodileOP
I was thinking it might be because the api isn't running at time of build but /api/places/route.ts works just fine in returning those 60 ids returned by generateStaticParams
server actions?
running a separate server as the api (just made a quick one in python) confirms that it's not because the api isn't running at time of build
it still gives me the same errors
Avatar
Orinoco CrocodileOP
looking more closely, I'm seeing that these pages always prerender without error
0
1
2
3
4
5
32
56
57

the api is just filled with dummy data right now and page 54 has the same data as page 57 so I have no idea why 54 is failing to fetch but 57 is able to fetch
Image
Avatar
Orinoco CrocodileOP
this is the error from the fetch

TypeError: fetch failed
    at Object.fetch (/Users/user/Projects/TouristApp/agile-tourism/node_modules/next/dist/compiled/undici/index.js:1:26669)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}
Avatar
Orinoco CrocodileOP
turns out it was still using the api inside the project. switching it to an api outside the project had it building without error
not sure why the api within the project would work for only a few specific pages