Merge pull request #384 from ixartz/next-intl4

Upgrade to next-intl 4

Author: ixartz

.env

@@ -6,8 +6,6 @@
 # Clerk authentication
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cmVsYXhlZC10dXJrZXktNjcuY2xlcmsuYWNjb3VudHMuZGV2JA
 
-NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
-
 # Sentry
 # Disable Sentry warning with TurboPack
 SENTRY_SUPPRESS_TURBOPACK_WARNING=1

.vscode/settings.json

@@ -12,7 +12,9 @@
     // useRouter should be imported from `next/navigation` instead of `next/router`
     "next/router",
     // give priority for Link to next/link instead of lucide-react
-    "lucide-react"
+    "lucide-react",
+    // Not used in the project and conflicts with `use()` from React
+    "chai"
   ],
   "typescript.preferences.preferTypeOnlyAutoImports": true, // Prefer type-only imports
 

next.config.ts

@@ -1,66 +1,69 @@
+import type { NextConfig } from 'next';
 import withBundleAnalyzer from '@next/bundle-analyzer';
 import { withSentryConfig } from '@sentry/nextjs';
 import createNextIntlPlugin from 'next-intl/plugin';
 import './src/libs/Env';
 
-const withNextIntl = createNextIntlPlugin('./src/libs/i18n.ts');
+// Define the base Next.js configuration
+let nextConfig: NextConfig = {
+  eslint: {
+    dirs: ['.'],
+  },
+  poweredByHeader: false,
+  reactStrictMode: true,
+  serverExternalPackages: ['@electric-sql/pglite'],
+};
 
-const bundleAnalyzer = withBundleAnalyzer({
-  enabled: process.env.ANALYZE === 'true',
-});
+// Initialize the Next-Intl plugin
+nextConfig = createNextIntlPlugin('./src/libs/i18n.ts')(nextConfig);
 
-/** @type {import('next').NextConfig} */
-export default withSentryConfig(
-  bundleAnalyzer(
-    withNextIntl({
-      eslint: {
-        dirs: ['.'],
-      },
-      poweredByHeader: false,
-      reactStrictMode: true,
-      serverExternalPackages: ['@electric-sql/pglite'],
-    }),
-  ),
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
-    // FIXME: Add your Sentry organization and project names
-    org: 'nextjs-boilerplate-org',
-    project: 'nextjs-boilerplate',
+// Conditionally enable bundle analysis
+if (process.env.ANALYZE === 'true') {
+  nextConfig = withBundleAnalyzer()(nextConfig);
+}
 
-    // Only print logs for uploading source maps in CI
-    silent: !process.env.CI,
+// Sentry configuration
+const sentryOptions = {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+  // FIXME: Add your Sentry organization and project names
+  org: 'nextjs-boilerplate-org',
+  project: 'nextjs-boilerplate',
 
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
 
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-    // Automatically annotate React components to show their full name in breadcrumbs and session replay
-    reactComponentAnnotation: {
-      enabled: true,
-    },
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
 
-    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-    // This can increase your server load as well as your hosting bill.
-    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-    // side errors will fail.
-    tunnelRoute: '/monitoring',
+  // Automatically annotate React components to show their full name in breadcrumbs and session replay
+  reactComponentAnnotation: {
+    enabled: true,
+  },
 
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: '/monitoring',
 
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
 
-    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-    // See the following for more information:
-    // https://docs.sentry.io/product/crons/
-    // https://vercel.com/docs/cron-jobs
-    automaticVercelMonitors: true,
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
 
-    // Disable Sentry telemetry
-    telemetry: false,
-  },
-);
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+
+  // Disable Sentry telemetry
+  telemetry: false,
+};
+
+export default withSentryConfig(nextConfig, sentryOptions);

package-lock.json

@@ -41,7 +41,7 @@
     "@t3-oss/env-nextjs": "^0.13.4",
     "drizzle-orm": "^0.43.1",
     "next": "^15.3.1",
-    "next-intl": "^3.26.5",
+    "next-intl": "^4.1.0",
     "pg": "^8.15.6",
     "pino": "^9.6.0",
     "pino-pretty": "^13.0.0",

package.json

@@ -1,4 +1,4 @@
-import { routing } from '@/libs/i18nNavigation';
+import { routing } from '@/libs/i18nRouting';
 import { enUS, frFR } from '@clerk/localizations';
 import { ClerkProvider } from '@clerk/nextjs';
 import { setRequestLocale } from 'next-intl/server';
@@ -9,6 +9,7 @@ export default async function AuthLayout(props: {
 }) {
   const { locale } = await props.params;
   setRequestLocale(locale);
+
   let clerkLocale = enUS;
   let signInUrl = '/sign-in';
   let signUpUrl = '/sign-up';

src/app/[locale]/(auth)/layout.tsx

@@ -2,7 +2,7 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
 
 type IAboutProps = {
-  params: Promise<{ slug: string; locale: string }>;
+  params: Promise<{ locale: string }>;
 };
 
 export async function generateMetadata(props: IAboutProps) {

src/app/[locale]/(marketing)/about/page.tsx

@@ -1,4 +1,4 @@
-import { routing } from '@/libs/i18nNavigation';
+import { routing } from '@/libs/i18nRouting';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
 

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

@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import { PostHogProvider } from '@/components/analytics/PostHogProvider';
 import { DemoBadge } from '@/components/DemoBadge';
-import { routing } from '@/libs/i18nNavigation';
-import { NextIntlClientProvider } from 'next-intl';
-import { getMessages, setRequestLocale } from 'next-intl/server';
+import { routing } from '@/libs/i18nRouting';
+import { hasLocale, NextIntlClientProvider } from 'next-intl';
+import { setRequestLocale } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 import '@/styles/global.css';
 
@@ -42,25 +42,16 @@ export default async function RootLayout(props: {
 }) {
   const { locale } = await props.params;
 
-  if (!routing.locales.includes(locale)) {
+  if (!hasLocale(routing.locales, locale)) {
     notFound();
   }
 
   setRequestLocale(locale);
 
-  // Using internationalization in Client Components
-  const messages = await getMessages();
-
-  // The `suppressHydrationWarning` attribute in <body> is used to prevent hydration errors caused by Sentry Overlay,
-  // which dynamically adds a `style` attribute to the body tag.
-
   return (
     <html lang={locale}>
-      <body suppressHydrationWarning>
-        <NextIntlClientProvider
-          locale={locale}
-          messages={messages}
-        >
+      <body>
+        <NextIntlClientProvider>
           <PostHogProvider>
             {props.children}
           </PostHogProvider>

src/app/[locale]/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { routing } from '@/libs/i18nNavigation';
+import { routing } from '@/libs/i18nRouting';
 import * as Sentry from '@sentry/nextjs';
 import NextError from 'next/error';
 import { useEffect } from 'react';