企业官网建设流程全解析

• 文档
• 教程
• 前端

本指南以仓库内memory-game/子项目及其 README（含 孟加拉语翻译版）为骨架，系统讲解这个由create-next-app脚手架初始化的记忆翻牌游戏的启动方式、目录结构、核心玩法逻辑、工程配置与部署方案。读完你将掌握一条完整的 Next.js 应用开发链路：从npm run dev本地热更新，到app/page.js页面入口，再到 React 客户端组件中的洗牌、配对与胜负判定实现，以及最终的构建与部署。

项目定位与文档背景

memory-game是 Web-Dev-For-Beginners 仓库中一个独立的 Next.js 实战项目，目标实现一个经典的记忆翻牌游戏（Memory Game）。项目根目录的memory-game/README.md是标准化的create-next-app初始化说明，而 translations/bn/memory-game/README.md 则是该 README 的孟加拉语（bn）翻译版本，用于多语言学习者阅读。README 本身虽采用脚手架模板文体，但它明确给出了本项目的开发启动命令、可编辑入口文件、字体优化方式与部署途径，是进入该实战项目的第一份操作文档。

游戏的完整实现并不在 README 中，而是落在memory-game/components/MemoryGame.jsx这个客户端组件里。因此本文在完整继承 README 操作步骤的基础上，进一步结合 MemoryGame.jsx 源码与 package.json 工程配置，把“能跑起来”与“怎么实现的”两部分内容串成一体。

快速启动：运行开发服务器

README 的 “Getting Started（শুরু করা）” 一节给出了四种等价的后台启动方式：

npm run dev # or yarn dev # or pnpm dev # or bun dev

启动成功后，在浏览器中打开 http://localhost:3000 即可看到记忆翻牌游戏的界面。这里有两个值得注意的仓库级实现细节：

1. 四种包管理器命令最终都会落到 package.json 中定义的dev脚本，其真实内容为next dev --turbopack，即 Next.js 16 默认启用Turbopack 打包器进行本地开发，这也是 README 中 “自动刷新” 体验（编辑文件后页面即时更新）的性能基础。
2. README 明确说明 “You can start editing the page by modifyingapp/page.js. The page auto-updates as you edit the file.”，对应到本仓库就是直接修改 app/page.js，页面会随文件保存自动热更新，无需手动重启服务器。

项目结构：从根目录到核心文件

在写代码之前，先梳理memory-game/的文件布局（均可在仓库根目录下直接访问）：

memory-game/ ├── app/ │ ├── globals.css # 全局样式（Tailwind CSS v4 入口） │ ├── layout.js # 根布局：引入 Geist 字体并导出页面元信息 │ └── page.js # 页面入口，渲染 MemoryGame 组件 ├── components/ │ └── MemoryGame.jsx # 游戏核心逻辑（客户端组件） ├── public/ # 静态资源（favicon.ico 与 SVG 图标等） ├── eslint.config.mjs # ESLint 扁平配置 ├── jsconfig.json # 路径别名 @/* → ./* ├── next.config.mjs # Next.js 配置 ├── package.json # 依赖与脚本 └── postcss.config.mjs # PostCSS 插件配置

各文件职责一览：

页面渲染链路：page.js → MemoryGame

app/page.js 的完整内容非常精简：

import MemoryGame from '@/components/MemoryGame' import React from 'react' const page = () => { return ( <div> <MemoryGame /> </div> ) } export default page

这里的@/components/MemoryGame之所以能解析，是因为 jsconfig.json 中配置了"paths": { "@/*": ["./*"] }，将@/映射到项目根目录。也就是说，README 让你编辑的app/page.js实际是一个薄壳页面，真正的玩法逻辑全部封装在MemoryGame组件中。

app/layout.js 则负责全局骨架：通过next/font/google加载 Geist 与 Geist_Mono 字体，并将其注入 CSS 变量--font-geist-sans与--font-geist-mono；同时导出了title: "Memory Game"、description: "A fun and challenging memory game built with Next.js."的页面元信息，这正是浏览器标签页与搜索引擎中显示的标题描述。

源码级解析：记忆翻牌游戏的实现原理

游戏主体在 components/MemoryGame.jsx（共 162 行），文件第一行"use client"声明这是客户端组件，允许使用useState/useEffect等 React Hooks。整个玩法可拆解为以下四部分。

1. 洗牌：Fisher–Yates 算法

为保证每次开局卡片顺序随机且无偏差，源码使用了经典的 Fisher–Yates 洗牌算法（第 6-13 行）：

function fisherYatesShuffle(array) { const arr = array.slice(); for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }

array.slice()先复制原数组，避免原地修改状态引发副作用；从尾部向前遍历，每次与随机下标交换，保证了所有排列等概率出现。

2. 开局初始化与棋盘尺寸校验

组件通过一系列useState管理游戏状态（第 16-24 行）：gridSize（棋盘边长）、array（卡片数据）、flipped（当前翻开中的卡片）、selectedPairs（已配对成功的卡片）、disabled（防止连点）、error（输入错误提示）、won（是否获胜）。

