fix(app): fix sync issue on pages with dynamic content

apps/app/package.json

@@ -4,7 +4,7 @@
   "author": "NearBlocks",
   "license": "BUSL-1.1",
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS='--inspect' next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "tsc --noEmit && eslint ./ --fix",
@@ -69,8 +69,8 @@
     "near-api-js": "5.0.0",
     "near-social-vm": "github:NearSocial/VM#2.5.5",
     "nearblock-translations": "https://github.com/Nearblocks/translations.git#516d489658dea178226e90f1707935e970598c51",
-    "nearblocks-trans-next-intl": "https://github.com/kevin-devstack/translations.git#fa68dd2eb68417ed0492519968dec6ed53a3b133",
-    "next": "14.2.15",
+    "nearblocks-trans-next-intl": "https://github.com/kevin-devstack/translations.git#f1d70344ddf82b10e91109e642e2cf7f38fed722",
+    "next": "15.0.3",
     "next-intl": "^3.19.4",
     "next-runtime-env": "^3.2.2",
     "next-sitemap": "4.2.3",
@@ -79,8 +79,8 @@
     "nextjs-toploader": "^3.7.15",
     "numerable": "^0.3.15",
     "qs": "^6.12.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0-rc-2ec26bc4-20241111",
+    "react-dom": "19.0.0-rc-2ec26bc4-20241111",
     "react-hook-form": "7.46.1",
     "react-perfect-scrollbar": "^1.5.8",
     "react-singleton-hook": "4.0.1",

apps/app/src/app/[locale]/about/page.tsx

@@ -2,11 +2,13 @@ export const runtime = 'edge';
 
 import { getTranslations } from 'next-intl/server';
 
