一、先明确 Next.js 学习前提
Next.js 是基于 React 的，所以建议你至少掌握一些 React 基础：
需要先会的 React 内容
组件
props
useState
useEffect
事件绑定
条件渲染
列表渲染
表单处理不用一开始就把 React 学得特别深，但这些要会。
如果你已经会一些 JavaScript，那可以直接进入：
React 基础 -> Next.js如果 JavaScript 还不太熟，建议先补：
ES6 语法
数组方法
异步 async/await
模块导入导出二、Next.js 推荐学习路线
第 1 阶段：创建项目和目录结构
先创建项目：
npx create-next-app@latest my-next-app推荐选择：
TypeScript：Yes
ESLint：Yes
Tailwind CSS：Yes
src directory：Yes 或 No 都可以
App Router：Yes
Turbopack：可以 Yes
import alias：Yes进入项目：
cd my-next-app
npm run dev访问：
http://localhost:3000三、先学 App Router
现在 Next.js 主推 App Router。
常见目录结构：
app/
layout.tsx
page.tsx
about/
page.tsx
products/
page.tsx对应路由：
app/page.tsx -> /
app/about/page.tsx -> /about
app/products/page.tsx -> /products你要先理解：
page.tsx 是页面
layout.tsx 是布局
文件夹名就是路由路径例如：
// app/about/page.tsx
export default function AboutPage() {
return <h1>关于我们</h1>
}访问：
/about四、学习页面跳转 Link
Next.js 不需要 React Router，用自己的 Link。
import Link from 'next/link'
export default function HomePage() {
return (
<main>
<h1>首页</h1>
<Link href="/about">去关于页</Link>
</main>
)
}五、学习组件拆分
建议建一个 components 目录：
components/
Header.tsx
Footer.tsx
ProductCard.tsx例如：
// components/Header.tsx
import Link from 'next/link'
export default function Header() {
return (
<header>
<Link href="/">首页</Link>
<Link href="/about">关于</Link>
<Link href="/products">产品</Link>
</header>
)
}然后在 layout 里使用：
// app/layout.tsx
import Header from '@/components/Header'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="zh-CN">
<body>
<Header />
{children}
</body>
</html>
)
}六、学习服务端组件和客户端组件
这是 Next.js 很重要的概念。
默认情况下，App Router 里面的组件是 服务端组件。
如果你要使用：
useState
useEffect
onClick
浏览器 API就需要加：
'use client'例如计数器：
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
当前数量：{count}
</button>
)
}简单记：
只展示内容：通常用服务端组件
需要交互：使用客户端组件七、学习数据请求
Next.js 可以直接在页面组件里请求数据。
export default async function UsersPage() {
const res = await fetch('https://jsonplaceholder.typicode.com/users')
const users = await res.json()
return (
<main>
<h1>用户列表</h1>
{users.map((user: any) => (
<div key={user.id}>{user.name}</div>
))}
</main>
)
}这是服务端请求，适合：
文章列表
商品列表
详情页
官网内容八、学习动态路由
例如商品详情页：
app/
products/
page.tsx
[id]/
page.tsx访问：
/products/1
/products/2
/products/100页面代码：
// app/products/[id]/page.tsx
export default function ProductDetailPage({
params,
}: {
params: { id: string }
}) {
return <h1>商品详情：{params.id}</h1>
}九、学习 API Route
Next.js 可以写接口。
目录：
app/
api/
hello/
route.ts代码：
// app/api/hello/route.ts
export async function GET() {
return Response.json({
message: 'Hello Next.js',
})
}访问：
/api/hello你可以用它做：
登录接口
提交表单
获取文章
获取商品不过正式项目里，如果后端复杂，通常还是单独后端服务。
十、推荐做的练手项目
你可以按难度做。
项目 1：个人主页 / 作品集网站
适合入门。
功能：
首页
关于我
项目展示
联系方式
响应式布局
SEO 标题你能练到：
页面路由
组件拆分
layout
样式
Link
Metadata
部署推荐技术：
Next.js + Tailwind CSS项目 2：博客系统
功能：
文章列表
文章详情
分类
标签
Markdown 渲染
搜索
SEO你能练到：
动态路由
数据读取
服务端组件
静态生成
metadata可以先做本地 Markdown 版本，不急着接数据库。
项目 3：商品展示网站
功能：
商品列表
商品详情
分类筛选
搜索
购物车你能练到：
动态路由
客户端状态
服务端数据请求
组件复用状态管理可以用：
useState
useContext后面再加 Zustand。
项目 4：Todo / 任务管理系统
功能：
新增任务
删除任务
编辑任务
状态切换
筛选任务
本地存储你能练到：
客户端组件
useState
useEffect
表单处理
localStorage这个适合练交互。
项目 5：后台管理面板
功能：
登录页
首页仪表盘
用户列表
表格
弹窗
表单
分页
权限菜单你能练到：
UI 组件库
表单
表格
路由组织
状态管理
接口请求推荐组件库：
Ant Design十一、推荐技术组合
如果你刚开始，我建议：
Next.js + TypeScript + Tailwind CSS后面再加：
shadcn/ui
Zustand
Prisma
NextAuth/Auth.js
PostgreSQL/MySQL但是不要一开始全加，不然会很乱。
入门阶段
Next.js
TypeScript
Tailwind CSS
fetch进阶阶段
Next.js
TypeScript
Tailwind CSS
Zustand
shadcn/ui全栈阶段
Next.js
TypeScript
Tailwind CSS
Prisma
PostgreSQL
Auth.js十二、建议你第一个项目这样做
我建议你第一个项目做：
个人作品集网站原因：
页面简单
容易完成
适合部署
可以长期完善
可以作为你的个人展示页面结构：
/
首页
/about
关于我
/projects
项目列表
/projects/[id]
项目详情
/contact
联系方式组件结构：
components/
Header.tsx
Footer.tsx
ProjectCard.tsx
SectionTitle.tsx数据可以先写死：
const projects = [
{
id: 'next-blog',
title: 'Next.js 博客系统',
description: '一个基于 Next.js 的博客项目',
},
{
id: 'admin-dashboard',
title: '后台管理系统',
description: '一个后台管理面板项目',
},
]十三、你可以按这个计划学习
第 1 周
React 基础
Next.js 创建项目
页面路由
Link 跳转
组件拆分
Tailwind 基础目标：
做出一个多页面个人网站第 2 周
动态路由
数据列表
详情页
服务端数据请求
Metadata目标：
做出项目列表 + 项目详情第 3 周
客户端组件
useState
表单
搜索
筛选
localStorage目标：
做出 Todo 或商品筛选页面第 4 周
API Route
提交表单
简单登录模拟
部署 Vercel目标：
完成一个可在线访问的小项目十四、结论
你选 Next.js 的学习路线可以是：
JavaScript 基础
↓
React 基础
↓
Next.js App Router
↓
组件拆分
↓
数据请求
↓
动态路由
↓
客户端组件
↓
API Route
↓
部署项目第一个项目推荐：
个人作品集网站第二个项目推荐：
博客系统第三个项目推荐：
商品展示或后台管理系统如果你愿意，我可以下一步直接帮你设计一个 Next.js 入门项目：个人作品集网站 的目录结构、页面规划和第一版代码。
发表回复