chore: middleware to proxy and improving typing

Author: csantosr

app/[lang]/dictionaries.ts

@@ -11,3 +11,5 @@ export const hasLocale = (locale: string): locale is Locale =>
   locale in dictionaries
 
 export const getDictionary = async (locale: Locale) => dictionaries[locale]()
+
+export type Dictionary = Awaited<ReturnType<typeof getDictionary>>;

app/[lang]/game/_components/card.tsx

@@ -1,13 +1,12 @@
 import { type FC, useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/cls";
 import { Button } from "@/primitives/components/ui/button";
+import { Dictionary } from "@/dictionaries";
 
 const transitionClass = "duration-700";
 // biome-ignore lint/style/noNonNullAssertion: Trust me bro
 const changeOnMs = Number(transitionClass.split("-")[1]!) / 3;
 
-type Dictionary = Awaited<ReturnType<typeof import("@/dictionaries").getDictionary>>;
-
 export const GameCard: FC<{
   player: { name: string; isSpy: boolean };
   onFinishCheck: () => void;

app/[lang]/game/local/play/_components/game.tsx

@@ -5,8 +5,7 @@ import { type FC, useCallback, useMemo, useState } from "react";
 import { GameCard } from "@/game/_components/card";
 import { gameSettingsAtom } from "../../_store/game-settings";
 import { GameTimer } from "./timer";
-
-type Dictionary = Awaited<ReturnType<typeof import("@/dictionaries").getDictionary>>;
+import { Dictionary } from "@/dictionaries";
 
 export const Game: FC<{ dict: Dictionary }> = ({ dict }) => {
   const gameSettings = useAtomValue(gameSettingsAtom);

app/[lang]/game/local/play/_components/timer.tsx

@@ -3,11 +3,10 @@
 import { type FC, useEffect, useState } from "react";
 import { cn } from "@/lib/cls";
 import { Button } from "@/primitives/components/ui/button";
+import { Dictionary } from "@/dictionaries";
 
 const TIMER_DURATION = 120; // 2 minutes in seconds
 
-type Dictionary = Awaited<ReturnType<typeof import("@/dictionaries").getDictionary>>;
-
 interface PlayerRole {
   name: string;
   isSpy: boolean;

app/[lang]/game/local/play/page.tsx

@@ -2,14 +2,11 @@ import { notFound } from 'next/navigation';
 import { getDictionary, hasLocale } from '@/dictionaries';
 import { Game } from "./_components/game";
 
-const Page = async ({
-  params,
-}: {
-  params: { lang: string };
-}) => {
-  if (!hasLocale(params.lang)) notFound();
+const Page = async ({ params }: PageProps<'/[lang]/game/local/play'>) => {
+  const { lang } = await params
+  if (!hasLocale(lang)) notFound();
 
-  const dict = await getDictionary(params.lang);
+  const dict = await getDictionary(lang);
 
   return <Game dict={dict} />;
 };

app/[lang]/game/local/setup/_components/form.tsx

@@ -26,11 +26,10 @@ import {
   InputGroupInput,
 } from "@/primitives/components/ui/input-group";
 import { gameSettingsAtom } from "../../_store/game-settings";
+import { Dictionary } from "@/dictionaries";
 
 const MIN_PLAYERS = 3;
 
-type Dictionary = Awaited<ReturnType<typeof import("@/dictionaries").getDictionary>>;
-
 const createLocalGameFormSchema = (dict: Dictionary) => z
   .object({
     players: z

app/[lang]/game/local/setup/page.tsx

@@ -2,18 +2,15 @@ import { notFound } from 'next/navigation';
 import { getDictionary, hasLocale } from '@/dictionaries';
 import { LocalUsersForm } from "./_components/form";
 
-const Page = async ({
-  params,
-}: {
-  params: { lang: string };
-}) => {
-  if (!hasLocale(params.lang)) notFound();
+const Page = async ({ params }: PageProps<'/[lang]/game/local/setup'>) => {
+  const { lang } = await params
+  if (!hasLocale(lang)) notFound();
 
-  const dict = await getDictionary(params.lang);
+  const dict = await getDictionary(lang);
 
   return (
     <div className="w-2/3">
-      <LocalUsersForm dict={dict} lang={params.lang} />
+      <LocalUsersForm dict={dict} lang={lang} />
     </div>
   );
 };

app/[lang]/game/page.tsx

@@ -4,17 +4,14 @@ import { Button } from "@/primitives/components/ui/button";
 import { notFound } from 'next/navigation'
 import { getDictionary, hasLocale } from '@/dictionaries'
 
-const Page = async ({
-  params,
-}: {
-  params: { lang: string };
-}) => {
-  if (!hasLocale(params.lang)) notFound()
+const Page = async ({ params }: PageProps<'/[lang]/game'>) => {
+  const { lang } = await params
+  if (!hasLocale(lang)) notFound()
 
-  const dict = await getDictionary(params.lang)
+  const dict = await getDictionary(lang)
 
-  const otherLang = params.lang === 'en' ? 'es' : 'en';
-  const langButtonText = params.lang === 'en' ? '¿Español?' : 'English?';
+  const otherLang = lang === 'en' ? 'es' : 'en';
+  const langButtonText = lang === 'en' ? '¿Español?' : 'English?';
 
   return (
     <div className="relative flex flex-col gap-4">
@@ -28,7 +25,7 @@ const Page = async ({
       </Link>
       <FuzzyText>Guesspy</FuzzyText>
       <div className="flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-10">
-        <Link className="w-full sm:w-auto" href={`/${params.lang}/game/local/setup`}>
+        <Link className="w-full sm:w-auto" href={`/${lang}/game/local/setup`}>
           <Button className="w-full sm:w-auto">{dict.game.local}</Button>
         </Link>
         <Button disabled>{dict.game.room}</Button>

app/layout.tsx

@@ -35,15 +35,12 @@ export const metadata: Metadata = {
   ],
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
   params,
-}: Readonly<{
-  children: React.ReactNode;
-  params: { lang: string };
-}>) {
+}: LayoutProps<'/[lang]/game'>) {
   return (
-    <html lang={params.lang} suppressHydrationWarning>
+    <html lang={(await params).lang} suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         <ThemeProvider

middleware.js proxy.jsmiddleware.js renamed to proxy.js

@@ -12,7 +12,7 @@ function getLocale(request) {
   return match(languages, locales, defaultLocale)
 }
 
-export function middleware(request) {
+export function proxy(request) {
   const { pathname } = request.nextUrl
 
   const pathnameHasLocale = locales.some(