fix: rewriting rules for my-pages

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/page.tsx

@@ -1,17 +0,0 @@
-import { benefits } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function BenefitsBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = benefits[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/page.tsx

@@ -1,17 +0,0 @@
-import { overview } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function OverviewBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = overview[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/[...catchAll]/page.tsx

@@ -1,17 +0,0 @@
-import { profile } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function ProfileBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = profile[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/page.tsx

@@ -1,17 +0,0 @@
-import { profile } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function ProfileBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = profile[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx

@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx

@@ -1,17 +0,0 @@
-import { stays } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function StaysBreadcrumbs({
-  params,
-}: PageArgs<LangParams>) {
-  const href = stays[params.lang].replace(`/${params.lang}`, "")
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
-    href,
-    locale: params.lang,
-  })
-  return <Breadcrumbs breadcrumbs={breadcrumbs} />
-}

app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css

@@ -0,0 +1,34 @@
+.content {
+  display: grid;
+  padding-bottom: 7.7rem;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+}
+
+@media screen and (min-width: 950px) {
+  .content {
+    gap: 10rem;
+    grid-template-columns: 25rem 1fr;
+    padding-bottom: 17.5rem;
+    padding-left: 2.4rem;
+    padding-right: 2.4rem;
+    padding-top: 5.8rem;
+  }
+}
+
+.blocks {
+  display: grid;
+  gap: 4.2rem;
+  padding-top: 4rem;
+  padding-left: 1.6rem;
+  padding-right: 1.6rem;
+}
+
+@media screen and (min-width: 950px) {
+  .blocks {
+    gap: 6.4rem;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -0,0 +1,45 @@
+import { myPages } from "@/constants/routes/myPages"
+import { serverClient } from "@/lib/trpc/server"
+
+import MaxWidth from "@/components/MaxWidth"
+import Content from "@/components/MyPages/AccountPage/Content"
+import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+import Sidebar from "@/components/MyPages/Sidebar"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function MyPages({
+  params,
+}: PageArgs<LangParams & { path: string[] }>) {
+  const baseUrl = myPages[params.lang].replace(`/${params.lang}`, "")
+  const pathUrl = params.path.join("/")
+
+  const accountPage = await serverClient().contentstack.accountPage.get({
+    url: `${baseUrl}/${pathUrl}`,
+    lang: params.lang,
+  })
+
+  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
+    href: `${baseUrl}/${pathUrl}`,
+    locale: params.lang,
+  })
+
+  return (
+    <>
+      <Breadcrumbs breadcrumbs={breadcrumbs} />
+
+      <div className={styles.content}>
+        <Sidebar lang={params.lang} />
+        <MaxWidth className={styles.blocks} tag="main">
+          {accountPage.content.length ? (
+            <Content lang={params.lang} content={accountPage.content} />
+          ) : (
+            <p>No content published</p>
+          )}
+        </MaxWidth>
+      </div>
+    </>
+  )
+}

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -7,22 +7,3 @@
   grid-template-rows: var(--header-height) auto 1fr;
   min-height: 100dvh;
 }
-
-.content {
-  display: grid;
-  padding-bottom: 7.7rem;
-  padding-left: 0;
-  padding-right: 0;
-  position: relative;
-}
-
-@media screen and (min-width: 950px) {
-  .content {
-    gap: 10rem;
-    grid-template-columns: 25rem 1fr;
-    padding-bottom: 17.5rem;
-    padding-left: 2.4rem;
-    padding-right: 2.4rem;
-    padding-top: 5.8rem;
-  }
-}

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -1,13 +1,11 @@
 import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
 import Header from "@/components/MyPages/Header"
-import Sidebar from "@/components/MyPages/Sidebar"
 
 import styles from "./layout.module.css"
 
 import type { MyPagesLayoutProps } from "@/types/components/myPages/layout"
 
 export default async function MyPagesLayout({
-  breadcrumbs,
   children,
   params,
 }: React.PropsWithChildren<MyPagesLayoutProps>) {
@@ -16,11 +14,7 @@ export default async function MyPagesLayout({
       className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
     >
       <Header lang={params.lang} />
-      {breadcrumbs}
-      <div className={styles.content}>
-        <Sidebar lang={params.lang} />
       {children}
     </div>
-    </div>
   )
 }

app/[lang]/(live)/(protected)/my-pages/page.module.css

@@ -1,15 +0,0 @@
-.blocks {
-  display: grid;
-  gap: 4.2rem;
-  padding-top: 4rem;
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
-}
-
-@media screen and (min-width: 950px) {
-  .blocks {
-    gap: 6.4rem;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}

app/[lang]/(live)/(protected)/my-pages/page.tsx

@@ -1,31 +0,0 @@
-import { redirect } from "next/navigation"
-
-import { myPages, overview } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
-import MaxWidth from "@/components/MaxWidth"
-import Content from "@/components/MyPages/AccountPage/Content"
-
-import styles from "./page.module.css"
-
-import type { LangParams, PageArgs, UriParams } from "@/types/params"
-
-export default async function MyPages({
-  params,
-  searchParams,
-}: PageArgs<LangParams, UriParams>) {
-  if (!searchParams.uri) {
-    throw new Error("Bad URI")
-  }
-
-  const accountPage = await serverClient().contentstack.accountPage.get({
-    url: searchParams.uri,
-    lang: params.lang,
-  })
-
-  return (
-    <MaxWidth className={styles.blocks} tag="main">
-      <Content lang={params.lang} content={accountPage.content} />
-    </MaxWidth>
-  )
-}

components/MyPages/AccountPage/Content.tsx

@@ -37,9 +37,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
 }
 
 export default function Content({ lang, content }: ContentProps) {
-  return (
+  return content.map((item) => {
-    <>
-      {content.map((item) => {
     switch (item.__typename) {
       case ContentEntries.AccountPageContentDynamicContent:
         const link = item.dynamic_content.link.linkConnection.edges.length
@@ -77,9 +75,7 @@ export default function Content({ lang, content }: ContentProps) {
         return (
           <section>
             <JsonToHtml
-                  embeds={
+              embeds={item.text_content.content.embedded_itemsConnection.edges}
-                    item.text_content.content.embedded_itemsConnection.edges
-                  }
               nodes={item.text_content.content.json.children}
             />
           </section>
@@ -87,7 +83,5 @@ export default function Content({ lang, content }: ContentProps) {
       default:
         return null
     }
-      })}
+  })
-    </>
-  )
 }

middlewares/authRequired.ts

@@ -3,7 +3,6 @@ import { NextResponse } from "next/server"
 import { findLang } from "@/constants/languages"
 import { authRequired } from "@/constants/routes/authRequired"
 import { login } from "@/constants/routes/handleAuth"
-import { benefits, myPages, overview, stays } from "@/constants/routes/myPages"
 
 import { auth } from "@/auth"
 
@@ -43,23 +42,6 @@ export const middleware = auth(async (request) => {
   const isLoggedIn = !!request.auth
 
   if (isLoggedIn) {
-    const pathNameWithoutLang = nextUrl.pathname.replace(`/${lang}`, "")
-    // Temp fix until we have a better solution for identifying AccountPage type
-    const accountPagePaths = [
-      myPages[lang],
-      overview[lang],
-      benefits[lang],
-      stays[lang],
-    ]
-
-    if (accountPagePaths.includes(nextUrl.pathname)) {
-      const searchParams = new URLSearchParams(request.nextUrl.searchParams)
-      searchParams.set("uri", pathNameWithoutLang)
-
-      return NextResponse.rewrite(
-        new URL(`/${lang}/my-pages?${searchParams.toString()}`, nextUrl)
-      )
-    }
     return NextResponse.next()
   }
 

next.config.js

@@ -84,6 +84,11 @@ const nextConfig = {
         destination: overview.de,
         permanent: false,
       },
+      {
+        source: myPages.en,
+        destination: overview.en,
+        permanent: false,
+      },
       {
         source: myPages.fi,
         destination: overview.fi,
@@ -104,56 +109,32 @@ const nextConfig = {
   rewrites() {
     return {
       beforeFiles: [
-        {
-          source: benefits.da,
-          destination: "/da/my-pages/benefits",
-        },
-        {
-          source: benefits.de,
-          destination: "/de/my-pages/benefits",
-        },
-        {
-          source: benefits.fi,
-          destination: "/fi/my-pages/benefits",
-        },
-        {
-          source: benefits.no,
-          destination: "/no/my-pages/benefits",
-        },
-        {
-          source: benefits.sv,
-          destination: "/sv/my-pages/benefits",
-        },
-
         { source: login.da, destination: "/da/login" },
         { source: login.de, destination: "/de/login" },
         { source: login.fi, destination: "/fi/login" },
         { source: login.no, destination: "/no/login" },
         { source: login.sv, destination: "/sv/login" },
 
-        { source: overview.da, destination: "/da/my-pages/overview" },
+        {
-        { source: overview.de, destination: "/de/my-pages/overview" },
+          source: `${myPages.da}/:path*`,
-        { source: overview.fi, destination: "/fi/my-pages/overview" },
+          destination: `/da/my-pages/:path*`,
-        { source: overview.no, destination: "/no/my-pages/overview" },
+        },
-        { source: overview.sv, destination: "/sv/my-pages/overview" },
+        {
-
+          source: `${myPages.de}/:path*`,
-        { source: profile.da, destination: "/da/my-pages/profile" },
+          destination: `/de/my-pages/:path*`,
-        { source: profile.de, destination: "/de/my-pages/profile" },
+        },
-        { source: profile.fi, destination: "/fi/my-pages/profile" },
+        {
-        { source: profile.no, destination: "/no/my-pages/profile" },
+          source: `${myPages.fi}/:path*`,
-        { source: profile.sv, destination: "/sv/my-pages/profile" },
+          destination: `/fi/my-pages/:path*`,
-
+        },
-        { source: profileEdit.da, destination: "/da/my-pages/profile/edit" },
+        {
-        { source: profileEdit.de, destination: "/de/my-pages/profile/edit" },
+          source: `${myPages.no}/:path*`,
-        { source: profileEdit.fi, destination: "/fi/my-pages/profile/edit" },
+          destination: `/no/my-pages/:path*`,
-        { source: profileEdit.no, destination: "/no/my-pages/profile/edit" },
+        },
-        { source: profileEdit.sv, destination: "/sv/my-pages/profile/edit" },
+        {
-
+          source: `${myPages.sv}/:path*`,
-        { source: stays.da, destination: "/da/my-pages/stays" },
+          destination: `/sv/my-pages/:path*`,
-        { source: stays.de, destination: "/de/my-pages/stays" },
+        },
-        { source: stays.fi, destination: "/fi/my-pages/stays" },
-        { source: stays.no, destination: "/no/my-pages/stays" },
-        { source: stays.sv, destination: "/sv/my-pages/stays" },
       ],
     }
   },