Migration from nextjs 13 to 14

package.json

@@ -35,7 +35,7 @@
     "markdown": "^0.5.0",
     "matchmedia-polyfill": "^0.3.2",
     "negotiator": "^0.6.3",
-    "next": "^13.4.4",
+    "next": "^14.2.0",
     "next-client-cookies": "^1.1.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.8.0",

src/components/atoms/link/index.tsx

@@ -27,7 +27,7 @@ const Link = ({
 
   return (
     <NextLink
-      href={constructLocalizedUrl(href.toString(), localeOverride ?? locale)}
+      href={constructLocalizedUrl(href.toString(), localeOverride ?? (locale as string))}
       target={openInNewTab ? '_blank' : '_self'}
       className={linkClassName}
       {...props}

src/components/organisms/checkout/steps/ct-payment/index.tsx

@@ -32,7 +32,7 @@ const CommercetoolsPayment = ({
 
   const { session, isExpired } = useSession();
 
-  const { locale } = useParams();
+  const { locale: useParamsLocale } = useParams();
 
   const { projectSettings } = useProjectSettings();
 
@@ -64,7 +64,7 @@ const CommercetoolsPayment = ({
         projectKey,
         region,
         sessionId: session.token,
-        locale,
+        locale: useParamsLocale as string,
         onError(message) {
           switch (message.code) {
             case 'payment_failed':
@@ -104,7 +104,7 @@ const CommercetoolsPayment = ({
     projectKey,
     region,
     session?.token,
-    locale,
+    useParamsLocale,
     handleStepCompletion,
     isActive,
     router,

src/components/organisms/order-payment-section/components/costs.tsx

@@ -32,7 +32,7 @@ const Costs = ({
           value?.centAmount && value.centAmount > 0 ? (
             <div key={key} className={subCostsClassNames}>
               <Typography asSkeleton={loading}>{label}</Typography>
-              <Typography asSkeleton={loading}>{CurrencyHelpers.formatForCurrency(value, locale)}</Typography>
+              <Typography asSkeleton={loading}>{CurrencyHelpers.formatForCurrency(value, locale as string)}</Typography>
             </div>
           ) : (
             <></>
@@ -42,7 +42,7 @@ const Costs = ({
 
       <div className={totalAmountClassNames}>
         <Typography asSkeleton={loading}>{total.label}</Typography>
-        <Typography asSkeleton={loading}>{CurrencyHelpers.formatForCurrency(total.value, locale)}</Typography>
+        <Typography asSkeleton={loading}>{CurrencyHelpers.formatForCurrency(value, locale as string)}</Typography>
       </div>
     </div>
   );

src/hooks/useCustomRouter/index.ts

@@ -1,7 +1,6 @@
 'use client';
 
 import { useCallback } from 'react';
-import type { NavigateOptions } from 'next/dist/shared/lib/app-router-context';
 import { useRouter, useParams } from 'next/navigation';
 import { constructLocalizedUrl } from '@/utils/links';
 
@@ -11,15 +10,15 @@ const useCustomRouter = () => {
   const { locale } = useParams();
 
   const push = useCallback(
-    (href: string, { locale: localeOverride, ...options }: NavigateOptions & { locale?: string } = {}) => {
-      pushRoute(constructLocalizedUrl(href, localeOverride ?? locale), options);
+    (href: string, { locale: localeOverride, ...options }: Parameters<typeof pushRoute>[1] & { locale?: string } = {}) => {
+      pushRoute(constructLocalizedUrl(href, localeOverride ?? (locale as string)), options);
     },
     [pushRoute, locale],
   );
 
   const replace = useCallback(
-    (href: string, { locale: localeOverride, ...options }: NavigateOptions & { locale?: string } = {}) => {
-      replaceRoute(constructLocalizedUrl(href, localeOverride ?? locale), options);
+    (href: string, { locale: localeOverride, ...options }: Parameters<typeof replaceRoute>[1] & { locale?: string } = {}) => {
+      replaceRoute(constructLocalizedUrl(href, localeOverride ?? (locale as string)), options);
     },
     [replaceRoute, locale],
   );

src/lib/tastics/product-list/components/product-list-view-model/index.tsx

@@ -60,7 +60,7 @@ const ProductListViewModel = ({
       ]
     : [
         { name: translate('common.home'), link: '/' },
-        ...slug.split('/').map((chunk, index, arr) => ({
+        ...(slug as string[]).map((chunk, index, arr) => ({
           name: chunk.replace(/[-_]/g, ' '),
           link: `/${arr.slice(0, index + 1).join('/')}`,
         })),

src/providers/I18n/hooks/useTranslation/index.ts

@@ -22,7 +22,7 @@ const useTranslation = () => {
 
       const [namespace, key] = [token.substring(0, firstDotIndex), token.substring(firstDotIndex + 1)];
 
-      let message = translations[locale]?.[namespace]?.[key] ?? fallbackMessage;
+      let message = translations[locale as string]?.[namespace]?.[key] ?? fallbackMessage;
 
       for (const placeholder of Object.keys(values)) {
         message = message.replace(new RegExp(`\{${placeholder}\}`, 'g'), values[placeholder]);

src/providers/ship-and-language/index.tsx

@@ -110,7 +110,7 @@ const ShipAndLanguageProvider = ({ children }: React.PropsWithChildren) => {
     mutateAllCarts();
   }, [locale, mutateAllCarts]);
 
-  const [selectedLocationValue, setSelectedLocationValue] = useState(locale.split('-')[1]);
+  const [selectedLocationValue, setSelectedLocationValue] = useState((locale as string).split('-')[1]);
 
   const selectedLocation = locations.find((location) => location.value === selectedLocationValue);
   const selectedLanguage = selectedLocation?.languages.find((language) => language.value === locale);