Upgrade deps (#73)

* chore: update Next.js and fix i18n

* chore: update rest deps

* fix: build

* fix: install wget

* fix: HOSTNAME

Author: lujjjh

Dockerfile

@@ -1,27 +1,31 @@
-FROM node:18-alpine AS deps
-RUN apk add --no-cache libc6-compat
+FROM node:24-slim AS deps
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
 WORKDIR /app
 
-COPY package.json package-lock.json* ./
-RUN npm ci
+COPY pnpm-lock.yaml package.json ./
+RUN pnpm install --frozen-lockfile
 
-FROM node:18-alpine AS builder
+FROM node:24-slim AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-ARG CLUSTER_NAME
-ENV NEXT_PUBLIC_CLUSTER_NAME=$CLUSTER_NAME
+ENV NEXT_TELEMETRY_DISABLED=1
 
-ENV NEXT_TELEMETRY_DISABLED 1
+RUN pnpm run build
 
-RUN npm run build
-
-FROM node:18-alpine AS runner
+FROM node:24-slim AS runner
 WORKDIR /app
 
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
+RUN apt update && apt install -y wget
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -35,7 +39,8 @@ USER nextjs
 
 EXPOSE 3000
 
-ENV PORT 3000
+ENV HOSTNAME="0.0.0.0"
+ENV PORT=3000
 
 HEALTHCHECK --timeout=3s --start-period=10s \
     CMD wget -nv -t1 --spider http://localhost:3000/ || exit 1

components/cookie-consent/index.tsx

@@ -1,4 +1,4 @@
-import useTranslation from 'next-translate/useTranslation'
+import { useTranslations } from 'next-intl'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
@@ -53,7 +53,7 @@ const Wrapper = styled.div`
 const storageKey = 'cookie_consent_informed'
 
 const CookieConsent = () => {
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
   const [visible, setVisible] = useState(false)
 
   useEffect(() => {

components/features/index.tsx

@@ -1,4 +1,4 @@
-import useTranslationEx from 'hooks/use-translation-ex'
+import { RichTagsFunction, useTranslations } from 'next-intl'
 import Image from 'next/image'
 import styled from 'styled-components'
 
@@ -145,21 +145,21 @@ const Features = () => {
     }
   ]
 
-  const { tE } = useTranslationEx('index')
+  const t = useTranslations('index')
 
-  const componentElements = {
-    p: <p />,
-    q: <q />,
-    strong: <strong />
+  const componentElements: Record<string, RichTagsFunction> = {
+    p: (chunks) => <p>{chunks}</p>,
+    q: (chunks) => <q>{chunks}</q>,
+    strong: (chunks) => <strong>{chunks}</strong>
   }
 
   return (
     <Wrapper>
       {images.map(({ light, dark }, index) => (
         <FeatureWrapper key={index}>
           <MaxWidthWrapper $maxWidth={'calc(var(--max-width) / 2)'}>
-            <Heading>{tE(`features.${index}.title`, null, { componentElements })}</Heading>
-            <Description>{tE(`features.${index}.description`, null, { componentElements })}</Description>
+            <Heading>{t.rich(`features.${index}.title`, componentElements)}</Heading>
+            <Description>{t.rich(`features.${index}.description`, componentElements)}</Description>
           </MaxWidthWrapper>
 
           <FeatureImageWrapper>

components/footer/digitalocean-referral-badge.svg

@@ -1,13 +1,9 @@
-import useTranslation from 'next-translate/useTranslation'
-import Image from 'next/image'
+import { useTranslations } from 'next-intl'
 import styled from 'styled-components'
-import { CLUSTER_NAME, isMainlandChinaCluster } from 'utils/config'
 
 import CookieConsent from 'components/cookie-consent'
 import MaxWidthWrapper from 'components/max-width-wrapper'
 
-import digitalOceanReferralBadge from './digitalocean-referral-badge.svg'
-
 const Wrapper = styled.div`
   padding: 2rem 0;
   font-size: 0.875rem;
@@ -24,12 +20,6 @@ const Copyright = styled.div`
   opacity: 0.8;
 `
 
-const ICPLicense = styled.a`
-  opacity: 0.5;
-  color: var(--color-text);
-  text-decoration: none;
-`
-
 const Links = styled.ol`
   display: flex;
   gap: 1rem;
@@ -51,47 +41,24 @@ const Links = styled.ol`
   }
 `
 
-const DigitalOceanBadge = styled.a`
-  display: flex;
-  align-items: center;
-`
-
 const Footer = () => {
-  const { t } = useTranslation('common')
-
-  const showDigitalOceanBadge = CLUSTER_NAME === 'digitalocean'
+  const t = useTranslations('common')
 
   return (
     <>
       <Wrapper>
         <MaxWidthWrapper>
           <Copyright>&copy; 2021-{new Date().getFullYear()} LinearMouse</Copyright>
 
-          {isMainlandChinaCluster && (
-            <ICPLicense href="https://beian.miit.gov.cn" target="_blank" rel="noreferrer noopener">
-              沪ICP备2023003051号
-            </ICPLicense>
-          )}
-
           <Links>
             <a href="https://crowdin.com/project/linearmouse" target="_blank" rel="noreferrer noopener">
               {t('footer.help_translate')}
             </a>
             <a href="/privacy.html">{t('footer.privacy_policy')}</a>
           </Links>
-
-          {showDigitalOceanBadge && (
-            <DigitalOceanBadge
-              href="https://www.digitalocean.com/?refcode=f272815c14b2&utm_campaign=Referral_Invite&utm_source=LinearMouse"
-              target="_blank"
-              rel="noopener"
-            >
-              <Image alt="DigitalOcean Referral Badge" width={133} height={43} src={digitalOceanReferralBadge} />
-            </DigitalOceanBadge>
-          )}
         </MaxWidthWrapper>
       </Wrapper>
-      {!isMainlandChinaCluster && <CookieConsent />}
+      <CookieConsent />
     </>
   )
 }

components/footer/index.tsx

@@ -1,6 +1,5 @@
-import useTranslation from 'next-translate/useTranslation'
+import { useTranslations } from 'next-intl'
 import styled from 'styled-components'
-import { isMainlandChinaCluster } from 'utils/config'
 
 import LanguageSelect from 'components/language-select'
 
@@ -30,15 +29,14 @@ const Wrapper = styled.div`
 `
 
 const Navigation = () => {
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   return (
     <Wrapper role="navigation">
       <a href="https://github.com/linearmouse/linearmouse">{t('navigation.github')}</a>
       <a href="https://github.com/linearmouse/linearmouse/discussions">{t('navigation.discussions')}</a>
 
-      {!isMainlandChinaCluster && <LanguageSelect />}
-      {isMainlandChinaCluster && <a href="https://linearmouse.app/ncr/">Global</a>}
+      <LanguageSelect />
     </Wrapper>
   )
 }

components/header/navigation/index.tsx

@@ -1,4 +1,4 @@
-import useTranslation from 'next-translate/useTranslation'
+import { useTranslations } from 'next-intl'
 import { useCallback, useState } from 'react'
 import styled from 'styled-components'
 
@@ -29,7 +29,7 @@ const DownloadButton = styled.a`
   transition: background-color 0.1s ease;
 
   &::before {
-    margin-right: 0.625rem;
+    margin-inline-end: 0.625rem;
     content: '';
     font-size: 1.2rem;
   }
