返回项目
开发中Next.jsReactTypeScriptTailwind CSSVitest2026

Frontend Mentor（Next.js）

基于 Next.js 16 与 React 19 的 Frontend Mentor 挑战应用：按挑战划分结构（独立资源、路由与样式）、难度与状态索引，以及仓库内约定；含 lint / 格式化规则。

查看演示查看代码

项目截图

Frontend Mentor（Next.js） — vista previa

1 / 5

我学到了什么

  • 应用路由与按路由组嵌套的布局
  • 在文件夹中隔离挑战，避免样式与资源混淆
  • 类型化索引数据（联合类型与共享常量）

更多说明

  • 每个挑战包含预览、Frontend Mentor 上的提交方案与 GitHub 代码链接。
  • 每个挑战有难度与状态徽章，并附描述与标签。
  • 每个挑战内有无障碍键盘入口（Tab/Shift+Tab）可返回起始位置。
  • /start 介绍两个与 Frontend Mentor 相关的站点及各是什么、有何不同。

技术细节

  • •Next.js 16（应用路由）、React 19、TypeScript 5
  • •Tailwind CSS 4
  • •ESLint、Prettier、Vitest