Compatibility with Next JS

[dawudr]

Build fails when adding project to Next Js app.

require is being used to load an asset file, which is why its return value is typically assigned to a variable:
Better to put your image inside your project asset folder or use CDN to store that image and put the fullpath like: https://cdn.com/path/to/image in prop src in tag img.

Next JS doesn't seem to support it, see
https://nextjs.org/docs/basic-features/static-file-serving

In your code node_modules/govuk-react-jsx/govuk/template/index.js

var _favicon = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/favicon.ico"));

var _govukMaskIcon = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-mask-icon.svg"));

var _govukAppleTouchIcon180x = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-180x180.png"));

var _govukAppleTouchIcon167x = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-167x167.png"));

var _govukAppleTouchIcon152x = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-152x152.png"));

var _govukAppleTouchIcon = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-apple-touch-icon.png"));

var _govukOpengraphImage = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-opengraph-image.png"));

and prop src from tag img should receive URL, not a module.

Error message text is:-

info  - Creating an optimized production build  
Failed to compile.

./node_modules/govuk-frontend/govuk/assets/images/favicon.ico 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)


> Build error occurred
Error: > Build failed because of webpack errors
    at /govuk-nextjs-example/node_modules/next/dist/build/index.js:15:918
    at async /govuk-nextjs-example/node_modules/next/dist/build/tracer.js:1:1441

See - Next js test project to reproduce:
https://github.com/dawudr/govuk-nextjs-example.git

[andymantell]

Thanks @dawudr I'll take a look. It shouldn't be necessary to put the image into the asset folder - this is what the loaders are designed to do which are mentioned in the error message text.

I'll see if I can configure your example app to do it tomorrow. Thanks for making the example app reproducing the error - that's extremely helpful!

[andymantell]

@dawudr I have submitted a pull request against your repository here:

dawudr/govuk-nextjs-example#1

I have tested this and it is now working and loading the images.

Hat tip to @ianhomer who's code I grabbed this from (https://github.com/ianhomer/try-govuk-react-jsx-next/blob/main/services/govuk-react-jsx-next/next.config.js)

What I'm gonna do next time I get a moment is take this repository and flesh it out slightly so it can be used as the main nextjs example for govuk-react-jsx. You aren't the first person to bring this up so I need to have a more ready answer next time!

[SamChatfield]

Hi @andymantell, I've come across this issue when looking at moving one of our applications using govuk-react-jsx to Next.js. I've got everything working great with the Next config mentioned above. However, the only thing I've had to work around is the fact that the Links within this library are the React Router links.

I've worked around it fairly easily for BackLink for now by wrapping BackLink in a Next.js Link and forwarding the href but it's a bit more complex for the other main component with a Link we're using which is Template (Header service name link).

I wondered if you had any thoughts or plans on supporting Next.js Links alongside the React Router ones?

[andymantell]

@SamChatfield I've got virtually zero experience with Next.JS so I'm not sure, but I can try and have a think about it. If you've got any suggestions let me know. One of the assumptions this library makes is that you are using react-router but I think I didn't appreciate how much of an issue that would be when I started.

I wonder whether it can be configured to support both, either by detecting something automatically, or just a "switch" somewhere so the library can be configured to support one or the other.