[MGNLFE-88] Support for Next.js Created: 16/Dec/20 Updated: 17/Dec/21 Resolved: 17/Dec/21 |
|
| Status: | Closed |
| Project: | Magnolia Frontend Helpers |
| Component/s: | None |
| Affects Version/s: | None |
| Fix Version/s: | 1.2.0 |
| Type: | Story | Priority: | Major |
| Reporter: | Christopher Zimmermann | Assignee: | Bartosz Staryga |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | 1d | ||
| Original Estimate: | Not Specified | ||
| Attachments: |
|
||||||||||||||||||||||||
| Issue Links: |
|
||||||||||||||||||||||||
| Template: |
|
||||||||||||||||||||||||
| Acceptance criteria: |
Empty
|
||||||||||||||||||||||||
| Task DoD: |
[X]*
Doc/release notes changes? Comment present?
[X]*
Downstream builds green?
[X]*
Solution information and context easily available?
[X]*
Tests
[X]*
FixVersion filled and not yet released
[X] 
Architecture Decision Record (ADR)
|
||||||||||||||||||||||||
| Date of First Response: | |||||||||||||||||||||||||
| Epic Link: | External SPA | ||||||||||||||||||||||||
| Sprint: | HL & LD 37, HL & LD 38, HL & LD 39, HL & LD 40, HL & LD 41 | ||||||||||||||||||||||||
| Story Points: | 3 | ||||||||||||||||||||||||
| Description |
|
User story:
Acceptance criteria:
This is now demonstrated in the minimal demo project - See notes in readme for SSR and SSG. https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse (Also See basic sample project from bstaryga: https://github.com/bartoszstaryga/mgnl-spa-next-js) |
| Comments |
| Comment by Christopher Zimmermann [ 07/Aug/21 ] |
|
bstaryga Could you help us out with this one? |
| Comment by Bartosz Staryga [ 23/Aug/21 ] |
|
czimmermann Things that need to be still sorted for the renderer
Once those 3 things are sorted SSR is good to go. SSG is bit more complex. For regular SSR we have For SSG we will need (apchelintcev this will interest you) |
| Comment by Christopher Zimmermann [ 23/Aug/21 ] |
|
Thank you! Cool. [[[...pathname]].js|https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/commits/4da76f79a786a7b225cbc71306d828270dc05d8f#spa/nextjs-minimal/pages/%5B%5B...pathname%5D%5D.js] looks redundant with ssg_[[...pathname]].js - are those "lib" files just for reference, or were you moving in direction that [[...pathname]].js uses those libs? I didn't look too closely yet - maybe I miss somethjing. |
| Comment by Bartosz Staryga [ 23/Aug/21 ] |
|
Both files are there for reference. Either ones content needs to be copy to pages/[[…pathname]].js depending on what approach you’d like to use. This file is the only difference between approaches so I did not wanna create new next project. The “what to do” will be explained in readme |
| Comment by Aleksandr Pchelintcev [ 24/Aug/21 ] |
|
bstarygathanks a lot for this! Couple of questions:
|
| Comment by Bartosz Staryga [ 24/Aug/21 ] |
|
apchelintcev if (req.query.secret !== 'MY_SECRET_TOKEN' || !req.query.slug) { return res.status(401).json({ message: 'Invalid token' }) } So it is definitely nice to have, but not a must I agree that each SSG system might do previews differently. Gatsby does sth with spinning preview server (not many docs around it). Some form or felixibitly of the iframe src building would be nice. It would then allow adding different things to that URL e.g. token getStaticPaths
[
{ params: { pathname: [] },
{ params: { pathname: ['contact'] },
{ params: { pathname: ['contact', 'contact-child'] }
...
]
How is that list achieved it's fully up to us. |
| Comment by Christopher Zimmermann [ 12/Oct/21 ] |
|
bstaryga I updated the nextjs branch to point to new FEHelpers and added routeTemplate to templates, but did not see it working yet. https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/commits/e311e665f107922f16224860f4c93859c57d871b Find a zip of the JARS you need attached to this ticket. mgnl jumpstart -s -m 6.2.13 (I did DXCore with no demo... but It should work on CE in theory.) |
| Comment by Bartosz Staryga [ 13/Oct/21 ] |
|
czimmermann & apchelintcev SSR SSG A few more TO-DO's, but it's more wrapping up, for me:
|
| Comment by Bartosz Staryga [ 14/Oct/21 ] |
|
Found a blocker: https://jira.magnolia-cms.com/browse/SPARE-3 |
| Comment by Bartosz Staryga [ 26/Oct/21 ] |
|
FYI czimmermann
Scream when languages are available to be used/tested. |
| Comment by Bartosz Staryga [ 02/Nov/21 ] |
|
mdrapela/czimmermann How can I test the latest version with language switcher? Could you guys provide me with the jars I need to use, please? |
| Comment by Bartosz Staryga [ 03/Nov/21 ] |
|
rsiska/canh.nguyen question I have for lang switcher. routeTemplate: '/{{language}}/{{@path}}' as well as: routeTemplate: '/{language}/{{@path}}' So for language, I can have 1 or 2 curly brackets, for @path not. |
| Comment by Aleksandr Pchelintcev [ 03/Nov/21 ] |
|
bstaryga I suppose that's cause in case of path the slashes need to be escaped (the double brace semantics iiuc), am I right canh.nguyen? |
| Comment by Bartosz Staryga [ 03/Nov/21 ] |
|
What do you say guys in example repo and in docs we would use double? To keep it consistent and not confuse people why do sometimes we have it one way or another? |
| Comment by Canh Nguyen [ 04/Nov/21 ] |
|
The double braces will not encode the content. In case you need to use path as a parameter, or other parameters that have special characters like space, we need to escape the content. For example, if you have a routeTemplate like: '?title={{title}}' With title is "Hello World", the generated URL is like "http://foo.bar/?title=Hello World" so the URL is broken. And if we configure routeTemplate: '?title={title}', the URL should be "http://foo.bar?title=Hello+World" |
| Comment by Bartosz Staryga [ 04/Nov/21 ] |
|
canh.nguyen thanks for the clarification Anyway, I have added the language switching to demos and created PR. I would appreciate a decent test on this. |
| Comment by Bartosz Staryga [ 04/Nov/21 ] |
|
BTW What will be the pages app required to run this as this will not land in 6.2.13? |
| Comment by Bartosz Staryga [ 04/Nov/21 ] |
|
And another question can url and routeTemplate be set in site def (not as prototype)? |
| Comment by Christopher Zimmermann [ 17/Dec/21 ] |
|
NextJS SSR and SSG have been demonstrated to work with Visual SPA Editor. This is done in this demonstration project: https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse See the new README sections for SSR and SSG. |