-export default async function About({
-  params: { locale },
-}: {
-  params: { locale: string };
+export default async function About(props: {
+  params: Promise<{ locale: string }>;
 }) {
+  const params = await props.params;
+
+  const { locale } = params;
+
   const t = await getTranslations({ locale });
   return (
     <>

apps/app/src/app/[locale]/address/[id]/layout.tsx

@@ -1,20 +1,18 @@
-import { unstable_setRequestLocale } from 'next-intl/server';
-import dynamic from 'next/dynamic';
-
 import Buttons from '@/components/app/Icons/Button';
+import RpcMenu from '@/components/app/Layouts/RpcMenu';
 import SponserdText from '@/components/app/SponserdText';
 import FaCheckCircle from '@/components/Icons/FaCheckCircle';
 import ListCheck from '@/components/Icons/ListCheck';
 import { appUrl, networkId } from '@/utils/app/config';
 
 const network = process.env.NEXT_PUBLIC_NETWORK_ID;
 
-export async function generateMetadata({
-  params: { id, locale },
-}: {
-  params: { id: string; locale: string };
+export async function generateMetadata(props: {
+  params: Promise<{ id: string; locale: string }>;
 }) {
-  unstable_setRequestLocale(locale);
+  const params = await props.params;
+
+  const { id } = params;
 
   const thumbnail = `${appUrl}/api/og?account=true&address=${id}`;
 
@@ -40,19 +38,16 @@ export async function generateMetadata({
   };
 }
 
-export default function AddressLayout({
-  children,
-  params: { id },
-}: {
+export default async function AddressLayout(props: {
   children: React.ReactNode;
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }) {
-  const RpcMenu = dynamic(
-    () => import('../../../../components/app/Layouts/RpcMenu'),
-    {
-      ssr: false,
-    },
-  );
+  const params = await props.params;
+
+  const { id } = params;
+
+  const { children } = props;
+
   return (
     <>
       <div className="relative container mx-auto px-3 mb-10">

apps/app/src/app/[locale]/address/[id]/loading.tsx

@@ -7,19 +7,23 @@ import BalanceSkeleton from '@/components/app/skeleton/address/balance';
 import TabPanelGeneralSkeleton from '@/components/app/skeleton/address/dynamicTab';
 import { Link } from '@/i18n/routing';
 
-const tabs = [
-  { label: 'Transactions', message: 'Transactions', name: 'txns' },
-  { label: 'Receipts', message: 'Receipts', name: 'receipts' },
-  { label: 'Token Txns', message: 'tokenTxns', name: 'tokentxns' },
-  { label: 'NFT Token Txns', message: 'nftTokenTxns', name: 'nfttokentxns' },
-  { label: 'Access Keys', message: 'accessKeys', name: 'accesskeys' },
-  { label: 'Contract', message: 'contract', name: 'contract' },
-];
 export default function AddressLoading() {
   const t = useTranslations();
   const searchParams = useSearchParams();
   const tab = searchParams?.get('tab');
 
+  const tabs = [
+    { label: 'Transactions', message: 'Transactions', name: 'txns' },
+    { label: 'Receipts', message: 'Receipts', name: 'receipts' },
+    { label: 'Token Txns', message: t('tokenTxns'), name: 'tokentxns' },
+    {
+      label: 'NFT Token Txns',
+      message: t('nftTokenTxns'),
+      name: 'nfttokentxns',
+    },
+    { label: 'Access Keys', message: t('accessKeys'), name: 'accesskeys' },
+  ];
+
   const getClassName = (selected: boolean) =>
     classNames(
       'text-xs leading-4 font-medium overflow-hidden inline-block cursor-pointer p-2 mb-3 mr-2 focus:outline-none rounded-lg',
@@ -36,14 +40,14 @@ export default function AddressLoading() {
       <div className="block lg:flex lg:space-x-2 mb-10">
         <div className="w-full ">
           <div className="flex flex-wrap ">
-            {tabs?.map(({ label, message, name }: any) => {
+            {tabs?.map(({ message, name }: any) => {
               return (
                 <Link
                   className={getClassName(name === tab)}
                   href={`#`}
                   key={name}
                 >
-                  <h2>{t(`${message}`) || label}</h2>
+                  <h2>{message}</h2>
                 </Link>
               );
             })}

apps/app/src/app/[locale]/address/[id]/page.tsx

@@ -7,13 +7,20 @@ import Balance from '@/components/app/Address/Balance';
 import BalanceSkeleton from '@/components/app/skeleton/address/balance';
 import TabSkeletion from '@/components/app/skeleton/address/tab';
 
-export default async function AddressIndex({
-  params: { id, locale },
-  searchParams,
-}: {
-  params: { id: string; locale: string };
-  searchParams: { cursor?: string; order: string; p?: string; tab: string };
+export default async function AddressIndex(props: {
+  params: Promise<{ id: string; locale: string }>;
+  searchParams: Promise<{
+    cursor?: string;
+    order: string;
+    p?: string;
+    tab: string;
+  }>;
 }) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
+
+  const { id, locale } = params;
+
   return (
     <>
       <Suspense fallback={<BalanceSkeleton />}>
@@ -28,5 +35,3 @@ export default async function AddressIndex({
     </>
   );
 }
-
-export const revalidate = 20;

apps/app/src/app/[locale]/advertise/page.tsx

@@ -7,11 +7,13 @@ import ThemeImage from '@/components/app/Advertise/ThemeImage';
 import { Link } from '@/i18n/routing';
 import { appUrl } from '@/utils/app/config';
 
-export async function generateMetadata({
-  params: { locale },
-}: {
-  params: { locale: string };
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
+
+  const { locale } = params;
+
   unstable_setRequestLocale(locale);
 
   const t = await getTranslations();
@@ -45,11 +47,13 @@ export async function generateMetadata({
   };
 }
 
-export default async function Advertise({
-  params: { locale },
-}: {
-  params: { locale: string };
+export default async function Advertise(props: {
+  params: Promise<{ locale: string }>;
 }) {
+  const params = await props.params;
+
+  const { locale } = params;
+
   const t = await getTranslations({ locale });
   return (
     <div className="container mx-auto herobg flex flex-col items-center p-4.5 lg:!py-16 px-6">

apps/app/src/app/[locale]/apis/page.tsx

@@ -7,11 +7,13 @@ import ApiActions from '@/components/app/Apis/ApiActions';
 import { getRequest, postRequest } from '@/utils/app/api';
 
 const userApiURL = process.env.NEXT_PUBLIC_USER_API_URL;
-export default async function ApisPage({
-  searchParams: { status },
-}: {
-  searchParams: { status: string };
+export default async function ApisPage(props: {
+  searchParams: Promise<{ status: string }>;
 }) {
+  const searchParams = await props.searchParams;
+
+  const { status } = searchParams;
+
   const plans = await getRequest(`${userApiURL}plans`, {}, {}, false);
   const getContactDetails = async (contactDeatils: any) => {
     'use server';

apps/app/src/app/[locale]/blocks/[hash]/layout.tsx

@@ -6,11 +6,13 @@ import { appUrl } from '@/utils/app/config';
 
 const network = process.env.NEXT_PUBLIC_NETWORK_ID;
 
-export async function generateMetadata({
-  params: { hash, locale },
-}: {
-  params: { hash: string; locale: string };
+export async function generateMetadata(props: {
+  params: Promise<{ hash: string; locale: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
+
+  const { hash, locale } = params;
+
   unstable_setRequestLocale(locale);
 
   const t = await getTranslations({ locale });
@@ -52,5 +54,5 @@ export default async function HashLayout({
   children: React.ReactNode;
   params: any;
 }) {
-  return <>{children}</>;
+  return [children];
 }

apps/app/src/app/[locale]/blocks/[hash]/page.tsx

@@ -8,11 +8,13 @@ import HashLoading from '@/components/app/skeleton/blocks/hash';
 import { getRequest } from '@/utils/app/api';
 import { nanoToMilli } from '@/utils/app/libs';
 
-export default async function Hash({
-  params: { hash, locale },
-}: {
-  params: { hash: string; locale: string };
+export default async function Hash(props: {
+  params: Promise<{ hash: string; locale: string }>;
 }) {
+  const params = await props.params;
+
+  const { hash, locale } = params;
+
   unstable_setRequestLocale(locale);
 
   const [hashData, priceData] = await fetchHashAndPriceData(hash);

apps/app/src/app/[locale]/blocks/layout.tsx

@@ -5,11 +5,13 @@ import { appUrl } from '@/utils/app/config';
 
 const network = process.env.NEXT_PUBLIC_NETWORK_ID;
 
-export async function generateMetadata({
-  params: { locale },
-}: {
-  params: { hash: string; locale: string };
+export async function generateMetadata(props: {
+  params: Promise<{ hash: string; locale: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
+
+  const { locale } = params;
+
   unstable_setRequestLocale(locale);
 
   const metaTitle = 'Latest Near Protocol Blocks';

apps/app/src/app/[locale]/blocks/page.tsx

@@ -6,13 +6,18 @@ import { Suspense } from 'react';
 import List from '@/components/app/Blocks/List';
 import ListSkeleton from '@/components/app/skeleton/blocks/list';
 
-export default async function Blocks({
-  params: { locale },
-  searchParams: { cursor },
-}: {
-  params: { locale: string };
-  searchParams: { cursor?: string };
+export default async function Blocks(props: {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ cursor?: string }>;
 }) {
+  const searchParams = await props.searchParams;
+
+  const { cursor } = searchParams;
+
+  const params = await props.params;
+
+  const { locale } = params;
+
   const t = await getTranslations({ locale });
 
   return (
@@ -37,5 +42,3 @@ export default async function Blocks({
     </>
   );
 }
-
-export const revalidate = 20;

apps/app/src/app/[locale]/charts/active-accounts/page.tsx

@@ -7,11 +7,13 @@ import Chart from '@/components/app/Charts/Chart';
 import ChartDetails from '@/components/app/skeleton/charts/Detail';
 import { getRequest } from '@/utils/app/api';
 
-export default async function Tps({
-  params: { locale },
-}: {
-  params: { locale: string };
+export default async function Tps(props: {
+  params: Promise<{ locale: string }>;
 }) {
+  const params = await props.params;
+
+  const { locale } = params;
+
   const t = await getTranslations({ locale });
   const data = await getRequest('charts');
   return (

apps/app/src/app/[locale]/charts/addresses/page.tsx

@@ -11,11 +11,13 @@ import { appUrl } from '@/utils/app/config';
 
 const network = process.env.NEXT_PUBLIC_NETWORK_ID;
 
-export async function generateMetadata({
-  params: { locale },
-}: {
-  params: { hash: string; locale: string };
+export async function generateMetadata(props: {
+  params: Promise<{ hash: string; locale: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
+
+  const { locale } = params;
+
   const t = await getTranslations({ locale });
 
   const metaTitle = t('addressesCharts.metaTitle');
@@ -46,11 +48,13 @@ export async function generateMetadata({
   };
 }
 
-export default async function AddressesChart({
-  params: { locale },
-}: {
-  params: { locale: string };
+export default async function AddressesChart(props: {
+  params: Promise<{ locale: string }>;
 }) {
+  const params = await props.params;
+
+  const { locale } = params;
+
   const t = await getTranslations({ locale });
   const data = await getRequest('charts');
   return (