[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:
documentation
documents MGNLFE-88 Support for Next.js Closed
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
https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/17/overview

I guess you can link in DOCS to this repo to look at examples.

Next JS with Server Side Rendering
Update page template annotations with two new parameters URL and routeTemplate

url: http://localhost:3000
routeTemplate: '/{{language}}{{@path}}'

The React bit is similar to the regular react-minimal example.
The difference is how our code `guess` the page path to fetch.
In NextJs SSR it will be read from request URL which is available for us with `context.resolvedUrl`

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:
https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/17/diff#spa/nextjs-ssr-minimal/pages/%5B%5B...pathname%5D%5D.js

Next JS with Static Site Generation
Update page template annotations with two new parameters URL and routeTemplate

url: http://localhost:3000
routeTemplate: '/api/preview?slug=/{{language}}{{@path}}'

Creating API preview to allow WYSIWYG inside Magnolia:
https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/17/diff#spa/nextjs-ssg-minimal/pages/api/preview.js

The React bit is similar to the regular react-minimal example.
The difference is how our code `guess` the page path to fetch.
In NextJs SSG it will be read from request URL (preview API) or from the static paths array.

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:
https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/17/diff#spa/nextjs-ssg-minimal/pages/%5B%5B...pathname%5D%5D.js

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.
e.g. /contact => /api/preview?slug=/contact

Comment by Bartosz Staryga [ 04/Nov/21 ]

when describing `routeTemplate` to also say what is the difference between using {{ and {

Generated at Mon Feb 12 05:44:21 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.