Upgrade packages to their latest versions (#92)

* Update Node.js to the latest LTS version

* Upgrade next-intl package to the latest version

* Upgrade package to latest version

* Update TS config

* Update ESLint config

* Upgrade new params type

* Upgrade MUI to latest version

* Update next-intl to the latest version

* Update Storybook to the latest version

* Upgrade Node.js to the latest version

.tool-versions

@@ -1 +1 @@
-nodejs 20.17.0
+nodejs 22.12.0

eslint.config.mjs

@@ -0,0 +1,21 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends(
+    "next/core-web-vitals",
+    "next/typescript",
+    "plugin:storybook/recommended",
+    "prettier",
+  ),
+];
+
+export default eslintConfig;

package.json

@@ -29,70 +29,71 @@
     "watch:test": "jest --watch"
   },
   "dependencies": {
-    "@emotion/cache": "11.13.1",
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
-    "@mui/icons-material": "5.16.7",
-    "@mui/material": "5.16.7",
-    "@mui/material-nextjs": "5.16.6",
-    "@next/third-parties": "14.2.14",
+    "@emotion/cache": "11.14.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@mui/icons-material": "6.2.1",
+    "@mui/material": "6.2.1",
+    "@mui/material-nextjs": "6.2.1",
+    "@next/third-parties": "15.1.2",
     "clsx": "2.1.1",
     "immer": "10.1.1",
-    "nanoid": "5.0.7",
-    "next": "14.2.14",
-    "next-intl": "3.20.0",
-    "nuqs": "1.19.3",
+    "nanoid": "5.0.9",
+    "next": "15.1.2",
+    "next-intl": "3.26.3",
+    "nuqs": "2.2.3",
     "radash": "12.1.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-use": "17.5.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-use": "17.6.0",
     "server-only": "0.0.1",
     "swr": "2.2.5",
-    "use-immer": "0.10.0",
-    "zod": "3.23.8"
+    "use-immer": "0.11.0",
+    "zod": "3.24.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "2.0.2",
-    "@faker-js/faker": "9.0.3",
-    "@next/bundle-analyzer": "14.2.14",
-    "@storybook/addon-a11y": "8.3.5",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/addon-interactions": "8.3.5",
-    "@storybook/addon-links": "8.3.5",
-    "@storybook/addon-onboarding": "8.3.5",
-    "@storybook/addon-themes": "8.3.5",
-    "@storybook/blocks": "8.3.5",
-    "@storybook/manager-api": "8.3.5",
-    "@storybook/nextjs": "8.3.5",
-    "@storybook/react": "8.3.5",
-    "@storybook/test": "8.3.5",
-    "@storybook/theming": "8.3.5",
+    "@chromatic-com/storybook": "3.2.3",
+    "@eslint/eslintrc": "3.2.0",
+    "@faker-js/faker": "9.3.0",
+    "@next/bundle-analyzer": "15.1.2",
+    "@storybook/addon-a11y": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/addon-onboarding": "8.4.7",
+    "@storybook/addon-themes": "8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/manager-api": "8.4.7",
+    "@storybook/nextjs": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/test": "8.4.7",
+    "@storybook/theming": "8.4.7",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/react": "16.0.1",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@types/jest-plugin-context": "2.9.7",
-    "@types/node": "22.7.4",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.2.14",
+    "@types/node": "22.10.2",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
+    "eslint": "9.17.0",
+    "eslint-config-next": "15.1.2",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-storybook": "0.9.0",
+    "eslint-plugin-storybook": "0.11.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-extended": "4.0.2",
     "jest-html-reporters": "3.1.7",
     "jest-plugin-context": "2.9.0",
-    "nodemon": "3.1.7",
+    "nodemon": "3.1.9",
     "npm-run-all": "4.1.5",
-    "prettier": "3.3.3",
+    "prettier": "3.4.2",
     "react-docgen-typescript": "2.2.2",
-    "rimraf": "5.0.10",
-    "storybook": "8.3.5",
-    "storybook-next-intl": "1.1.4",
+    "rimraf": "6.0.1",
+    "storybook": "8.4.7",
+    "storybook-next-intl": "1.2.4",
     "ts-node": "10.9.2",
-    "typescript": "5.5.4"
+    "typescript": "5.7.2"
   }
 }

