refactor: navigation imports to use I18nNavigation for i18n

Author: ixartz

public/assets/images/posthog-logo.svg

@@ -1,7 +1,7 @@
 import { SignOutButton } from '@clerk/nextjs';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Link from 'next/link';
 import { LocaleSwitcher } from '@/components/LocaleSwitcher';
+import { Link } from '@/libs/I18nNavigation';
 import { BaseTemplate } from '@/templates/BaseTemplate';
 
 export default async function DashboardLayout(props: {

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

@@ -1,7 +1,7 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Link from 'next/link';
 import { DemoBanner } from '@/components/DemoBanner';
 import { LocaleSwitcher } from '@/components/LocaleSwitcher';
+import { Link } from '@/libs/I18nNavigation';
 import { BaseTemplate } from '@/templates/BaseTemplate';
 
 export default async function Layout(props: {

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

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
-import Link from 'next/link';
+import { Link } from '@/libs/I18nNavigation';
 
 type IPortfolioProps = {
   params: Promise<{ locale: string }>;

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

@@ -2,8 +2,8 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
+import { useRouter } from '@/libs/I18nNavigation';
 import { CounterValidation } from '@/validations/CounterValidation';
 
 export const CounterForm = () => {

src/components/CounterForm.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from '@/libs/I18nNavigation';
 
 export const DemoBanner = () => (
   <div className="sticky top-0 z-50 bg-gray-900 p-4 text-center text-lg font-semibold text-gray-100 [&_a]:text-fuchsia-500 [&_a:hover]:text-indigo-500">

src/components/DemoBanner.tsx

@@ -2,8 +2,7 @@
 
 import type { ChangeEventHandler } from 'react';
 import { useLocale } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { usePathname } from '@/libs/I18nNavigation';
+import { usePathname, useRouter } from '@/libs/I18nNavigation';
 import { routing } from '@/libs/I18nRouting';
 
 export const LocaleSwitcher = () => {
@@ -12,8 +11,14 @@ export const LocaleSwitcher = () => {
   const locale = useLocale();
 
   const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
-    router.push(`/${event.target.value}${pathname}`);
-    router.refresh(); // Ensure the page takes the new locale into account related to the issue #395
+    const newLocale = event.target.value;
+
+    if (newLocale === locale) {
+      return;
+    }
+
+    const { search } = window.location;
+    router.push(`${pathname}${search}`, { locale: newLocale, scroll: false });
   };
 
   return (

src/components/LocaleSwitcher.tsx

@@ -81,7 +81,7 @@ export const Sponsors = () => (
         <td className="border-2 border-gray-300 p-3">
           <a href="https://posthog.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
             <Image
-              src="https://posthog.com/brand/posthog-logo.svg"
+              src="/assets/images/posthog-logo.svg"
               alt="PostHog"
               width={260}
               height={224}

src/components/Sponsors.tsx

@@ -1,4 +1,4 @@
 import { createNavigation } from 'next-intl/navigation';
 import { routing } from './I18nRouting';
 
-export const { usePathname } = createNavigation(routing);
+export const { Link, usePathname, useRouter } = createNavigation(routing);