Fix: missing localizations in middleware populate

next/app/[locale]/(marketing)/[slug]/page.tsx

@@ -4,17 +4,18 @@ import ClientSlugHandler from '../ClientSlugHandler';
 import PageContent from '@/lib/shared/PageContent';
 import { generateMetadataObject } from '@/lib/shared/metadata';
 import { fetchCollectionType } from '@/lib/strapi';
+import type { LocaleSlugParamsProps } from '@/types/types';
 
-export async function generateMetadata(props: {
-  params: Promise<{ locale: string; slug: string }>;
-}): Promise<Metadata> {
-  const params = await props.params;
+export async function generateMetadata({
+  params,
+}: LocaleSlugParamsProps): Promise<Metadata> {
+  const { slug, locale } = await params;
   const [pageData] = await fetchCollectionType('pages', {
     filters: {
       slug: {
-        $eq: params.slug,
+        $eq: slug,
       },
-      locale: params.locale,
+      locale: locale,
     },
   });
 
@@ -23,16 +24,14 @@ export async function generateMetadata(props: {
   return metadata;
 }
 
-export default async function Page(props: {
-  params: Promise<{ locale: string; slug: string }>;
-}) {
-  const params = await props.params;
+export default async function Page({ params }: LocaleSlugParamsProps) {
+  const { slug, locale } = await params;
   const [pageData] = await fetchCollectionType('pages', {
     filters: {
       slug: {
-        $eq: params.slug,
+        $eq: slug,
       },
-      locale: params.locale,
+      locale: locale,
     },
   });
 
@@ -41,7 +40,7 @@ export default async function Page(props: {
       acc[localization.locale] = localization.slug;
       return acc;
     },
-    { [params.locale]: params.slug }
+    { [locale]: slug }
   );
 
   return (

next/app/[locale]/(marketing)/blog/[slug]/page.tsx

@@ -4,16 +4,16 @@ import React from 'react';
 import ClientSlugHandler from '../../ClientSlugHandler';
 import { BlogLayout } from '@/components/blog-layout';
 import { fetchCollectionType } from '@/lib/strapi';
-import type { Article } from '@/types/types';
+import type { Article, LocaleSlugParamsProps } from '@/types/types';
 
-export default async function SingleArticlePage(props: {
-  params: Promise<{ slug: string; locale: string }>;
-}) {
-  const params = await props.params;
-  const [article] = await fetchCollectionType<any[]>('articles', {
+export default async function SingleArticlePage({
+  params,
+}: LocaleSlugParamsProps) {
+  const { slug, locale } = await params;
+  const [article] = await fetchCollectionType<Article[]>('articles', {
     filters: {
       slug: {
-        $eq: params.slug,
+        $eq: slug,
       },
     },
   });
@@ -22,16 +22,16 @@ export default async function SingleArticlePage(props: {
     return <div>Blog not found</div>;
   }
 
-  const localizedSlugs = article.localizations?.reduce(
+  const localizedSlugs = article.localizations.reduce(
     (acc: Record<string, string>, localization: any) => {
       acc[localization.locale] = localization.slug;
       return acc;
     },
-    { [params.locale]: params.slug }
+    { [locale]: slug }
   );
 
   return (
-    <BlogLayout article={article} locale={params.locale}>
+    <BlogLayout article={article} locale={locale}>
       <ClientSlugHandler localizedSlugs={localizedSlugs} />
       <BlocksRenderer content={article.content} />
     </BlogLayout>

next/app/[locale]/(marketing)/blog/page.tsx

@@ -11,41 +11,37 @@ import { Heading } from '@/components/elements/heading';
 import { Subheading } from '@/components/elements/subheading';
 import { generateMetadataObject } from '@/lib/shared/metadata';
 import { fetchCollectionType, fetchSingleType } from '@/lib/strapi';
-import type { Article } from '@/types/types';
+import type { Article, LocaleParamsProps } from '@/types/types';
 
-export async function generateMetadata(props: {
-  params: Promise<{ locale: string }>;
-}): Promise<Metadata> {
-  const params = await props.params;
-  const pageData = await fetchSingleType('blog-page', {
-    locale: params.locale,
-  });
+export async function generateMetadata({
+  params,
+}: LocaleParamsProps): Promise<Metadata> {
+  const { locale } = await params;
+  const pageData = await fetchSingleType('blog-page', { locale });
 
   const seo = pageData.seo;
   const metadata = generateMetadataObject(seo);
   return metadata;
 }
 
-export default async function Blog(props: {
-  params: Promise<{ locale: string; slug: string }>;
-}) {
-  const params = await props.params;
+export default async function Blog({ params }: LocaleParamsProps) {
+  const { locale } = await params;
   const pageData = await fetchSingleType('blog-page', {
-    locale: params.locale,
+    locale: locale,
   });
   const [firstArticle, ...articles] = await fetchCollectionType<Article[]>(
     'articles',
     {
-      filters: { locale: { $eq: params.locale } },
+      filters: { locale: { $eq: locale } },
     }
   );
 
-  const localizedSlugs = pageData.localizations?.reduce(
+  const localizedSlugs = pageData.localizations.reduce(
     (acc: Record<string, string>, localization: any) => {
       acc[localization.locale] = 'blog';
       return acc;
     },
-    { [params.locale]: 'blog' }
+    { [locale]: 'blog' }
   );
 
   return (
@@ -67,7 +63,7 @@ export default async function Blog(props: {
 
         <BlogCard
           article={firstArticle}
-          locale={params.locale}
+          locale={locale}
           key={firstArticle.title}
         />
 

next/app/[locale]/(marketing)/page.tsx

@@ -4,18 +4,19 @@ import ClientSlugHandler from './ClientSlugHandler';
 import PageContent from '@/lib/shared/PageContent';
 import { generateMetadataObject } from '@/lib/shared/metadata';
 import { fetchCollectionType } from '@/lib/strapi';
+import type { LocaleParamsProps } from '@/types/types';
 
-export async function generateMetadata(props: {
-  params: Promise<{ locale: string }>;
-}): Promise<Metadata> {
-  const params = await props.params;
+export async function generateMetadata({
+  params,
+}: LocaleParamsProps): Promise<Metadata> {
+  const { locale } = await params;
 
   const [pageData] = await fetchCollectionType('pages', {
     filters: {
       slug: {
         $eq: 'homepage',
       },
-      locale: params.locale,
+      locale: locale,
     },
   });
 
@@ -24,17 +25,15 @@ export async function generateMetadata(props: {
   return metadata;
 }
 
-export default async function HomePage(props: {
-  params: Promise<{ locale: string }>;
-}) {
-  const params = await props.params;
+export default async function HomePage({ params }: LocaleParamsProps) {
+  const { locale } = await params;
 
   const [pageData] = await fetchCollectionType('pages', {
     filters: {
       slug: {
         $eq: 'homepage',
       },
-      locale: params.locale,
+      locale: locale,
     },
   });
 
@@ -43,7 +42,7 @@ export default async function HomePage(props: {
       acc[localization.locale] = '';
       return acc;
     },
-    { [params.locale]: '' }
+    { [locale]: '' }
   );
 
   return (

next/app/[locale]/(marketing)/products/[slug]/page.tsx

@@ -7,29 +7,29 @@ import DynamicZoneManager from '@/components/dynamic-zone/manager';
 import { SingleProduct } from '@/components/products/single-product';
 import { generateMetadataObject } from '@/lib/shared/metadata';
 import { fetchCollectionType } from '@/lib/strapi';
-import type { Product } from '@/types/types';
+import type { LocaleSlugParamsProps, Product } from '@/types/types';
 
-export async function generateMetadata(props: {
-  params: Promise<{ locale: string; slug: string }>;
-}): Promise<Metadata> {
-  const params = await props.params;
+export async function generateMetadata({
+  params,
+}: LocaleSlugParamsProps): Promise<Metadata> {
+  const { slug } = await params;
 
   const [pageData] = await fetchCollectionType<Product[]>('products', {
-    filters: { slug: { $eq: params.slug } },
+    filters: { slug: { $eq: slug } },
   });
 
   const seo = pageData;
   const metadata = generateMetadataObject(seo);
   return metadata;
 }
 
-export default async function SingleProductPage(props: {
-  params: Promise<{ slug: string; locale: string }>;
-}) {
-  const params = await props.params;
+export default async function SingleProductPage({
+  params,
+}: LocaleSlugParamsProps) {
+  const { slug, locale } = await params;
 
   const [pageData] = await fetchCollectionType<Product[]>('products', {
-    filters: { slug: { $eq: params.slug } },
+    filters: { slug: { $eq: slug } },
   });
 
   if (!pageData) {
@@ -44,7 +44,7 @@ export default async function SingleProductPage(props: {
         {pageData?.dynamic_zone && (
           <DynamicZoneManager
             dynamicZone={pageData?.dynamic_zone}
-            locale={params.locale}
+            locale={locale}
           />
         )}
       </Container>

next/app/[locale]/(marketing)/products/page.tsx

@@ -11,38 +11,32 @@ import { Featured } from '@/components/products/featured';
 import { ProductItems } from '@/components/products/product-items';
 import { generateMetadataObject } from '@/lib/shared/metadata';
 import { fetchCollectionType, fetchSingleType } from '@/lib/strapi';
-import { Product } from '@/types/types';
+import { LocaleParamsProps, Product } from '@/types/types';
 
-export async function generateMetadata(props: {
-  params: Promise<{ locale: string }>;
-}): Promise<Metadata> {
-  const params = await props.params;
-  const pageData = await fetchSingleType('product-page', {
-    locale: params.locale,
-  });
+export async function generateMetadata({
+  params,
+}: LocaleParamsProps): Promise<Metadata> {
+  const { locale } = await params;
+  const pageData = await fetchSingleType('product-page', { locale });
 
   const seo = pageData?.seo;
   const metadata = generateMetadataObject(seo);
   return metadata;
 }
 
-export default async function Products(props: {
-  params: Promise<{ locale: string }>;
-}) {
-  const params = await props.params;
+export default async function Products({ params }: LocaleParamsProps) {
+  const { locale } = await params;
 
   // Fetch the product-page and products data
-  const pageData = await fetchSingleType('product-page', {
-    locale: params.locale,
-  });
+  const pageData = await fetchSingleType('product-page', { locale });
   const products = await fetchCollectionType<Product[]>('products');
 
-  const localizedSlugs = pageData.localizations?.reduce(
+  const localizedSlugs = pageData.localizations.reduce(
     (acc: Record<string, string>, localization: any) => {
       acc[localization.locale] = 'products';
       return acc;
     },
-    { [params.locale]: 'products' }
+    { [locale]: 'products' }
   );
   const featured = products.filter(
     (product: { featured?: boolean }) => product.featured
@@ -62,8 +56,8 @@ export default async function Products(props: {
         <Subheading className="max-w-3xl mx-auto">
           {pageData.sub_heading}
         </Subheading>
-        <Featured products={featured} locale={params.locale} />
-        <ProductItems products={products} locale={params.locale} />
+        <Featured products={featured} locale={locale} />
+        <ProductItems products={products} locale={locale} />
       </Container>
     </div>
   );

next/app/[locale]/layout.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 import { ViewTransitions } from 'next-view-transitions';
 import { Inter } from 'next/font/google';
 import { draftMode } from 'next/headers';
+import type { PropsWithChildren } from 'react';
 import React from 'react';
 
 import { DraftModeBanner } from '@/components/draft-mode-banner';
@@ -12,6 +13,7 @@ import { CartProvider } from '@/context/cart-context';
 import { generateMetadataObject } from '@/lib/shared/metadata';
 import { fetchSingleType } from '@/lib/strapi';
 import { cn } from '@/lib/utils';
+import type { LocaleParamsProps } from '@/types/types';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -20,31 +22,24 @@ const inter = Inter({
 });
 
 // Default Global SEO for pages without them
-export async function generateMetadata(props: {
-  params: Promise<{ locale: string }>;
-}): Promise<Metadata> {
-  const params = await props.params;
-
-  const pageData = await fetchSingleType('global', { locale: params.locale });
+export async function generateMetadata({
+  params,
+}: PropsWithChildren<LocaleParamsProps>): Promise<Metadata> {
+  const { locale } = await params;
+  const pageData = await fetchSingleType('global', { locale });
 
   const seo = pageData.seo;
   const metadata = generateMetadataObject(seo);
   return metadata;
 }
 
-export default async function LocaleLayout(props: {
-  children: React.ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
-  const params = await props.params;
-
-  const { locale } = params;
-
-  const { children } = props;
-
+export default async function LocaleLayout({
+  children,
+  params,
+}: PropsWithChildren<LocaleParamsProps>) {
   const { isEnabled: isDraftMode } = await draftMode();
-
-  const pageData = await fetchSingleType('global', { locale: params.locale });
+  const { locale } = await params;
+  const pageData = await fetchSingleType('global', { locale });
 
   return (
     <ViewTransitions>

next/app/layout.tsx

@@ -5,7 +5,7 @@ import { i18n } from '@/i18n.config';
 
 import './globals.css';
 
-import { SlugProvider } from './context/SlugContext';
+import { SlugProvider } from '@/app/context/SlugContext';
 import { Preview } from '@/components/preview';
 
 export const viewport: Viewport = {