上一篇主要是说了vue和react的区别，先来个基础知识的打底。css选用的是tailwindCss，之前的汇总学习也在主页，可以翻找看看。本篇主要是开始骨架构建项目目录与页面入口和全局 metadata 配置。
学习来源：React官方文档 和Next官方文档 。多撸撸官方文档，准没错！
在前端环境ok的情况下：
- Node.js 12.22.0 或更高版本
- MacOS、Windows (包括 WSL) 和 Linux 都被支持
开始安装：
javascript
npx create-next-app@latest --typescript具体流程查看：NEXT快速创建https://www.nextjs.cn/docs#%E7%B3%BB%E7%BB%9F%E7%8E%AF%E5%A2%83%E9%9C%80%E6%B1%82
Next.js 是围绕着 页面（pages） 的概念构造的，文件名与路由关联 。强迫症看不下去一堆页面散散的，创建一个 pages 目录类似于vue的view目录。包裹想要的目录页面
问多乐WenDora AI官网包含以下内容：
|---------------|------------------------------------------------|
| 一级列表 | 二级列表 |
| 问多乐WenDora AI | |
| 首页 | |
| 选择角色 | 效果营销公司 通道/线路商 短信/外呼-平台/系统 连锁零售商 线上广告主 AI大模型需求者 |
| 服务体系 | 精准圈客服务 投前精筛服务 触达服务 AI营销助手 AI求职辅助 Soulwork |
| 企业动态 | |
| 关于我们 | |
| 立即咨询 | |
新建对应文档目录：
注意一下，项目在用的 App Router 不是 传统的 pages 路由体系
Next 现在有两套路由方式
-
Pages Router
- 目录名就是
pages - 例如
pages/about.tsx对应/about
- 目录名就是
-
App Router
- 目录名就是 app
- 例如
app/about/page.tsx对应/about
具体查看官方文档：https://nextjs.org/docs
Header组件：
javascript
// 这是服务端组件（没有 'use client' 声明）
// 导航链接全部静态，不需要 JS 就能正常渲染，对 SEO 和首屏性能都有好处
// next/link 的 Link 比原生 <a> 多了页面间预加载，跳转更快
import Link from "next/link";
// 用数据结构驱动菜单，以后增删菜单只改这里，不动 JSX
const navItems = [
{ label: "首页", href: "/" },
{
label: "选择角色",
href: "/roles",
children: [
{ label: "效果营销公司", href: "/roles/marketing-company" },
{ label: "通道/线路商", href: "/roles/channel-partner" },
{ label: "短信/外呼-平台/系统", href: "/roles/sms-outbound" },
{ label: "连锁零售商", href: "/roles/chain-retail" },
{ label: "线上广告主", href: "/roles/online-advertiser" },
{ label: "AI大模型需求者", href: "/roles/ai-model-buyer" },
],
},
{
label: "服务体系",
href: "/services",
children: [
{ label: "精准圈客服务", href: "/services/audience-targeting" },
{ label: "投前精筛服务", href: "/services/pre-screening" },
{ label: "触达服务", href: "/services/outreach" },
{ label: "AI营销助手", href: "/services/ai-marketing" },
{ label: "AI求职辅助", href: "/services/ai-career" },
{ label: "Soulwork-全网同名", href: "/services/soulwork" },
],
},
{ label: "企业动态", href: "/news" },
{ label: "关于我们", href: "/about" },
];
export default function Header() {
return (
<header>
<nav>
{/* 品牌 Logo 区域，点击回首页 */}
<Link href="/">问多乐WenDora AI</Link>
{/* 主导航列表 */}
<ul>
{navItems.map((item) => (
<li key={item.href}>
<Link href={item.href}>{item.label}</Link>
{/* 有二级菜单才渲染下拉列表 */}
{item.children && (
<ul>
{item.children.map((child) => (
<li key={child.href}>
<Link href={child.href}>{child.label}</Link>
</li>
))}
</ul>
)}
</li>
))}
</ul>
{/* 立即咨询：CTA 按钮，单独放置突出优先级 */}
<Link href="/contact">立即咨询</Link>
</nav>
</header>
);
}修改全局 metadata ，搜索引擎收录时首先读这里，这里的TDK
layout.tsx
javascript
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
// 顶部组件
import Header from "@/components/Header";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
// 全局 metadata ，搜索引擎收录时首先读这里，这里的TDK
// 子页面用 %s 占位，产品页 title 会自动变成"选择角色 | 问多乐WenDora AI"，不用每页手写
export const metadata: Metadata = {
title: {
default: "问多乐WenDora AI - AI营销与精准获客平台",
template: "%s | 问多乐WenDora AI",
},
description:
"问多乐WenDora AI，为效果营销公司、广告主、零售商提供精准圈客、AI营销助手、触达服务等AI驱动的营销解决方案。",
keywords: ["AI营销", "精准获客", "WenDora", "问多乐", "AI营销助手"],
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html
lang="zh-CN"
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
>
<body className="min-h-full flex flex-col">
<Header />
{children}
</body>
</html>
);
}基本骨架构建项目目录与页面入口和全局 metadata 配置就完成了，接下来开始把header 组件填好，弄成下拉选择项。此处我有在考虑要不要上UI框架，作为官网，不是很想上。因为适用于react的ui框架也挺多的，比如Ant Design、Element Plus 对应 React 生态的类似库、MUI等。但是官网目前没有下面的任意2条存在，所以不考虑引用库：
- 键盘交互复杂
- 无障碍要求高
- 弹层定位复杂
- 状态很多
- 反复复用
不然会变成，我在花很多时间在"改库样式"
前期打算纯自己写，如果实在需要，后期再引入无样式UI组件库：
- Radix UI：官网项目优先
- Headless UI：快速上手 + Tailwind 味更重
以上骨架大致搭建完成，路由也实现了。使用命令行即可启动项目
javascript
npm run dev后面就是填补公共组件内容区域啦～