chore: migrate to getTranslations in async pages and layouts

src/app/[locale]/(default)/news/(main)/layout.tsx

@@ -1,6 +1,5 @@
 import { SquarePenIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { Link } from '@/lib/locale/navigation';
 
@@ -18,7 +17,7 @@ export default async function NewsHeaderLayout({
   const { locale } = await params;
 
   setRequestLocale(locale);
-  const t = useTranslations('news');
+  const t = await getTranslations('news');
   return (
     <>
       <div className='flex items-center justify-between'>

src/app/[locale]/(default)/news/(main)/page.tsx

@@ -1,5 +1,4 @@
 import { articleMockData as articleData } from '@/mock-data/article';
-import { useTranslations } from 'next-intl';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import {
   type SearchParams,
@@ -37,7 +36,7 @@ export default async function NewsPage({
 }) {
   const { locale } = await params;
   setRequestLocale(locale);
-  const t = useTranslations('ui');
+  const t = await getTranslations('ui');
   const searchParamsCache = createSearchParamsCache({
     [t('page')]: parseAsInteger.withDefault(1),
   });

src/app/[locale]/(default)/news/[article]/page.tsx

@@ -2,8 +2,7 @@ import {
   articleMockData as articleData,
   authorMockData as authorData,
 } from '@/mock-data/article';
-import { useTranslations } from 'next-intl';
-import { setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import readingTime from 'reading-time';
@@ -37,7 +36,7 @@ export default async function ArticlePage({
 }) {
   const { locale, article } = await params;
   setRequestLocale(locale);
-  const t = useTranslations('news');
+  const t = await getTranslations('news');
 
   const data = articleData.find((a) => a.id === Number(article));
   if (!data) {

src/app/[locale]/(default)/storage/(main)/layout.tsx

@@ -3,8 +3,7 @@ import { SearchBar } from '@/components/composites/SearchBar';
 import { SortSelector } from '@/components/composites/SortSelector';
 import { SelectorsSkeleton } from '@/components/storage/SelectorsSkeleton';
 import { ShoppingCartLink } from '@/components/storage/ShoppingCartLink';
-import { useTranslations } from 'next-intl';
-import { setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Suspense } from 'react';
 
 type StorageLayoutProps = {
@@ -19,8 +18,8 @@ export default async function StorageLayout({
   const { locale } = await params;
 
   setRequestLocale(locale);
-  const t = useTranslations('storage');
-  const tUi = useTranslations('ui');
+  const t = await getTranslations('storage');
+  const tUi = await getTranslations('ui');
 
   // This does not make much sense with a backend, most likely the categories in the backend will have a name in both languages and an ID
   const categories = [

src/app/[locale]/(default)/storage/(main)/page.tsx

@@ -1,5 +1,4 @@
 import { items } from '@/mock-data/items';
-import { useTranslations } from 'next-intl';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import {
   type SearchParams,
@@ -34,7 +33,7 @@ export default async function StoragePage({
   const { locale } = await params;
 
   setRequestLocale(locale);
-  const t = useTranslations('ui');
+  const t = await getTranslations('ui');
 
   const itemsPerPage = 12;
 

src/app/[locale]/(default)/storage/shopping-cart/layout.tsx

@@ -1,8 +1,7 @@
 import { Button } from '@/components/ui/Button';
 import { Link } from '@/lib/locale/navigation';
 import { ArrowLeftIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 type ShoppingCartLayoutProps = {
   children: React.ReactNode;
@@ -16,7 +15,7 @@ export default async function StorageLayout({
   const { locale } = await params;
 
   setRequestLocale(locale);
-  const t = useTranslations('storage.shoppingCart');
+  const t = await getTranslations('storage.shoppingCart');
   return (
     <>
       <div className='relative'>

src/app/[locale]/(default)/storage/shopping-cart/page.tsx

@@ -1,20 +1,18 @@
 import { BorrowDialog } from '@/components/storage/BorrowDialog';
 import { ShoppingCartClearDialog } from '@/components/storage/ShoppingCartClearDialog';
 import { ShoppingCartTable } from '@/components/storage/ShoppingCartTable';
-import { useTranslations } from 'next-intl';
-import { setRequestLocale } from 'next-intl/server';
-import { use } from 'react';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
-export default function StorageShoppingCartPage(props: {
+export default async function StorageShoppingCartPage({
+  params,
+}: {
   params: Promise<{ locale: string }>;
 }) {
-  const params = use(props.params);
-
-  const { locale } = params;
+  const { locale } = await params;
 
   setRequestLocale(locale);
-  const t = useTranslations('storage.shoppingCart');
-  const tLoanForm = useTranslations('storage.loanForm');
+  const t = await getTranslations('storage.shoppingCart');
+  const tLoanForm = await getTranslations('storage.loanForm');
 
   const tableMessages = {
     tableDescription: t('tableDescription'),