prefetchQuery causes timeout during build with Next.js 15.4.4 and TanStack Query 5.83.0

[Toddynn]

Hi everyone,

I'm running into a frustrating issue where my Next.js app (version 15.4.4) suddenly started failing to build static pages due to prefetchQuery calls. This wasn’t happening before — it used to work perfectly.

❌ Build error
During the build, I get the following error:

Failed to build /(...)/admin/agreement-categories/page: /admin/agreement-categories (attempt 1 of 3) because it took more than 60 seconds...
Next.js build worker exited with code: 1 and signal: null
ELIFECYCLE Command failed with exit code 1.

It seems like the issue is related to query prefetching taking too long. Here's an example of a page where I prefetch some data:

import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
import { notFound } from 'next/navigation';
import PetimPresentation from '@/components/ui/petim-presentation/petim-presentation';
import WeeklyPhraseIdRoot from './components/weekly-phrase/root';
import getPetimType from '@/shared/functions/get-petim-type';
import { PETIM_TYPE_ID } from '@/shared/constants/petim-types';

const petim_type = getPetimType(PETIM_TYPE_ID.INTERPRETATION.WEEKLY_PHRASE);

export default async function WeeklyPhraseInterpretation({ params }: { params: Promise<{ weeklyPhraseId: string }> }) {
	const { weeklyPhraseId: weekly_phrase_id } = await params;

	const queryClient = new QueryClient();

	if (!petim_type || !weekly_phrase_id) return notFound();

	// This used to work fine, but now it causes timeouts on build
	/*
	await Promise.all([
		queryClient.prefetchInfiniteQuery({ ... }),
		queryClient.prefetchInfiniteQuery({ ... }),
		queryClient.prefetchQuery({
                         queryKey: [private_get_weekly_phrase_by_id_query_key, weekly_phrase_id],
			queryFn: async () => await privateGetWeeklyPhraseById({ weekly_phrase_id }), 
                 }),
	]);
	*/

	return (
		<HydrationBoundary state={dehydrate(queryClient)}>
			<div className="mx-auto flex w-full max-w-5xl flex-col items-center justify-center gap-8">
				<PetimPresentation petim_type={petim_type} />
				<WeeklyPhraseIdRoot weekly_phrase_id={weekly_phrase_id} petim_type={petim_type} />
			</div>
		</HydrationBoundary>
	);
}

Here’s my TanStack Query version:

"@tanstack/react-query": "^5.83.0",

And my QueryClientProvider setup:

'use client';

import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query';

let browserQueryClient: QueryClient | undefined = undefined;

function makeQueryClient() {
	return new QueryClient({
		defaultOptions: {
			queries: {
				staleTime: 60 * 1000,
				refetchOnWindowFocus: 'always',
				refetchOnMount: 'always',
			},
		},
	});
}

export function getQueryClient() {
	if (isServer) {
		return makeQueryClient();
	} else {
		if (!browserQueryClient) browserQueryClient = makeQueryClient();
		return browserQueryClient;
	}
}

export const TanstackQueryClientProvider = ({ children }: { children: React.ReactNode }) => {
	const queryClient = getQueryClient();
	return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
};

✅ What worked before
This exact same prefetching logic worked fine before. Now it fails consistently with timeouts during static generation.

🔍 What I’ve tried
Commenting out the prefetch logic allows the build to pass.

Increasing build timeout (doesn't help).

Ensuring getPetimType and other logic isn't blocking or throwing.

Any ideas what could have changed or what I should do to make this work again?

Thanks in advance!

[TkDodo]

have you narrowed down which of the 3 prefetches are taking too long? also you should probably re-use your makeQueryClient function to re-use the options:

- const queryClient = new QueryClient();
+ const queryClient = makeQueryClient();

[Toddynn]

I was dooing something like this:

await Promise.all([
		queryClient.prefetchInfiniteQuery({
			queryKey: [private_get_all_user_petim_by_type_id_query_key],
			queryFn: async () => await privateGetAllUserPetimByTypeId<GoodThingPetim>({ 
                            petim_type_id: petim_type.id, page: 1 
                         }),
			initialPageParam: 1,
		}),
                queryClient.prefetchInfiniteQuery({
			queryKey: [private_get_all_user_petim_by_type_id_query_key],
			queryFn: async () => await privateGetAllUserPetimByTypeId<GoodThingPetim>({ 
                            petim_type_id: petim_type.id, page: 2
                        }),
			initialPageParam: 2,
		}),
	]);

Then I removed the prefetching of more than one page, and the error stopped.
I'm not sure if that's the correct solution — but it seems like prefetching multiple pages during build might be causing the timeout.

I also tried using makeQueryClient and getQueryClient as suggested by you, but since those utilities are intended for client‑side usage, they break in server‑side contexts like when prefetching in Next.js Server Components or during static generation. I recall reading in the official documentation that this is the recommended setup, but I’m not sure if something changed in a recent update.

[TkDodo]

makeQueryClient, if taken from the docs, is meant to work in both environments. You even have the isServer check in your code, so it should just create a new QueryClient every time, just with the same options. Unless you maybe need different options?

I just saw that you are prefetching for the same queryKey in parallel. Is that on purpose? I think what you want is:

queryClient.prefetchInfiniteQuery({
  queryKey: [private_get_all_user_petim_by_type_id_query_key],
  queryFn: async ({ pageParam }) =>
    await privateGetAllUserPetimByTypeId<GoodThingPetim>({
      petim_type_id: petim_type.id,
      page: pageParam,
    }),
  initialPageParam: 1,
  getNextPageParam: () => ...
  pages: 2,
}),

this would prefetch two pages, one after the other, depending on what getNextPageParam returns.

[Toddynn]

Yeah, that’s what I was doing — I was using prefetchInfiniteQuery incorrectly to prefetch multiple pages at once, which probably caused it to get stuck in a loop and made the build exceed the time limit, like I mentioned before.

But after following the correct way to use prefetchInfiniteQuery that you pointed out, it worked perfectly — no more build errors!

Thanks a lot for the help, and also for pointing out the the right approach to prefetchInfiniteQuery — I wasn’t aware of that!