src/app/[locale]/layout.tsx

@@ -1,19 +1,17 @@
 import "server-only";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { notFound } from "next/navigation";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 
 import { routing } from "@/config/i18n";
 
 import LocaleProvider from "@/providers/locale-provider";
 import MuiThemeProvider from "@/providers/mui-theme-provider";
 
 import type { BaseLayoutProps } from "@/types/component";
-import type { Locale } from "@/types/locale";
+import type { Params } from "@/types/params";
 
-export async function generateMetadata({
-  params: { locale },
-}: {
-  params: { locale: Locale };
-}) {
+export async function generateMetadata(params: Params) {
+  const { locale } = await params;
   const t = await getTranslations({
     locale,
     namespace: "common.metadata",
@@ -32,12 +30,21 @@ export function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
-  params: { locale },
+  params,
 }: BaseLayoutProps) {
-  // Initial value
-  unstable_setRequestLocale(locale);
+  // Initialize
+  const { locale } = await params;
+
+  // Ensure that the incoming `locale` is valid
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (!routing.locales.includes(locale as any)) {
+    notFound();
+  }
+
+  // Enable static rendering
+  setRequestLocale(locale);
 
   return (
     <html lang={locale}>

src/app/[locale]/page.tsx

@@ -1,13 +1,14 @@
 import "server-only";
-import { unstable_setRequestLocale } from "next-intl/server";
+import { setRequestLocale } from "next-intl/server";
 
 import { HomeScreen } from "@/screens/home";
 
 import type { BaseParams } from "@/types/params";
 
-export default function HomePage({ params: { locale } }: BaseParams) {
+export default async function HomePage({ params }: BaseParams) {
   // Initial value
-  unstable_setRequestLocale(locale);
+  const { locale } = await params;
+  setRequestLocale(locale);
 
   return <HomeScreen />;
 }

src/config/i18n.ts

@@ -1,4 +1,3 @@
-import { notFound } from "next/navigation";
 import { defineRouting } from "next-intl/routing";
 import { getRequestConfig } from "next-intl/server";
 
@@ -13,7 +12,21 @@ export const routing = defineRouting({
   locales,
 });
 
-export default getRequestConfig(async ({ locale }) => {
-  if (!locales.includes(locale as Locale)) notFound();
-  return getLocales(locale as Locale);
+export default getRequestConfig(async ({ requestLocale }) => {
+  // This typically corresponds to the `[locale]` segment
+  let locale = await requestLocale;
+
+  // Ensure that a valid locale is used
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (!locale || !routing.locales.includes(locale as any)) {
+    locale = routing.defaultLocale;
+  }
+
+  // Load locale messages
+  const messages = await getLocales(locale as Locale);
+
+  return {
+    locale,
+    messages,
+  };
 });

src/lib/navigation.ts

@@ -1,5 +1,5 @@
-import { createSharedPathnamesNavigation } from "next-intl/navigation";
+import { createNavigation } from "next-intl/navigation";
 import { routing } from "@/config/i18n";
 
-export const { Link, redirect, usePathname, useRouter } =
-  createSharedPathnamesNavigation(routing);
+export const { Link, getPathname, redirect, usePathname, useRouter } =
+  createNavigation(routing);

src/locales/index.ts

@@ -1,9 +1,5 @@
 import type { Locale } from "@/types/locale";
 
 export default async function getLocales(locale: Locale = "en") {
-  return {
-    messages: {
-      ...(await import(`./${locale}/${locale}.json`)).default,
-    },
-  };
+  return (await import(`./${locale}/${locale}.json`)).default;
 }

src/types/params.ts

@@ -1,5 +1,7 @@
 import type { Locale } from "./locale";
 
+export type Params = Promise<{ locale: Locale }>;
+
 export interface BaseParams {
-  params: { locale: Locale };
+  params: Params;
 }

tsconfig.json

@@ -19,7 +19,8 @@
     ],
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "strict": true
+    "strict": true,
+    "target": "ES2017"
   },
   "exclude": ["node_modules"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]