Nextjs links not navigating from / (start_url) after setting up next-pwa

Question

All the links used to work in my web app. I have since migrated the app so that it is a PWA using the next-pwa package, and now none of the links work on my index page (which also happens to be the start_url in the manifest.json file). I am sure this is related to the PWA config, as if you click on one of the links, the url will change but the page wont re-render - however, if you simply type the new url in, then the page does change. Once away from the / route, I can use all the links that are visible, but for some reason they are broken on the index page.

Here is my custom link component, which uses the next/link component (please note I am currently using next 12.3.1:

import styled from '@emotion/styled';
import NextLink from 'next/link';


export const Link = ({ href, children, justifyContent = 'center', width = '', ...rest }) => {
  const A = styled.a({
    color: 'inherit',
    textDecoration: 'inherit',
    display: 'flex',
    alignItems: 'center',
    margin: '0',
    padding: '0',
    width,
    height: '100%',
    justifyContent
  });

  return (
    <NextLink href={href} {...rest} passHref>
      <A {...rest}>
        {children}
      </A>
    </NextLink>
  );
};

next.config.js

const runtimeCaching = require('next-pwa/cache');

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  runtimeCaching,
  navigationPreload: true
});

const nextConfig = withPWA({
  reactStrictMode: true,
  swcMinify: true,
  trailingSlash: true,
  images: {
    domains: [
      'firebasestorage.googleapis.com',
      'i.gyazo.com',
      'gateway.pinata.cloud'
    ]
  },
  async headers() {
    return [
      {
        source: '/:path*',
        headers: securityHeaders,
      }
    ]
  },
  experimental: {
    modularizeImports: {
      '@mui/material': {
        transform: '@mui/material/{{member}}'
      },
      '@mui/icons-material': {
        transform: '@mui/icons-material/{{member}}'
      },
      lodash: {
        transform: 'lodash/{{member}}'
      },
      'react-xarrows': {
        transform: 'react-xarrows/lib/{{member}}'
      }
    }
  },
});

// Use to analyze bundle size
// const withBundleAnalyzer = require('@next/bundle-analyzer')({
//   enabled: process.env.ANALYZE === 'true',
// });

module.exports = nextConfig;

manifest.json

{
  "theme_color": "#ffffff",
  "background_color": "#1565c0",
  "display": "fullscreen",
  "start_url": "/",
  "scope": ".",
  "name": "Student Property Review",
  "short_name": "Student Property Review",
  "description": "A platform to read and review reviews about student properties and landlords; review your properties to help other students.",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

The website is currently running at: https://www.studentpropertyreview.co.uk/

Answer 1

It appears this issue is unrelated to the fact that the app is now a PWA (although it may be somewhat responsible). The main issue is that on my index page I am using a library called Xarrows (which I assume has to be called on the client?)

import Xarrow, { useXarrow, Xwrapper } from 'react-xarrows';

I was using 'useXarrow' to create an updateXarrow() function, but it appears that adding this as a dependency to useEffect causes the links on the page not to function correctly.

  const updateXarrow = useXarrow();

  useEffect(() => {
    if (typeof window === 'undefined') return;
    updateXarrow();
    setTimeout(() => updateXarrow(), 5);
    setTimeout(() => updateXarrow(), 10);
  }, [updateXarrow]);

In certain cases the arrows weren't correctly aligned, which is why the function is called multiple times after the page loads, but I decided to simply remove this and now the site works as it should.