How to embed a wordpress page inside a nextjs page - reactjs

I have a Nextjs project where I want to show a Wordpress page on some of the pages. So for example on this route products/[id] I want to show a wordpress page that contains info related to that product below the main info. This is needed because for some of the designs we are using Divi.
At the moment the only solution I came up with was using and iframe to show the page (it works), but it feels a bit hacky and it's probably not the best solution. Is there a better way to do it? Thanks.

Related

React App copy-paste/manually typing link shows page without fetching data

Suppose I have an e-commerce site, where i want to share product links on social media/send someone via messages. The issue on my app is when I share the link of product page it's not working on new browser where my app not loaded before.
I have checked on redux tools, it shows nothing loaded on it when manually typing the link to product page. After that if I visit homepage and refresh the page then everything gets loaded then everything works fine.
I have tried hash routing, it doesn't work either.
I think there is something wrong with my redux setup. Because static pages are working fine only issue when i share pages that loads data from server.
I'm stuck here. Can anyone help me out please

Create React small application/page on Wordpress page link?

obviously I've googled and found couple of tutorials uses headless wp with react at front and wordpress as backend but I want to have one page to be displayed and edited on elementor but the second page will be react small app. Tell me how can I do that?
Thanks in advance.
Here is to someone who is new to research of embedding react to wordpress. What I couldn't sort out that how will I use react with WordPress as One page will run with elementor and second page will run through react.
Solution I found is this article:
https://www.digitalocean.com/community/tutorials/how-to-embed-a-react-application-in-wordpress-on-ubuntu-18-04

React HTML point and click generator

I want users to be able to design a simple web page to render their content on a page on my site. Are there any projects (ideally react) out there currently that allow a point and click layout design similar to wordpress and generate html?
I have since found the Ory Editor - Seems to fulfil all my requirements.
https://github.com/ory/editor

Weird Content of Facebook share/like button preview from angular app

I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

ExtJS browser page refresh lose location

I have my ExtJS application. It's working fine but when I refresh the page it's sending me again to the login page and I lose the location where I was.
Is there any Ext.History implementation for solving this?
Yes, see Ext.util.History. Btw, the Ext Documentation site uses History class and I also use it at my examples page: http://extjs.eu/ext-examples/

Resources