Nextjs App router return JSON like plain HTML instead of rendering

Question

Our Nextjs app (^13.4.4) which is in app router return JSON like plain html text instead of rendering. It happens after browsing a few times, and only happens in home page. And then if we browse different page, we can't browse the home page again.

The text is in below

1:HL["/_next/static/media/7777133e901cd5ed-s.p.woff2",{"as":"font","type":"font/woff2"}]
2:HL["/_next/static/media/916d3686010a8de2-s.p.woff2",{"as":"font","type":"font/woff2"}]
3:HL["/_next/static/media/9a881e2ac07d406b-s.p.woff2",{"as":"font","type":"font/woff2"}]
4:HL["/_next/static/media/c04551857776278f-s.p.woff2",{"as":"font","type":"font/woff2"}]
5:HL["/_next/static/media/d869208648ca5469-s.p.woff2",{"as":"font","type":"font/woff2"}]
6:HL["/_next/static/css/23bb12ed1ea5f9c7.css",{"as":"style"}]
0:[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],"$L7",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/23bb12ed1ea5f9c7.css","precedence":"next"}]],["$L8",["$","meta",null,{"name":"next-size-adjust"}]]]]]
9:I{"id":"46828","chunks":["3629:static/chunks/3629-0f2957a3da16c20f.js","8707:static/chunks/8707-2b2cb7694746a12d.js","2046:static/chunks/2046-d5dab6937324b8ff.js","8878:static/chunks/8878-1ab95d1f654f5058.js","8539:static/chunks/8539-3d0bbb715ba6a425.js","3234:static/chunks/3234-5172d4665c304b45.js","6628:static/chunks/6628-51ef5b07aceff5fd.js","1083:static/chunks/1083-51d2c7da64ef81a7.js","4214:static/chunks/4214-52251ceabff738d6.js","1623:static/chunks/1623-e5ed6c4108375445.js","1803:static/chunks/1803-84fbb5049df36eff.js","4585:static/chunks/4585-ba3497a793a372ad.js","4661:static/chunks/4661-744b95f516e1b044.js","3185:static/chunks/app/layout-87ea505fdc6113ce.js"],"name":"Providers","async":false}
a:I{"id":"6402","chunks":["3629:static/chunks/3629-0f2957a3da16c20f.js","8707:static/chunks/8707-2b2cb7694746a12d.js","2046:static/chunks/2046-d5dab6937324b8ff.js","8878:static/chunks/8878-1ab95d1f654f5058.js","8539:static/chunks/8539-3d0bbb715ba6a425.js","3234:static/chunks/3234-5172d4665c304b45.js","6628:static/chunks/6628-51ef5b07aceff5fd.js","1083:static/chunks/1083-51d2c7da64ef81a7.js","4214:static/chunks/4214-52251ceabff738d6.js","1623:static/chunks/1623-e5ed6c4108375445.js","1803:static/chunks/1803-84fbb5049df36eff.js","4585:static/chunks/4585-ba3497a793a372ad.js","4661:static/chunks/4661-744b95f516e1b044.js","3185:static/chunks/app/layout-87ea505fdc6113ce.js"],"name":"","async":false}
b:I{"id":"14463","chunks":["2272:static/chunks/webpack-776bf77f2147807e.js","9253:static/chunks/bce60fc1-11a2687c9c476ae2.js","6488:static/chunks/6488-777a88734e8838c1.js"],"name":"","async":false}
c:I{"id":"25786","chunks":["7601:static/chunks/app/error-706058cb55f291ca.js"],"name":"","async":false}

Home Page

import WidgetRenderer from "@/components/cta/widget-render";
import { fetchDataByQuery } from "@/graphql/utils";

const Cta = async () => {
  const graphqlQuery = `
  query {
    page(queryParams: { slug: "/home" }) {
      _id
      title
      slug
      blocks
    }
  }
`;

  const data = await fetchDataByQuery(graphqlQuery);

  if (data && data.page && data.page.blocks) {
    return <WidgetRenderer blocks={data.page.blocks} />;
  }

  return <WidgetRenderer blocks={[]} />;
};

export default Cta;

next.config.js

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

const nextConfig = {
  env: {
    APP_URL: `${process.env.NEXT_APP_URL}`,
    REST_API_URL: `${process.env.NEXT_API_URL}/api`,
    GRAPHQL_URL: `${process.env.NEXT_API_URL}/graphql`,
    NEXTAUTH_SECRET: `${process.env.NEXT_PUBLIC_NEXTAUTH_SECRET}`,
    NEXTAUTH_URL: `${process.env.NEXT_PUBLIC_NEXTAUTH_URL}`
  },
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: "attachment",
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    domains: [
      "awf-starter-kit.s3.ap-southeast-1.amazonaws.com",
    ],
  },
  webpack: (config) => {
    /**
     * Critical: prevents " ⨯ ./node_modules/canvas/build/Release/canvas.node
     * Module parse failed: Unexpected character '�' (1:0)" error
     */
    config.resolve.alias.canvas = false;

    // You may not need this, it's just to support moduleResolution: 'node16'
    config.resolve.extensionAlias = {
      '.js': ['.js', '.ts', '.tsx'],
    };

    return config;
  },

};

module.exports = {
  ...nextConfig,
  trailingSlash: false,
 
};

middleware.ts

import { getToken } from "next-auth/jwt";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function middleware(request: NextRequest) {
  const session = await getToken({
    req: request,
    secret: process.env.NEXTAUTH_SECRET,
  });

  const path = request.nextUrl.pathname;

  const publicPath = ["/", "/login"];

  if (session && path === "/login") {
    return NextResponse.redirect(new URL("/", request.nextUrl));
  } else if (publicPath.includes(path)) {
    return NextResponse.next();
  } else if (!session) {
    const url = new URL(`/login`, request.nextUrl);
    return NextResponse.redirect(url);
  } else {
    return NextResponse.next();
  }
}

export const config = {
  matcher: [
    "/learn/:path*",
    "/payment/:path*",
    "/payment-success/:path*",
    "/login",
    "/device-management",
    "/dashboard",
    "/profile",
    "/payment-history",
  ],
};