[MGNLFE-111] DOC: Use Next.js in your React SPA Created: 24/Aug/21 Updated: 17/Jan/22 Resolved: 17/Jan/22 |
|
| Status: | Closed |
| Project: | Magnolia Frontend Helpers |
| Component/s: | None |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Task | Priority: | Neutral |
| Reporter: | Martin Drápela | Assignee: | Martin Drápela |
| Resolution: | Done | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||||||
| Template: |
|
||||||||
| Acceptance criteria: |
Empty
|
||||||||
| Task DoR: |
Empty
|
||||||||
| Date of First Response: | |||||||||
| Epic Link: | External SPA | ||||||||
| Sprint: | DevX 1 | ||||||||
| Story Points: | 5 | ||||||||
| Description |
|
Update the SPA - React docs: Next.js can be used. |
| Comments |
| Comment by Bartosz Staryga [ 04/Nov/21 ] |
|
Examples will be added to minimal-headless-spa-demos with this PR I guess you can link in DOCS to this repo to look at examples. Next JS with Server Side Rendering url: http://localhost:3000 routeTemplate: '/{{language}}{{@path}}' The React bit is similar to the regular react-minimal example. One extra step is setting `global.mgnlInPageEditor` for when inside Magnolia WYSIWYG. This is used by react-editor lib. The full example can be seen in this file: Next JS with Static Site Generation url: http://localhost:3000 routeTemplate: '/api/preview?slug=/{{language}}{{@path}}' Creating API preview to allow WYSIWYG inside Magnolia: The React bit is similar to the regular react-minimal example. The static paths are fetched in our example with navigation endpoint and built from the response. One extra step is setting `global.mgnlInPageEditor` for when inside Magnolia WYSIWYG. This is used by react-editor lib. The full example can be seen in this file: Using NextJs SSG if we want to have links working for the author instance we need to make sure that all href are changed to go through preview API. |
| Comment by Bartosz Staryga [ 04/Nov/21 ] |
|
when describing `routeTemplate` to also say what is the difference between using {{ and { |