I have created an nextjs 15 app and I have redux toolkit used in it. When I run the build, it throws an error
Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Failed to fetch data
at i.execute (/Users/vishnucr/Projects/mise811-sales/.next/server/app/_not-found/page.js:1:3366)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async /Users/vishnucr/Projects/mise811-sales/.next/server/app/_not-found/page.js:1:3955
Export encountered an error on /_not-found/page: /_not-found, exiting the build.
⨯ Static worker exited with code: 1 and signal: null
I found the StoreProvider created for Redux Store is the issue, may be I did it wrong. Below is my app structure. It uses AppRouter.
Layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Launch from "./launch";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Launch>{children}</Launch>
</body>
</html>
);
}
Launch.tsx
import React from "react";
import StoreProvider from "@/lib/store/providers/storeProvider";
interface LaunchProps {
children: React.ReactNode;
}
const Launch = ({ children }: LaunchProps) => {
/* fetch sales and populate */
return <StoreProvider>{children}</StoreProvider>;
// return children;
};
export default Launch;
StoreProvider.tsx
"use client";
import { useRef } from "react";
import { Provider } from "react-redux";
import { makeStore, AppStore } from "@/lib/store/store";
export default function StoreProvider({
children,
}: {
children: React.ReactNode;
}) {
const storeRef = useRef<AppStore>(undefined);
if (!storeRef.current) {
// Create the store instance the first time this renders
storeRef.current = makeStore();
}
return <Provider store={storeRef.current}>{children}</Provider>;
}
If I Removed the store provider and returns the {children}, build will be created.
What am I doing wrong here, is This how the store is suppose to be used in NextJS ?
export const dynamic = 'force-dynamic';