NextJS API route throwing 404

Question

I'm having an issue with API routes and statically generated pages.

I have a set of pages that get generated statically via getStaticProps, this all works fine. I then want to hydrate those pages client side because only users with certain permissions are allowed to view the content. The static page only contains the skeleton, the content is fetched in the useEffect by calling one of my API routes. The problem is that it's returning 404 and erroring all the time.

I already confirmed that the API route itself works fine when called outside of this page, is this something to do with the page being generated statically?

I replaced getStaticProps with getServerSideProps and i had no difference. I also removed the API call from the useEffect to be triggered by a button, just to check, and it still threw a 404.

I simplified it but that's roughly the code i have:

export const getStaticProps: GetStaticProps<{
    post: CompactLesson,
}> = async ({ params }) => {
    const post = await getCompactLesson(null, { ...params, user });

    if (!post) {
        return { notFound: true };
    }
    return {
        props: {
            post,
        },
        revalidate: 10, // In seconds
    };
};

export default function Lesson({ post }: Props) {

useEffect(() => {
   
   fetchLesson = async () => {
    // this wil throw a 404
    const response = await axios.get(`api/getLessonData`, {
        params: JSON.stringify({id:post.id}),
      });

   }
   fetchLesson()
  }, []);

  return {
    <>my content</>
  }
}

Thansk for the help

Jakub Jarząbek · Accepted Answer · 2022-07-20 12:44:23Z

5

I think that problems is with request url, It should be made to /api/getLessonData instead of api/getLessonData

answered Jul 20, 2022 at 12:44

Jakub Jarząbek

3402 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alberto montalesi Over a year ago

I knew it was something small ahah Thanks for spotting my dumb mistake, i was trying to find a complicated answer to a very simple issue. That solved it.

byoda Over a year ago

Thank you so much! Spent 20m trying to figure this out. Damn these small bugs ^^"

Collectives™ on Stack Overflow

NextJS API route throwing 404

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related