docs: Adjust locale switcher example to provide more type safety (#1256)

Related:
- #1240
- #853

Author: amannn

docs/pages/docs/routing/navigation.mdx

@@ -351,10 +351,13 @@ const router = useRouter();
 const params = useParams();
 
 router.replace(
-  // @ts-expect-error -- TypeScript will validate that only known `params`
-  // are used in combination with a given `pathname`. Since the two will
-  // always match for the current route, we can skip runtime checks.
-  {pathname, params},
+  {
+    pathname,
+    // @ts-expect-error -- TypeScript will validate that only known `params`
+    // are used in combination with a given `pathname`. Since the two will
+    // always match for the current route, we can skip runtime checks.
+    params
+  },
   {locale: 'de'}
 );
 ```

examples/example-app-router/src/components/LocaleSwitcherSelect.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import {useParams} from 'next/navigation';
 import {ChangeEvent, ReactNode, useTransition} from 'react';
 import {useRouter, usePathname} from '@/navigation';
+import {Locale} from '@/types';
 
 type Props = {
   children: ReactNode;
@@ -22,13 +23,16 @@ export default function LocaleSwitcherSelect({
   const params = useParams();
 
   function onSelectChange(event: ChangeEvent<HTMLSelectElement>) {
-    const nextLocale = event.target.value;
+    const nextLocale = event.target.value as Locale;
     startTransition(() => {
       router.replace(
-        // @ts-expect-error -- TypeScript will validate that only known `params`
-        // are used in combination with a given `pathname`. Since the two will
-        // always match for the current route, we can skip runtime checks.
-        {pathname, params},
+        {
+          pathname,
+          // @ts-expect-error -- TypeScript will validate that only known `params`
+          // are used in combination with a given `pathname`. Since the two will
+          // always match for the current route, we can skip runtime checks.
+          params
+        },
         {locale: nextLocale}
       );
     });

examples/example-app-router/src/types.ts

@@ -0,0 +1,3 @@
+import {locales} from './config';
+
+export type Locale = (typeof locales)[number];