Tuesday, February 21, 2023
Now the components come in a few different versions, we have straight
TypeScript flavours. We also have both
unstyled versions of the components to give developers options in how they want to get started.
I began testing the SDK by integrating it with Nextjs Commerce. I like this project for testing out JS SDK as its super quick and easy to get up and running, however I ran into some strange issues when using the styled versions of the components.
Now when using the styled versions of the components, the styles are provided by Styled Components – a library that uses tagged template literals to allow you write CSS to style your components easily.
Now when the page first loaded the styled components were rendered correctly, however whenever the Nextjs router fired to change the page content the styles were removed?
After some googling it turns out that you need to tell Nextjs that you’re using Styled Components in your application in order for this error not to happen.
To do so, you need to add the following configuration to your Next.config.js
Once this was included everything worked well and my component styles persisted after a route change!