@@ -77,7 +77,7 @@ const Copied = styled.span`
 `
 
 const Download = () => {
-  const { t } = useTranslation('index')
+  const t = useTranslations('index')
 
   const [copied, setCopied] = useState(false)
 

components/hero/download/index.tsx

@@ -1,5 +1,4 @@
-import useTranslationEx from 'hooks/use-translation-ex'
-import Trans from 'next-translate/Trans'
+import { useTranslations } from 'next-intl'
 import styled from 'styled-components'
 
 import Marquee from './marquee'
@@ -42,25 +41,23 @@ const GradientText = styled.span`
 `
 
 const Slogan = () => {
-  const { t, tE } = useTranslationEx('index')
+  const t = useTranslations('index')
 
   return (
     <Wrapper>
-      {tE('slogan', null, {
-        componentElements: {
-          Marquee: (
-            <Marquee
-              lines={[
-                t('slogan_marquee.mouse_and_trackpad'),
-                t('slogan_marquee.scrolling_direction'),
-                t('slogan_marquee.pointer_acceleration'),
-                t('slogan_marquee.pointer_speed'),
-                t('slogan_marquee.modifier_keys')
-              ]}
-            />
-          ),
-          GradientText: <GradientText />
-        }
+      {t.rich('slogan', {
+        Marquee: () => (
+          <Marquee
+            lines={[
+              t('slogan_marquee.mouse_and_trackpad'),
+              t('slogan_marquee.scrolling_direction'),
+              t('slogan_marquee.pointer_acceleration'),
+              t('slogan_marquee.pointer_speed'),
+              t('slogan_marquee.modifier_keys')
+            ]}
+          />
+        ),
+        GradientText: (chunks) => <GradientText>{chunks}</GradientText>
       })}
     </Wrapper>
   )

components/hero/slogan/index.tsx

@@ -1,4 +1,4 @@
-import useTranslation from 'next-translate/useTranslation'
+import { useTranslations } from 'next-intl'
 import Link from 'next/link'
 import styled from 'styled-components'
 
@@ -75,11 +75,11 @@ const Wrapper = styled.button`
     border-radius: var(--border-radius-md);
     transition: opacity 0.15s ease;
     box-shadow: var(--shadow-md);
-    
+
     max-height: min(600px, 100vh - 150px);
     overflow-y: auto;
     overscroll-behavior: contain;
-    
+
     & > div {
       column-count: 2;
     }
@@ -111,7 +111,7 @@ const LanguageSelect = () => {
     document.cookie = `NEXT_LOCALE=${locale}; max-age=${30 * 24 * 3600}; path=/`
   }
 
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   return (
     <Wrapper type="button">