404 errors

[meesrutten]

Summary

We are sometimes running into incidental 404 errors on production with this setup. It's hosted on Vercel

Versions

• next-pwa: ^5.6.0
• next: ^13.4.3

How To Reproduce

We are unable to reproduce in a stabile way. It seems to happen most on Safari iOS in recurring visits.

Expected Behaviors

No 404 errors

Additional Context

Package.json:

{
  "name": "nexcalibur",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "npm": "please use yarn",
    "node": "18"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postinstall": "husky install",
    "postbuild": "yarn next-sitemap",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit",
    "format": "prettier --write './src/**/*'",
    "component": "node scripts/component",
    "state": "node scripts/state",
    "favicons": "node scripts/favicons",
    "svgr": "svgr src/icons --template src/icons/svgrtemplate.js --index-template src/icons/index-template.js --config-file .svgr.config.js --out-dir src/components/icons",
    "generate-graphql": "graphql-codegen -r dotenv/config",
    "watch-graphql": "graphql-codegen --watch -r dotenv/config"
  },
  "lint-staged": {
    "**/*.(js|ts|tsx)": [
      "eslint --fix"
    ],
    "**/*.(js|json|ts|tsx)": [
      "prettier --write"
    ]
  },
  "dependencies": {
    "@react-three/drei": "^9.80.2",
    "@react-three/fiber": "^8.13.6",
    "@segment/snippet": "^4.16.2",
    "blaze-slider": "^1.9.3",
    "clsx": "^2.0.0",
    "dotenv": "^16.0.3",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.3",
    "favicons": "^6.2.2",
    "framer-motion": "^10.16.2",
    "framer-motion-3d": "^10.16.2",
    "graphql": "^16.6.0",
    "graphql-codegen-plugin-typescript-swr": "0.8.3",
    "graphql-request": "5.1.0",
    "husky": "^8.0.3",
    "idb": "^7.1.1",
    "leva": "^0.9.35",
    "next": "^13.4.3",
    "next-pwa": "^5.6.0",
    "next-seo": "^6.1.0",
    "next-sitemap": "^4.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-share": "^4.4.1",
    "react-use": "^17.4.0",
    "three": "^0.155.0",
    "typescript": "5.0.4",
    "zustand": "^4.3.8"
  },
  "devDependencies": {
    "@csstools/postcss-global-data": "^2.0.1",
    "@graphql-codegen/cli": "2.16.4",
    "@graphql-codegen/introspection": "^2.2.3",
    "@graphql-codegen/schema-ast": "^2.6.1",
    "@graphql-codegen/typescript": "3.0.0",
    "@graphql-codegen/typescript-graphql-request": "^4.5.8",
    "@graphql-codegen/typescript-operations": "3.0.0",
    "@studio-freight/lenis": "^1.0.12",
    "@svgr/cli": "^8.0.1",
    "@types/node": "20.2.3",
    "@types/react": "18.2.7",
    "@types/react-dom": "18.2.4",
    "@types/three": "^0.155.0",
    "autoprefixer": "^10.4.14",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "lint-staged": "^14.0.0",
    "postcss": "^8.4.29",
    "postcss-at-rules-variables": "^0.3.0",
    "postcss-custom-media": "^10.0.0",
    "postcss-nested": "^6.0.1",
    "postcss-preset-env": "^9.1.1",
    "postcss-utilities": "^0.8.4",
    "prettier": "^3.0.1",
    "ts-node": "^10.9.1"
  }
}

next.config.js

/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV !== 'production',
  skipWaiting: true,
  buildExcludes: [
    'https://www.gstatic.com*',
    'https://www.googletagmanager.com*',
    'https://facebook.com/*',
  ],
});

module.exports = withPWA({
  reactStrictMode: false,
  images: {
    deviceSizes: [320, 420, 768, 1024, 1200, 1920, 2300, 2500],
    domains: ['www.datocms-assets.com'],
    path: '/_next/image',
    loader: 'default',
  },
});