Creating nextjs pwa using next-pwa with Layer0

Issues
,
1

I am using layer0 for deployment and want to create the PWA for the web app for which i am trying to use next-pwa (next-pwa - npm), but the way both next-pwa and Layer0 exports module, it is not working for me, here is my current Layer0 config to export the module -

module.exports = () =>
  withLayer0(
    withServiceWorker({
      // Output sourcemaps so that stack traces have original source filenames and line numbers when tailing
      // the logs in the Layer0 developer console.
      layer0SourceMaps: true,
      disableLayer0DevTools: true,

      ...moduleExports,
    })
  )

And with next-pwa, i tried couple of ways to create pwa but its not working -

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  scope: '/app',
  sw: 'service-worker.js',
})

module.exports = () =>
  withLayer0(
    withServiceWorker(
      withPWA({
        // Output sourcemaps so that stack traces have original source filenames and line numbers when tailing
        // the logs in the Layer0 developer console.
        layer0SourceMaps: true,
        disableLayer0DevTools: true,

        ...moduleExports,
      })
    )
  )

Above one was latest try i did. How do i make pwa solution work with Layer0?

2

To integrate next-pwa with your Edgio (formerly Layer0) setup for a Next.js application, you need to combine the configurations of both next-pwa and @edgio/next/config. Based on the context provided in the Edgio documentation, you should use the withEdgio function from @edgio/next/config to wrap your Next.js configuration. Since the documentation does not provide a direct example of integrating next-pwa with Edgio, I’ll guide you through a general approach to combining both configurations.

Here’s how you can modify your next.config.js to use both withEdgio and next-pwa:

const { withEdgio } = require('@edgio/next/config');
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  scope: '/app',
  sw: 'service-worker.js',
});

module.exports = withEdgio(
  withPWA({
    // Your Next.js config options here
    // For example:
    images: {
      domains: ['example.com'],
    },
    // Other Next.js config options...
  })
);

In this configuration:

  • withPWA is a function that takes the Next.js configuration object and returns a new configuration object with PWA support.
  • withEdgio is a function provided by Edgio that optimizes the Next.js build for running on Edgio.

You should place your Next.js configuration options (such as images domains) inside the object passed to withPWA. The resulting configuration object from withPWA is then passed to withEdgio.

Please note that the withServiceWorker function is no longer required in the next.config.js file for Edgio version 7, as mentioned in the Edgio documentation under “Upgrading to Edgio Applications Version 7” (Upgrading to Edgio Applications Version 7).

Remember to replace the placeholder comments and example config options with your actual Next.js configuration. If you encounter any issues or if the integration requires more specific adjustments, you may need to refer to the official documentation for next-pwa and Edgio or contact their support for further assistance, as the provided context does not include detailed instructions for this specific integration scenario.

Edgio Answers may provide inaccurate information and should be verified. Consult our official documentation for more information.