initializeGame（第 36-53 行）负责开局：总卡片数为gridSize × gridSize，生成gridSize² / 2组数字，每组复制一份形成成对卡片，再经 Fisher–Yates 洗牌后组装成{ id, number }数组。棋盘尺寸输入框则通过handleGridSize（第 26-34 行）校验：只接受 2~10 之间的偶数，否则展示错误提示"Please enter a grid size where size is even (e.g., 2, 4, 6, 8, 10)"，从源头杜绝奇数棋盘导致的“单张卡片无法配对”问题。

3. 翻牌与配对逻辑

handleClick（第 74-92 行）是核心交互入口：

• 若处于disabled（配对判断中）或已获胜（won），直接忽略点击；
• 翻开第一张时，记录其 id 到flipped；
• 翻开第二张且与第一张不是同一张时，进入配对判断，否则取消本次翻牌。

handleMatch（第 59-72 行）比对两张卡片的number：

• 数字相同 → 将两张卡加入selectedPairs，永久保持翻开（绿色高亮）；
• 数字不同 → 通过setTimeout(…, 1000)延时 1 秒后翻回（蓝色高亮消失），期间disabled阻止用户继续点击，形成符合直觉的“看牌记忆”节奏。

4. 胜利判定

第 97-101 行 的useEffect监听配对进度：

useEffect(() => { if (selectedPairs.length === array.length && array.length > 0) { setWon(true); } }, [selectedPairs, array]);

当已配对卡片数等于总卡片数时，won置为true，界面上方出现绿色的 “You Won!” 文案。UI 渲染部分（第 103-159 行）使用 Tailwind 的grid布局，以gridTemplateColumns: repeat(${gridSize}, minmax(0,1fr))动态生成对应尺寸的网格；未翻开卡片显示 “?”，已翻开但未配对的显示蓝色背景的card.number，配对成功的则转为绿色，并配有 Reset 按钮一键initializeGame()重新开局。

样式与字体：Tailwind CSS v4 与 Geist

README 提到项目使用next/font“automatically optimize and load Geist”。这一声明的仓库落地点有两个：

• app/layout.js 通过next/font/google引入Geist与Geist_Mono，经next/font自动子集化、内联优化，避免额外的字体网络请求；
• app/globals.css 以@import "tailwindcss"引入Tailwind CSS v4（对应 postcss.config.mjs 中的@tailwindcss/postcss插件），并在@theme inline中将--font-geist-sans、--font-geist-mono映射为 Tailwind 的字体令牌，使组件里可直接使用font-[family-name:var(--font-geist-sans)]这类工具类。该文件还定义了prefers-color-scheme: dark下的暗色背景变量，支持系统级暗色模式。

工程配置与脚本：构建、启动与代码检查

package.json 完整定义了本项目的依赖与脚本，仓库实测版本如下：

"scripts": { "dev": "next dev --turbopack", "build": "next build --turbopack", "start": "next start", "lint": "eslint" }

• npm run build：以 Turbopack 执行生产构建，产物输出到.next/；
• npm run start：以生产模式启动服务（需先执行 build）；
• npm run lint：运行 ESLint，配置来自 eslint.config.mjs，它通过 FlatCompat 继承next/core-web-vitals规则集，并忽略node_modules、.next、out、build等目录。

此外，next.config.mjs 目前为空配置（{}），说明该项目没有自定义编译或实验特性开关，完全遵循 Next.js 默认行为——这一点与 README “开箱即用” 的定位一致。

部署到 Vercel

README 的 “Deploy on Vercel” 一节指出，将 Next.js 应用部署到 Vercel 平台是最快捷的方式，因为该平台正是 Next.js 的创造者所维护，可自动识别 Next.js 项目、执行安装与next build并发布。对于本项目的部署前提，可以补充两点仓库事实：

1. 生产构建入口是next build --turbopack（见 package.json），部署平台会读取该脚本完成编译；
2. 由于项目本身不包含任何环境变量或服务端专有依赖（next.config.mjs 为空），整站可被视作静态渲染应用，部署到 Vercel 等 Node 托管平台时无需额外配置。

仓库为只读的课程资源，部署时建议将其 fork 或 clone 到自己的账户下再连接 Vercel，而不是直接修改本仓库。

总结与进一步阅读

本文围绕memory-game子项目的 README 及其源码，完整覆盖了 Web-Dev-For-Beginners 中这个 Next.js 实战项目的四个层面：跑起来（npm run dev→ localhost:3000）、改起来（app/page.js热更新）、懂原理（Fisher–Yates 洗牌、翻牌配对状态机、useEffect胜利判定）、发出去（next build+ Vercel 部署）。同时澄清了 README 中几处表述对应的仓库实现：next/font对应 layout.js 的 Geist 加载，Tailwind 对应 globals.css 的 v4 引入，热更新体验对应next dev --turbopack。

如果你想继续深入，推荐按如下顺序阅读仓库内文件：

• memory-game/README.md — 项目根 README（本文的基础文档，另有 孟加拉语版）
• memory-game/components/MemoryGame.jsx — 全部游戏逻辑与 UI
• memory-game/app/page.js 与 memory-game/app/layout.js — 页面入口与全局布局
• memory-game/package.json 与 memory-game/postcss.config.mjs — 依赖、脚本与样式管道配置

掌握这一条链路之后，你可以把同样的 Next.js 工程模板迁移到仓库中其他项目（如聊天应用、浏览器扩展等）上，快速搭建属于自己的可运行 Web 应用。

• 文档
• 教程
• 前端