CODEWITHSUNDEEP
reactjsnext.js
Fatemeh Qasemkhani
Fatemeh Qasemkhani

Reputation: 2042

next js dynamic route redirect to home page on refresh

I have a dynamic route in my project and its not ssr. enter image description here

When I refresh the page, it redirects to the home page, but in the other pages the refresh works as intended. I have actually added trailingSlash: true to my next.config but it still doesn't works.

 const redirectToLivePage = async () => {
    const result = await dispatch(
      getMeetingAction(meetingId, { shares_count: shares }),
    );
    
    if (result.ok) {
      router.push(`/meetings/${meetingId}/shares_count=${shares}`);
    }
  };

here is the codes of my dynamic page.

const MeetingPage = () => {
  useEffect(() => {
    let interval;
    if (data?.data.stream_status !== 'complete') {
      interval = setInterval(() => {
        dispatch(getMeetingAction(id, { shares_count: shares }));
      }, 5000);
    }

    return () => {
      clearInterval(interval);
    };
    
  }, [data]);

  return (
      <>
        {data?.data?.stream_status === 'complete' ? (
          <Player src={data?.data?.stream_hls_playlist || ''} />
        ) : (
          <div
            className={s.poster}
            style={{ backgroundImage: `url(${poster})` }}
          >
            <div className="container">
              <p>{BE_PATIENT}</p>
            </div>
          </div>
        )}
        <div className={cs('container', s.message)}>
          <SendMessage id={data?.data?.id} />
        </div>
      </>
  );
};

export default MeetingPage;

It happens on production, In local it works well.

Upvotes: 6

Views: 3699

Answers (2)

ronakparmar
ronakparmar

Reputation: 11

const nextConfig = {
  compress: true,
  trailingSlash: true,
  experimental: {
    serverActions: false,
  },
  output: "export",
  images: {
    unoptimized: true,
  },
};
module.exports = nextConfig;

Put this in nextjsconfig trailish slash true.

Upvotes: 1

masmerino
masmerino

Reputation: 1036

Probably related to NextJS caveats, I had the same issue, you can read about it here

It should be fixed by:

export async function getServerSideProps(context) {
    return {
        props: {},
    };
}

Also don't forget to restart the app.

Hope this help to someone else.

UPDATE Feb 7, 2023

here is an example how it should looks like:

function MyComponent () {
//
}

export async function getServerSideProps(context) {
    return {
        props: {},
    };
}

export default MyComponent;

ref: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

Upvotes: 1

Related Questions