feat(frontend): Next.js 16 app with movie listing, detail pages, comments, favorites, hot page, i18n, dark mode, responsive layout

Author: huangyf

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/Dockerfile

@@ -0,0 +1,38 @@
+# ============================================================
+# Gying Movie Frontend - Multi-stage Docker Build
+# ============================================================
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci --only=production
+
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+
+# Build-time env vars (baked into the static output)
+ARG NEXT_PUBLIC_API_URL=""
+ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
+
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

frontend/README.md

@@ -0,0 +1,39 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+ - 开发环境：复制 .env.local.example 为 .env.local，保持 http://localhost:8880
+  - 生产环境：空 NEXT_PUBLIC_API_URL，通过 nginx 等反向代理将 /api 转发到后端
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/i18n.ts

@@ -0,0 +1,40 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import enTranslations from './public/locales/en/common.json';
+import zhTranslations from './public/locales/zh/common.json';
+
+const getInitialLanguage = () => {
+  if (typeof window === 'undefined') return 'en';
+  const saved = window.localStorage.getItem('i18nextLng');
+  if (saved) return saved;
+  return window.navigator.language.toLowerCase().startsWith('zh') ? 'zh' : 'en';
+};
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        common: enTranslations,
+      },
+      zh: {
+        common: zhTranslations,
+      },
+    },
+    fallbackLng: 'en',
+    lng: getInitialLanguage(),
+    defaultNS: 'common',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+if (typeof window !== 'undefined') {
+  i18n.on('languageChanged', (lng) => {
+    window.localStorage.setItem('i18nextLng', lng);
+    document.documentElement.lang = lng === 'zh' ? 'zh-CN' : 'en';
+  });
+}
+
+export default i18n;

frontend/next-i18next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'zh'],
+  },
+};

frontend/next.config.ts

@@ -0,0 +1,16 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactCompiler: true,
+  output: "standalone",
+  images: {
+    // Allow images from MinIO / OSS / CDN in production
+    remotePatterns: [
+      { protocol: "http", hostname: "localhost" },
+      { protocol: "https", hostname: "**.aliyuncs.com" },
+      { protocol: "https", hostname: "**.myqcloud.com" },
+    ],
+  },
+};
+
+export default nextConfig;