Recently, I integrated styled-components into my Next.js application. To make it work, I had to include a Babel file with the following code:
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
Next, I wanted to use a local font and followed the guidelines outlined in the documentation here. However, I encountered an issue where the app started throwing errors after implementing the local font. The error message indicated that I needed to revert back to using the initial Babel configuration.
My question is: how can I successfully utilize both styled-components and a local font in my Next.js application without causing any conflicts or errors?