I recently purchased the Zircona template for my Wordpress website and now I'm wondering if I can use it in a React 6 Next.js application. I assume it should be possible, but I encountered a few challenges.
Firstly, when I copied parts of the Zircona homepage into my Next.js app, I started receiving CORS errors related to font references. For example, I see the following error in the console:
Slow network is detected. See <URL> for more details. Fallback font will be used while loading: <URL>
localhost/:1 Access to font at 'https://zircona.wgl-demo.net/wp-content/themes/zircona/fonts/font-awesome/fa-brands-400.woff2' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zircona.wgl-demo.net/wp-content/themes/zircona/fonts/font-awesome/fa-brands-400.woff2:1 Failed to load resource: net::ERR_FAILED
This error seems to indicate that the font file from the Zircona server is being blocked due to CORS policy. How can I resolve this issue and properly load the fonts in my Next.js app?
Additionally, Zircona relies on the Revolution Slider, which is a Wordpress animation framework. As Next.js is a React framework, the Revolution Slider doesn't seem to be directly compatible. Are there any alternatives or workarounds to achieve similar functionality in my Next.js app?
Lastly, I would appreciate any insights into the pros and cons of using the Zircona template in a React 6 Next.js app. Are there any known limitations or potential issues I should be aware of when integrating a Wordpress template into a React-based application?
Thank you for your assistance.