CODEWITHSUNDEEP
javascriptnext.jsreduxredux-toolkitpre-rendering
Vishnu
Vishnu

Reputation: 1

NextJS 15: Error occurred pre-rendering page, with redux toolkit installed

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 ?

Upvotes: 0

Views: 34

Answers (0)

Related Questions