Nextjs 13 middleware, next/link

[c10ckw0rk]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Not applicable

Amplify Categories

Not applicable

Environment information

# Put output below this line

Bug only occurs in amplify hosting.

Describe the bug

I have a project where I am using nextjs as a headless CMS. The CMS provides a set of urls which map to different templates, any url can have any template so I am using nextjs middleware to perform rewrites on the urls.

I have a demo project deployed here (https://danielpe-middleware-refactor.d327zut72dh116.amplifyapp.com/some-random-pathname-1) (Git repo https://github.com/c10ckw0rk/middleware-getserversideprops-standalone-demo).

When using the next/link component after you click around for a while the page will just throw an error. Its intermittent, it seems the faster I click through links, the quicker the page errors. I have also made a component which just does a router.push on click of an a tag, and the page never breaks (Manual Links are using my component, Next links are using the next/link).

I'm unable to replicate the problem locally, only occurs once the app is deployed amplify.

Expected behavior

The page should not error when next links are clicked

Reproduction steps

Deploy test repo to amplify hosting

Code Snippet

// Put your code below this line.

https://github.com/c10ckw0rk/middleware-getserversideprops-standalone-demo

Log output

// Put your logs below this line
Object { pageProps: {…}, __N_SSP: true, Component: s(n), err: undefined, router: {…} }
some-random-pathname-10:106:22
GEThttps://danielpe-middleware-refactor.d327zut72dh116.amplifyapp.com/favicon.ico
[HTTP/2 404 Not Found 83ms]

Object { pageProps: {…}, __N_SSP: true, Component: s(n), err: undefined, router: {…} }
some-random-pathname-10:106:22
Object { pageProps: {}, Component: s(n), err: undefined, router: {…} }
some-random-pathname-10:106:22
undefined 2 some-random-pathname-10:106:22
Object { pageProps: {}, Component: s(n), err: undefined, router: {…} }
some-random-pathname-10:106:22
undefined 2 some-random-pathname-10:106:22
TypeError: can't access property "map", e is undefined
    NextJS 30
some-random-pathname-10:106:22
TypeError: can't access property "map", e is undefined
    NextJS 30
some-random-pathname-10:106:22
A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred some-random-pathname-10:106:22
TypeError: can't access property "map", e is undefined
    NextJS 30
some-random-pathname-10:106:22
TypeError: can't access property "map", e is undefined
    NextJS 30
some-random-pathname-10:106:22
A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred some-random-pathname-10:106:22
Error rendering page:  Error: Cancel rendering route
    NextJS 36
some-random-pathname-10:106:22
Object { pageProps: {…}, Component: class ErrorPage, err: TypeError, router: {…} }
some-random-pathname-10:106:22

aws-exports.js

Not using any configuration

Manual configuration

Not using any configuration

Additional configuration

Not using any configuration

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

{
  "name": "middleware-getserversideprops-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

[tannerabread]

Hi @c10ckw0rk, transferring this to the hosting repo so that they can better assist you

[FacundoSpira]

We found the exact same issue while debugging our application. We tried recreating a minimal reproducible example. The repository can be found here: https://github.com/FacundoSpira/amplify-nextlink-middleware-error.
It basically contains the following:

• Three pages index.tsx, page1.tsx and page2.tsx with Links to each of the pages, and a pre tag that renders the props that are passed from the getServerSideProps function. All pages are identical, only changing the text that is passed as prop on SSR. Here's what index.tsx looks like

import type { InferGetServerSidePropsType } from 'next';
import Link from 'next/link';

type HomeProps = InferGetServerSidePropsType<typeof getServerSideProps>;

const Home = (props: HomeProps) => {
  return (
    <main>
      <div>
        <Link href="/">Home</Link>
        <Link href="/page1">Page 1</Link>
        <Link href="/page2">Page 2</Link>
      </div>

      <h1>Server Side Props</h1>
      <pre>{JSON.stringify(props, null, 2)}</pre>
    </main>
  );
};

export const getServerSideProps = () => {
  return {
    props: {
      page: 'Home',
    },
  };
};
export default Home;

• A middleware.ts file that simple forwards the request with NextResponse.next();

import { NextResponse } from 'next/server';

const middleware = () => {
  return NextResponse.next();
};

export default middleware;

export const config = {
  matcher: ['/((?!static|.*\\..*|_next|favicon.ico).*)', '/'],
};

Expected behaviour

When navigating through the different links, the page should always render the information received from getServerSideProps.

Actual behaviour

Randomly when navigating through the links, sometimes getServerSideProps return an empty object. That behaviour can be seen on the following video:

Screen.Recording.2023-08-18.at.16.27.08.mov

Steps to reproduce

Deploy the repository to amplify and navigate through the links. The linked repository is also deployed here: https://main.d3g9j0bpx2nsb4.amplifyapp.com/

[jpbalarini]

Same issue here

[Jay2113]

We are tracking this as a bug here: #3704. I'll recommend subscribing to it for any updates. Closing as duplicate.

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[github-actions]

This issue has been automatically locked.