Since Magnolia 6.2.14 please use External SPA.
External SPA capability makes it possible for SPA project to be running on a remote server.
Next.js demo can be found here.
mgnl-spa-next-js
Basic setup for Magnolia with WYSIWYG authoring and server side rendering with Next.js.
Prerequisites
- Magnolia DX Core (due to CORS setup minimum version 6.2.5)
- SPA renderer extended (git)
Incubator module that extends the SPA renderer and offers remote loading for templateScript.
In this case loading from Next.js server. - magnolia-services-licence (jar)
Module required by SPA renderer extended. - Node.js
Overview
/spa-lm
Magnolia Light Module./spa
Basic Next.js project with page.
Installation
Next.js
- Navigate to
/spafolder. - Install all dependencies with
npm i. - Build page with
npm run build. - Start Next.js server with
npm run start.
Magnolia
- Add
spa-lmLight Module to Magnolia. - In
Configurationapp replace/server/filters/corswith cors. - In
Securityapp:
- Go to tab
Roles. - Open
rest-anonymousrole. - In tab
Access control listsfindWebsiteworkspace and addRead-onlyforSelected and sub nodesfor root node/. - In tab
Web accessaddGetfor/.rest/template-annotations/v1*.
- In
Pagesapp:
- Create new page with:
- First dialog:
- Page name
spa-home. The root node name is hardcoded in/spa/pages/[[...pathname]].js. - Template
SPA Home.
- Page name
- Second dialog:
- Title of your choice.
- First dialog:
- You can edit it in Magnolia and add some components. You should see that
http://localhost:3000/renders page with content added via Magnolia's WYSIWYG. - Create new page child page under
spa-homewith:- First dialog:
- Page name of your choice.
E.g.contact. - Template
SPA Basic.
- Page name of your choice.
- Second dialog:
- Title of your choice.
- First dialog:
- You can edit it in Magnolia and add some components. You should see that
http://localhost:3000/contactrenders page with content added via Magnolia's WYSIWYG.
Magnolia x spaExtended x SSR with Next.js tweaks/issues
- Notice in
/spa/next.config.jstheassetPrefixthat points to Next.js server.
For WYSIWYG editorspaExtendedfetches page provided inTemplate scriptthen renders it in iframe. This iframe source is in Magnolia's domain, hence need for full url for assets to ensure they are loaded from Next.js server. - Current implementation of
@magnolia/react-editoradds placeholders forTemplate Annotations. Placeholders are emptydivs. Those placeholder are removed in Magnolia's WYSIWYG, but the currently implemented check does not take into account SSR.
Generated page includes as many emptydivelements as areas and components in the page. It needs to be taken into account when styling the page.