# Nextqoder **Repository Path**: artaigccn/nextqoder ## Basic Information - **Project Name**: Nextqoder - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-23 - **Last Updated**: 2026-03-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Qoder 官网展示页（Next.js）项目文档##1. 项目概览这是一个基于 Next.js14（App Router）的单页官网项目，聚焦展示 Qoder 的核心能力与产品矩阵。页面以模块化组件方式组织，包含： - 顶部导航与品牌入口- 首屏 Hero（含动态公告、模式切换与视频展示） - 核心能力展示（交互式特性切换） - 产品能力卡片与产品矩阵- 用户评价滚动展示- 常见问题折叠面板- 页脚导航与外链聚合主入口页面位于 `app/page.tsx`，使用组合式方式串联全部页面模块。 --- ##2. 技术栈与依赖###2.1运行时与框架- Next.js14.2.35- React18- React DOM18- TypeScript5###2.2 UI 与样式- Tailwind CSS- PostCSS + Autoprefixer- next-themes（主题能力封装） - react-icons（图标库，当前代码中基本以内联 SVG 为主） ###2.3关键配置文件- `package.json`：脚本与依赖声明- `next.config.js`：远程图片域名白名单- `tailwind.config.js`：Tailwind主题与扫描路径- `postcss.config.js`：PostCSS 插件配置- `tsconfig.json`：TypeScript 编译配置- `styles/globals.css`：全局样式、动画与通用类--- ##3.目录结构（核心） ```textqoder/ ├─ app/ │ ├─ layout.tsx # 全局布局、metadata、字体与主题容器│ └─ page.tsx # 首页入口，按顺序组合各模块组件├─ components/ │ ├─ Header.tsx # 顶部导航│ ├─ Hero.tsx # 首屏展示（动态内容、模式切换、视频） │ ├─ Features.tsx # 功能特性切换展示│ ├─ ProductShowcase.tsx # 四列能力卡片│ ├─ ProductCards.tsx # 产品矩阵（IDE/CLI/插件） │ ├─ Reviews.tsx # 开发者评价滚动│ ├─ FAQ.tsx # 常见问题折叠面板│ ├─ Footer.tsx # 页脚与站点链接│ └─ ThemeProviderWrapper.tsx #主题封装├─ styles/ │ └─ globals.css├─ public/ ├─ .env.example├─ next.config.js├─ package.json└─ README.md``` --- ##4. 页面与组件关系首页由以下顺序渲染： 1. Header2. Hero3. Features4. ProductShowcase5. ProductCards6. Reviews7. FAQ8. Footer对应实现在 `app/page.tsx` 中按模块组合，便于增删改版块。 --- ##5.关键模块说明###5.1 全局布局（app/layout.tsx） 职责： - 声明站点元信息（标题、描述） - 注入 favicon、Google Fonts预连接与字体- 注入全局样式- 用 ThemeProvider 包裹全站内容- 设置 `lang="zh"` 与 hydration 警告抑制参数###5.2 顶部导航（components/Header.tsx） - 品牌 Logo（远程图片） - 导航项（Qoder / QoderWork / 企业 /价格 / 博客 /资源） - 操作入口（登录、下载） ###5.3 首屏 Hero（components/Hero.tsx） - 客户端组件（使用状态与定时器） - 顶部公告轮播（4 秒切换） - “Editor / Quest” 双模式切换展示不同文案与背景- 产品介绍视频展示- 多处外链（Product Hunt、文档与体验链接） ###5.4 功能特性（components/Features.tsx） - 客户端交互组件- 左侧功能列表（Next / Agentic Chat / 自主智能体 / RepoWiki） - 点击切换右侧展示图与高亮状态###5.5 产品展示与产品矩阵- ProductShowcase：四宫格能力说明卡片- ProductCards：IDE / CLI / JetBrains 插件三种产品入口，其中 CLI 展示安装命令###5.6评价与 FAQ- Reviews：评价卡片横向无缝滚动（依赖全局 marquee 动画） - FAQ：折叠面板交互，展示常见问题答案###5.7 页脚（components/Footer.tsx） - 多列导航（产品/资源/法律/联系） - 社交媒体链接- 返回顶部交互-版权信息--- ##6. 样式与主题###6.1 全局样式`styles/globals.css` 中包含： - Tailwind 基础层引入- 动画定义（如 marquee） - 通用工具类（按钮、渐变背景、文本效果等） ###6.2 深色模式项目通过主题封装组件提供 dark class 支持，许多组件已写有 `dark:*` 样式分支。当前页面主视觉以深色区域与浅色区块交替呈现。 --- ##7. 图片与媒体资源策略项目大量使用远程 CDN 图片（如 `img.alicdn.com`）。为保证 Next/Image 正常工作，已在 `next.config.js` 中配置远程域名白名单： - `img.alicdn.com` - `g.alicdn.com` 若新增其他图片域名，需要同步扩展此配置。 --- ##8. 环境变量`.env.example` 显示当前项目运行不依赖必填环境变量。如果后续接入 API 或埋点，可新增 `.env.local` 并在代码中读取 `NEXT_PUBLIC_*` 或服务端变量。 --- ##9. 本地开发指南###9.1 安装依赖```bashnpm install``` ###9.2 启动开发环境```bashnpm run dev``` 默认访问地址： - http://localhost:3000###9.3生产构建与启动```bashnpm run buildnpm run start``` ###9.4代码检查```bashnpm run lint``` --- ##10. NPM Scripts说明- `dev`：启动 Next.js 开发服务器- `build`：构建生产产物- `start`：运行生产服务- `lint`：执行 Next.js Lint 检查--- ##11. 二次开发建议1. **新增官网区块** 在 `components/` 新建组件后，在 `app/page.tsx` 插入即可。 2. **替换品牌内容**统一检查 Header、Hero、Footer 三处品牌文案与外链。 3. **新增导航落地页** 当前导航链接部分是预留路径，若需可在 `app/` 下新增对应路由页面。 4. **性能优化方向** - 对非首屏大图按需降级 `priority` - 精简首屏外链资源与视频策略 - 审视客户端组件范围，减少不必要 hydration--- ##12. 当前项目定位该项目可作为： - 官网落地页模板- AI 产品宣传站骨架- Next.js + Tailwind组件化开发示例其优势在于结构清晰、视觉完整、模块拆分明确，适合继续扩展为多页面产品官网或接入实际业务后端。# Qoder 官网展示页（Next.js）项目文档##1. 项目概览这是一个基于 Next.js14（App Router）的单页官网项目，聚焦展示 Qoder 的核心能力与产品矩阵。页面以模块化组件方式组织，包含： - 顶部导航与品牌入口- 首屏 Hero（含动态公告、模式切换与视频展示） - 核心能力展示（交互式特性切换） - 产品能力卡片与产品矩阵- 用户评价滚动展示- 常见问题折叠面板- 页脚导航与外链聚合主入口页面位于 `app/page.tsx`，使用组合式方式串联全部页面模块。 --- ##2. 技术栈与依赖###2.1运行时与框架- Next.js14.2.35- React18- React DOM18- TypeScript5###2.2 UI 与样式- Tailwind CSS- PostCSS + Autoprefixer- next-themes（主题能力封装） - react-icons（图标库，当前代码中基本以内联 SVG 为主） ###2.3关键配置文件- `package.json`：脚本与依赖声明- `next.config.js`：远程图片域名白名单- `tailwind.config.js`：Tailwind主题与扫描路径- `postcss.config.js`：PostCSS 插件配置- `tsconfig.json`：TypeScript 编译配置- `styles/globals.css`：全局样式、动画与通用类--- ##3.目录结构（核心） ```textqoder/ ├─ app/ │ ├─ layout.tsx # 全局布局、metadata、字体与主题容器│ └─ page.tsx # 首页入口，按顺序组合各模块组件├─ components/ │ ├─ Header.tsx # 顶部导航│ ├─ Hero.tsx # 首屏展示（动态内容、模式切换、视频） │ ├─ Features.tsx # 功能特性切换展示│ ├─ ProductShowcase.tsx # 四列能力卡片│ ├─ ProductCards.tsx # 产品矩阵（IDE/CLI/插件） │ ├─ Reviews.tsx # 开发者评价滚动│ ├─ FAQ.tsx # 常见问题折叠面板│ ├─ Footer.tsx # 页脚与站点链接│ └─ ThemeProviderWrapper.tsx #主题封装├─ styles/ │ └─ globals.css├─ public/ ├─ .env.example├─ next.config.js├─ package.json└─ README.md``` --- ##4. 页面与组件关系首页由以下顺序渲染： 1. Header2. Hero3. Features4. ProductShowcase5. ProductCards6. Reviews7. FAQ8. Footer对应实现在 `app/page.tsx` 中按模块组合，便于增删改版块。 --- ##5.关键模块说明###5.1 全局布局（app/layout.tsx） 职责： - 声明站点元信息（标题、描述） - 注入 favicon、Google Fonts预连接与字体- 注入全局样式- 用 ThemeProvider 包裹全站内容- 设置 `lang="zh"` 与 hydration 警告抑制参数###5.2 顶部导航（components/Header.tsx） - 品牌 Logo（远程图片） - 导航项（Qoder / QoderWork / 企业 /价格 / 博客 /资源） - 操作入口（登录、下载） ###5.3 首屏 Hero（components/Hero.tsx） - 客户端组件（使用状态与定时器） - 顶部公告轮播（4 秒切换） - “Editor / Quest” 双模式切换展示不同文案与背景- 产品介绍视频展示- 多处外链（Product Hunt、文档与体验链接） ###5.4 功能特性（components/Features.tsx） - 客户端交互组件- 左侧功能列表（Next / Agentic Chat / 自主智能体 / RepoWiki） - 点击切换右侧展示图与高亮状态###5.5 产品展示与产品矩阵- ProductShowcase：四宫格能力说明卡片- ProductCards：IDE / CLI / JetBrains 插件三种产品入口，其中 CLI 展示安装命令###5.6评价与 FAQ- Reviews：评价卡片横向无缝滚动（依赖全局 marquee 动画） - FAQ：折叠面板交互，展示常见问题答案###5.7 页脚（components/Footer.tsx） - 多列导航（产品/资源/法律/联系） - 社交媒体链接- 返回顶部交互-版权信息--- ##6. 样式与主题###6.1 全局样式`styles/globals.css` 中包含： - Tailwind 基础层引入- 动画定义（如 marquee） - 通用工具类（按钮、渐变背景、文本效果等） ###6.2 深色模式项目通过主题封装组件提供 dark class 支持，许多组件已写有 `dark:*` 样式分支。当前页面主视觉以深色区域与浅色区块交替呈现。 --- ##7. 图片与媒体资源策略项目大量使用远程 CDN 图片（如 `img.alicdn.com`）。为保证 Next/Image 正常工作，已在 `next.config.js` 中配置远程域名白名单： - `img.alicdn.com` - `g.alicdn.com` 若新增其他图片域名，需要同步扩展此配置。 --- ##8. 环境变量`.env.example` 显示当前项目运行不依赖必填环境变量。如果后续接入 API 或埋点，可新增 `.env.local` 并在代码中读取 `NEXT_PUBLIC_*` 或服务端变量。 --- ##9. 本地开发指南###9.1 安装依赖```bashnpm install``` ###9.2 启动开发环境```bashnpm run dev``` 默认访问地址： - http://localhost:3000###9.3生产构建与启动```bashnpm run buildnpm run start``` ###9.4代码检查```bashnpm run lint``` --- ##10. NPM Scripts说明- `dev`：启动 Next.js 开发服务器- `build`：构建生产产物- `start`：运行生产服务- `lint`：执行 Next.js Lint 检查--- ##11. 二次开发建议1. **新增官网区块** 在 `components/` 新建组件后，在 `app/page.tsx` 插入即可。 2. **替换品牌内容**统一检查 Header、Hero、Footer 三处品牌文案与外链。 3. **新增导航落地页** 当前导航链接部分是预留路径，若需可在 `app/` 下新增对应路由页面。 4. **性能优化方向** - 对非首屏大图按需降级 `priority` - 精简首屏外链资源与视频策略 - 审视客户端组件范围，减少不必要 hydration--- ##12. 当前项目定位该项目可作为： - 官网落地页模板- AI 产品宣传站骨架- Next.js + Tailwind组件化开发示例其优势在于结构清晰、视觉完整、模块拆分明确，适合继续扩展为多页面产品官网或接入实际业务后端。