Create NextJS demo app

[andymantell]

As discussed in #102 - it would be good to have a NextJS examples app showing how to set it up to work with govuk-react-jsx as the out of the box experience from create-next-app is not sufficient. Have made a start here with @dawudr's help:

https://github.com/andymantell/govuk-nextjs-example

Also need to consider whether #90 might be beneficial to this, to avoid this line in the nextjs config:

const withTranspileModules = require("next-transpile-modules")([
  "govuk-react-jsx",
]);

[brightpixels]

I came here to raise a ticket to ask for an example next.js app. I am currently working on a fresh client project and really happy to see this as I am having various errors.

Update: just saw this https://github.com/dawudr/govuk-nextjs-example for anyone looking for an example

[andymantell]

@brightpixels Are you getting errors beyond those mentioned in #102 ?

But yeah, have a look at that basic app - hopefully it points you in the right direction.

When I get time I will make a more fully fledged app, but at least in the near future this is probably as much as it's going to be - just an example of how to set it up at it's most basic. Beyond that I have to assume that the reader knows how to use NextJS (Because I don't!)

[brightpixels]

I misunderstood the purpose of the other repo. I was using https://github.com/dawudr/govuk-nextjs-example as the next.js + govuk-react-jsx demo but it looks like it's to reproduce the error showing in the README of the repo, which is what I am getting now. So yes, same issue.

I followed your solution and I can use govuk-react-components. Only issues the styles not coming through which i think to do with not importing the frontend stylesheets so I will sort it out myself.

I always appreciate your very quick replies, thank you.

[andymantell]

It certainly started out as a means for reproducing that error - but now that it's fixed it's a perfectly good start I think.

When I come to do a "bigger" demo app I will cast around and see if there's other good starting points but I doubt I'll do anything significantly more complicated - and I may even simply go with exactly what's at https://github.com/dawudr/govuk-nextjs-example

Will make sure it works with create-next-app too

[ianhomer]

I'll be happy to assist if you need. We're now using this govuk-react-jsx library extensively in a next.js stack. It's been working really well for us and can share any tips if you travel down paths we've been down.

[andymantell]

Thanks Ian that's greatly appreciated. If you were able to share the structure of your setup maybe with all of your application code removed that would be really cool. just the barest bones after you remove your app specific stuff.

I guess there's a balance to be struck between minimal code ready to be configured, and a highly opinionated setup that might not suit everyone. Don't know where you feel your setup might fit on that spectrum... But I'd be very interested to see your setup either way.

[ianhomer]

I've cleaned up https://github.com/ianhomer/try-govuk-react-jsx-next a little. That's pretty much the bare bones. We're on node v12 ; next v10.0.4. We use lerna to wire up our mono repo - which leads to us needing the transpile logic in https://github.com/ianhomer/try-govuk-react-jsx-next/blob/main/services/govuk-react-jsx-next/next.config.js (this allows us to make live updates to our ui components / not need to build ui components independently). "ui components" is what we call our custom components over and above GDS toolkit (and your layer - thx :) ).

I'll update the try-govuk-react-jsx-next repo to clean it up a little more and provide more use cases. I'll use that to experiment with upgrades etc - e.g. we need to move up to node v14 / npm v7.

Keen to help evolve your library, however we've not found a bug yet and you're keeping it up to date with GDS front end library quickly so you're several steps ahead of us. Thought we found a bug in your library the other day, and I was looking forward to help provide fix, but then we found it was in our stack, d'oh! ;) Probably the best place we (I) can help is improve the reference app / documentation to guide others, so I'll do my best to keep that up to date and provide insight from our experience. If we have any suggested changes in your library we'll raise a PR. Thx so much the library, it's been a massive help.

[andymantell]

Thanks @ianhomer this looks amazing. If you are happy I'm going to add a link to this from the Readme...

[andymantell]

Regarding bugs with the library - the only one that I'm aware of really is #99. So I guess be aware of it. It doesn't cause anything bad to happen apart from a console error but I need to get to the bottom of it.

[oddjones]

Just have to say @ianhomer this is amazeballs