CODEWITHSUNDEEP
reactjsnext.jsaws-amplify
jbmgil_vlrzz
jbmgil_vlrzz

Reputation: 105

Next.js dynamic routes don't work properly when deployed

I've built a website using Next.js where I have this folder structure:

pages
|- [path]
|  |- index.js
|   
|- [for-students]
|  |- [path]
|  |  |- index.js
|
| index.js
| events.js

Everything works great locally in development. The dynamic routes use the getServerSideProps() function to check if the requested route exists at the CMS: if they do, the page is rendered, if they don't, a 404 error is shown.

My problem starts when the website is deployed to AWS Amplify and I try to access a dynamic route like mysite.com/exemple or mysite.com/for-students/internship. If I navigate troughth the routes using the links in the page (e.g., navigation menu links) the dynamic pages loads correctly, but if I try to access those pages by typing the url it gives me a 500 error. The error also is occur when I access the pages troughth the links and reload them.

I appreciate any help!

Edit: As @Konrad Linkowski suggested, I checked the server logs, but they are very confusing... I don't even know what to look for. enter image description here

Upvotes: 4

Views: 2501

Answers (1)

jbmgil_vlrzz
jbmgil_vlrzz

Reputation: 105

Turns out the problem has nothing to do with routing. What happened was that for all of my dynamic route pages I was calling a component and passing some content to it. Before calling this component, I checked if the content was valid, like so:

<div className="container">
{
 content &&
 <CustomContent content={ content }/>
}
</div>

Once I checked the validity of the content before passing it to the component, I didn't see the need to check it again inside the CustomContent component, so it was like so:

export default function CustomContent({ content }) {

   return (
      <div dangerouslySetInnerHTML={
         { 
            __html: content.description ? content.description : "",
         }
      }/>
   )
}

For some reason that I don't know of, the content was "bypassing" the validity verification (content &&) and causing an error inside CustomComponent, because then it was trying to access the properties of an (probably) undefined object (e.g. content.description).

So I added another validity check inside the CustomContent component, and the error stoped.

export default function CustomContent({ content }) {

   return (
     <>
     {
        content ? 
          <div dangerouslySetInnerHTML={
             { 
                __html: content.description ? content.description : "",
             }
          }/>
        : 
        <></>
     }
     </>
   )
}

I also don't get why the error was occurring only on the server and only when the page was reloaded or accessed troughth the url.

Upvotes: 0

Related Questions