Edgio 7.13 with Next Js 14 (App Router) Link Hard refresh

Issues
, , , ,
1

I have created a sample project using NextJ14 with an App router. After deploying the build on Edgio, click on Link is not working as expected. It hard reloads the page. It should work as a SPA.

Link to my app: https://ankur-garg-next-with-app-default.glb.edgio.link
Here is my package.json

{
  "scripts": {
    "edgio:dev": "edgio dev",
    "edgio:build": "edgio build",
    "edgio:deploy": "edgio deploy",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "name": "next-with-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "next": "14.2.18",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@edgio/cli": "^7.13.13",
    "@edgio/core": "^7.13.13",
    "@edgio/devtools": "^7.13.13",
    "@edgio/next": "^7.13.13",
    "@edgio/prefetch": "^7.13.13",
    "@edgio/react": "^7.13.13"
  }
}

Seems to be an Edgio issue. When creating a build locally using npm run build and running a build locally using npm run start, it works as SPA. but after deployment it’s not work as SPA

2

Based on the information provided in the Edgio documentation, it seems that the issue you’re experiencing with the page hard reloading instead of functioning as a Single Page Application (SPA) after deploying to Edgio could be related to the routing configuration or service worker setup.

Firstly, ensure that your routes.js file is correctly configured to handle client-side navigation. Edgio supports Next.js’s built-in routing scheme, and the default routes.js file created by edgio init sends all requests to Next.js. If you have custom routing needs or want to handle specific paths differently, you may need to adjust your routes.js file accordingly.

Secondly, check your service worker configuration. The edgio init command adds a service worker to your project, and you need to register it in your app for prefetching to work correctly. If you have an existing service worker, you should integrate it with the one provided by Edgio. The service worker is crucial for caching and prefetching pages to improve browsing speed, which is a key aspect of SPA behavior.

Lastly, since you mentioned that the app works as expected locally but not after deployment, it could be an issue with the Edgio deployment configuration or a mismatch between the local and deployed environments. Review your edgio.config.js and ensure that all necessary configurations are set correctly, such as disableServiceWorker, forceServerBuild, and optimizeServerBuild options.

If the issue persists after checking these configurations, you may need to consult the Edgio support or community forums for further assistance, as the problem might be specific to the Edgio platform or the deployment process.

References:

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