Next.js Discord

Discord Forum

Nextjs App on a wordpress subdirectory

Unanswered
Hamiltonstövare posted this in #help-forum
Open in Discord
HamiltonstövareOP
How can I do the title? any ideas?

10 Replies

I would use react instead of Nextjs for this use case. Because, if i dont make mistake, your would need to add your builded app in the wordpress directory.
Wordpress, PHP environment, cannot build and run a react or next app.
But you can add react to an existing project. https://react.dev/learn/add-react-to-an-existing-project
You could either target an element in your wordpress as the entry point or create a portal.
https://react.dev/reference/react-dom/createPortal
In any case you need to add manually your builded react (wich is just html, js and css) in your wordpress project .
I dont know wordpress, you might have plugins or libraries to make this compatibility
If you wanna use Nextjs only for the UI (the whole app is in Next) and Wordpress for the CMS you have to use wordpress as a Headless CMS. If you just wanna have react in a part of the app (a component, a page) you might wanna use React (solution above)
@Hamiltonstövare I think you’re right, I might just create a vite react app and bundle it into a single js file then render the app inside a div element with specific id.
This should work indeed. Do you need React for part of the UI ? (component etc..) of for an entire page ?
@Max This should work indeed. Do you need React for part of the UI ? (component etc..) of for an entire page ?
HamiltonstövareOP
Its for the entire page haha what do you think
@Hamiltonstövare Its for the entire page haha what do you think
I did this once, I had an old react app bundle into hostinger (the hard oldschool way), really not performant and slow but was doing the job. Then i added a subdomain like : my-page.domain.com for the site domain.com. Into vercel i added the my-page.domain.com and added the proper record and it did work
maybe it is your best option regarding speed, and performance. Deploy this page using React or Nextjs in Vercel and deploying it to a subdomain of your website. From Wordpress you might just have CORS configuration to handle but not sure about this.
I m curious to know what did you choose and how it ended up 🙂
@Max I m curious to know what did you choose and how it ended up 🙂
HamiltonstövareOP
I think in my case its better to just render the widget instead of the entire page because I also need SEO
Alright, let me know if it worked 🙂