fix

Author: redreamality

i18n/request.ts

@@ -0,0 +1,12 @@
+import { getRequestConfig, setRequestLocale } from 'next-intl/server';
+import { locales } from '../src/config';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  const locale = await requestLocale;
+  return {
+    messages: (await import(`../messages/${locale}.json`)).default,
+    timeZone: 'Asia/Shanghai',
+    now: new Date(),
+    setRequestLocale: locale
+  };
+}); 

next.config.js

@@ -1,12 +1,11 @@
-const withNextIntl = require('next-intl/plugin')();
+const withNextIntl = require('next-intl/plugin')('./i18n/request.ts');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
     unoptimized: true,
   },
-  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
-  assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH || '',
+  basePath: process.env.NODE_ENV === 'production' ? '/wificard' : '',
 };
 
 module.exports = withNextIntl(nextConfig); 

src/app/[locale]/layout.tsx

@@ -1,13 +1,10 @@
-import { NextIntlClientProvider } from 'next-intl';
+import { NextIntlClientProvider, AbstractIntlMessages } from 'next-intl';
 import { notFound } from 'next/navigation';
-import { useLocale } from 'next-intl';
 import '../globals.css';
-import { locales } from '../../config';
+import { locales, LocaleType } from '../../config';
 
-export async function generateStaticParams() {
-  return Promise.all(
-    locales.map((locale) => ({ locale }))
-  );
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
 }
 
 export const metadata = {
@@ -37,19 +34,21 @@ export const metadata = {
   }
 };
 
-export default async function LocaleLayout({
-  children,
-  params
-}: {
+type LayoutProps = {
   children: React.ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
+  params: Promise<{ locale: LocaleType }>;
+}
+
+export default async function LocaleLayout(props: LayoutProps) {
+  const { children, params } = props;
   const { locale } = await params;
-  
-  let messages;
+
+  if (!locales.includes(locale)) notFound();
+
+  let messages: AbstractIntlMessages;
   try {
     messages = (await import(`../../../messages/${locale}.json`)).default;
-  } catch (error) {
+  } catch {
     notFound();
   }
 

src/components/WiFiCard.tsx

@@ -33,7 +33,7 @@ export default function WiFiCard({ scene }: WiFiCardProps) {
     }
     return 'default';
   });
-  const [customTemplateStyles, setCustomTemplateStyles] = useState<Record<TemplateType, { title: string; description: string }>>({
+  const [templateStyles, setTemplateStyles] = useState<Record<TemplateType, { title: string; description: string }>>({
     default: { title: '', description: '' },
     restaurant: { title: '', description: '' },
     hotel: { title: '', description: '' },
@@ -181,7 +181,7 @@ export default function WiFiCard({ scene }: WiFiCardProps) {
                     setPassword(newPassword);
                   }}
                   onTemplateStyleUpdate={(newTitle, newDescription) => {
-                    setCustomTemplateStyles(prev => ({
+                    setTemplateStyles((prev: Record<TemplateType, { title: string; description: string }>) => ({
                       ...prev,
                       [template]: { title: newTitle, description: newDescription }
                     }));

src/components/WifiPreviewCard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { memo, useState, useEffect } from 'react';
+import { memo, useState, useEffect, useMemo } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 import { PencilIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { useTranslations } from 'next-intl';
@@ -25,44 +25,38 @@ function WifiPreviewCard({ ssid, password, hidePassword, qrValue, template, onUp
   const [editedTitle, setEditedTitle] = useState('');
   const [editedDescription, setEditedDescription] = useState('');
 
-  // 使用翻译的模板样式
-  const TEMPLATE_STYLES: Record<TemplateType, {
-    title: string;
-    description: string;
-    icon: string;
-    textColor: string;
-  }> = {
+  const TEMPLATE_STYLES = useMemo(() => ({
     default: {
-      title: t('templates.default.title'),
-      description: t('templates.default.description'),
+      title: '免费 Wi-Fi',
+      description: '无需密码即可连接',
       icon: '📶',
       textColor: 'text-gray-900',
     },
     restaurant: {
-      title: t('templates.restaurant.title'),
-      description: t('templates.restaurant.description'),
+      title: '餐厅 Wi-Fi',
+      description: '用餐时享用免费网络',
       icon: '🍽️',
       textColor: 'text-gray-900',
     },
     hotel: {
-      title: t('templates.hotel.title'),
-      description: t('templates.hotel.description'),
+      title: '酒店 Wi-Fi',
+      description: '客房和公共区域均可连接',
       icon: '🏨',
       textColor: 'text-gray-900',
     },
     hospital: {
-      title: t('templates.hospital.title'),
-      description: t('templates.hospital.description'),
+      title: '医院 Wi-Fi',
+      description: '患者和访客可免费使用',
       icon: '🏥',
       textColor: 'text-gray-900',
     },
     office: {
-      title: t('templates.office.title'),
-      description: t('templates.office.description'),
+      title: '办公 Wi-Fi',
+      description: '安全可靠的商务网络',
       icon: '💼',
       textColor: 'text-gray-900',
     },
-  };
+  }), []);
 
   useEffect(() => {
     setEditedTitle(TEMPLATE_STYLES[template].title);

src/config.ts

@@ -1,4 +1,7 @@
-export const locales = ['en', 'zh', 'ja', 'de', 'it', 'es', 'fr'] as const;
+export type LocaleType = 'en' | 'zh' | 'ja' | 'de' | 'it' | 'es' | 'fr';
+
+export const locales: LocaleType[] = ['en', 'zh', 'ja', 'de', 'it', 'es', 'fr'];
+
 export const defaultLocale = 'en' as const;
 
 export type Locale = typeof locales[number];