next-seo | Next SEO is a plug in that makes managing your SEO easier in Nextjs projects | Search Engine Optimization library

I believe it's now recommended to use trailingSlash instead of exportTrailingSlash:

if you want to force trailing slashes the recommendation is to just use trailingSlash: true both in dev/prod as both environment can route correctly since 9.5. Previously exportTrailingSlash would break development.

https://github.com/vercel/next.js/discussions/15598#discussioncomment-43808

It also looks like you have a typo in your next.config.js file: it should be module.exports (with an "s" at the end).

There @react-headroom dependency in your package.json points to a github link rather than a dependency version. That seems to be the issue.

This is because NextJS is trying to execute that function on the server because it uses SSR, and window is a browser object. Since the window object is available only in the browser (client-side), the server is unable to identify the window object, hence getting undefined. In order to fix this, you should make sure that any functions/components that contain client-side related code be executed only on the browser or client-side. One way is using hooks such as useEffect that run only after the component is mounted. Another way is to use lazy loading which pretty much does the same thing.

1. Using useEffect hook. In your _app.tsx component, add a new useEffect hook and move the initialization code into the newly created useEffect function.

It's because Next is trying to render your component on the server and the window object doesn't exist on the server.

Can you try:

Use the library next-images. It has support for all formats. All you need to is specify its usage in your next.config.js file.

You should modify next-i18next.config.js file in your project, and add path.resolve to locale path. You can see an example in this repo. Make sure that you know where your locale folder is located, and write the correct path. The answer to this issue was found in this github thread.

Which browser are you using? I assume you are on Chrome and its version 92. SharedArrayBuffer has been turned off by default starting that version. Find out more information here: https://developer.chrome.com/blog/enabling-shared-array-buffer/

TL;DR is you need to enable "cross-origin isolation" on your page which requires you a few things: Send two HTTP headers - Cross-Origin-Opener-Policy : same-origin and Cross-Origin-Embedder-Policy: require-corp. By this, your page will be cross-origin isolated and no longer be able to load cross-origin resources unless they are opt-in, but you can start using SharedArrayBuffer. You can learn more how to implement this: https://web.dev/cross-origin-isolation-guide/

You can try setting different headers in this demo page: https://first-party-test.glitch.me/

If you want a quick solution to fix the issue, you may opt your site into an allowlist to continue using SharedArrayBuffer until Chrome 96 by registering to an origin trial: https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial

Chrome team is hoping to introduce easier options to enable cross-origin isolation. Learn more here: https://developer.chrome.com/blog/coep-credentialless-origin-trial/

To resolve this, create a file called mdx.d.tsin root of your project and paste the following code.

import { NextSeo } from 'next-seo';

notice the curlies.

See https://www.npmjs.com/package/next-seo#add-seo-to-page