Search code examples
next.jsnetlify

500 error when publishing my Nextjs app on Netlify, when i use "use client"

What could be the possible cause of the "Internal Server Error" with status code 500 when publishing my app on Netlify, based on the error message and log provided?

I have found that when I remove components that "use client" from my main page, it starts working again. What could I be doing wrong?

I need to use "useClient" for managing state with useState.

Additionally, I noticed that when I type "/about" in the URL and then navigate back to the main page using a link, it starts working again. However, the issue reoccurs when I reload the page.

P.S. The console is prompting me to visit this link: https://nextjs.org/docs/messages/client-side-exception-occurred

500

my current default page code:

"use client";
import React from "react";
import Description from "../components/description";
import FilterCardsClient from "../components/filters/filterCards";
import ErrorBoundary from "../components/errorBoundary";

export default function Page(props) {
  return (
    <div className="my-8 w-full rounded-lg p-4 text-gray-600 md:p-0">
      {/* Description */}
      <Description />

      {/* Cards */}
      <ErrorBoundary fallback={<p>Something went wrong</p>}>
        <FilterCardsClient props={props} />
      </ErrorBoundary>
    </div>
  );
}

My ErrorBoundary component is not providing any assistance.

import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
Solution

  • You don't have to use any error boundary. In nextjs 13.4 you can directly create a error.tsx/error.jsx file in your folder for example: If you're using Nextjs 13 App Router and you create a folder name about then create some files page.tsx, error.tsx

    Default Page

    
"use client";
import React from "react";
import Description from "../components/description";
import FilterCardsClient from "../components/filters/filterCards";

export default function Page(props) {
  return (
    <div className="my-8 w-full rounded-lg p-4 text-gray-600 md:p-0">
      {/* Description */}
      <Description />
        <FilterCardsClient props={props} />
    </div>
  );
}

    If you want to show some loading UI then you have to create loading.tsx file

    Remember .tsx extension is used only if you're working with typescript otherwise use .jsx and .js file extension

    You can checkout the documentation of Nextjs 13.4 App Router and i suggest you to don't use Class Componenets

    Reference: docs