其实，

一、服务端组件 vs 客户端组件

这是 Next.js App Router 最主要的概念。没搞清楚这个，后面全是坑。

服务端组件

app/ 目录下的组件默认都是服务端组件特点：

• 可以直接 async/await在服务器上跑
• 可以直接访问数据库、调接口。不暴露给浏览器
• 不能用 useStateuseEffectonClick 等浏览器 API

// app/page.tsx —— 服务端组件，直接 async
export default async function Home {
const data = await fetch;const json = await data.json;return 

{json.title}
}

客户端组件

顶部加 "use client" 声明，特点：

• 可以用 React hooks
• 可以绑定事件
• 不能直接 async/await 请求

// components/SearchBox.tsx —— 客户端组件
"use client";import { useState } from "react";export default function SearchBox {
const = useState;return (
 setValue} />
);}

本项目的例子

服务端组件：app/page.tsx、app/builds/page.tsx、app/champions//page.tsx
说到客户端组件。components/ChampionGrid.tsx、app/augments/page.tsx

常用方法: 尽量让父组件是服务端组件负责取数据，把数据作为 props 传给客户端组件负责交互。

二、fetch 还是 axios？

直接Next.js 服务端推荐用原生 fetch，不推荐 axios

原因是 Next.js 对原生 fetch 做了 。加了缓存和重新验证功能，这是 axios 没有的：

// Next.js
的 fetch，支持缓存控制
fetch(url,{
next这方面，{
revalidate:,// ISR：缓存 小时后重新请求
},});fetch，话说回来，// 每次请求都不缓存
fetch;// 永久缓存

本项目里就用了 revalidate:。英雄数据每天只请求一次 Riot 服务器，其余时间直接用缓存，性能很好。

alertax 能用吗？

能用，但有限制：

• 客户端组件里可以用 axios
• 服务端组件里用 axios 可以发请求。但失去了 Next.js 的缓存能力

// 客户端组件里用 axios —— 完全没问题
"use client";import axios from "axios";import { useEffect,useState } from "react";export default function MyComponent {
const = useState;useEffect => {
axios.get.n => setData);},)，return 

{data}
}

: 服务端用原生 fetch + Next.js 缓存，客户端交互请求用 axios 或 fetch 都行。

三、路由程序

文件即路由

app/
├── page.tsx → /
├── about/
│ └── page.tsx → /about
├── champions/
│ ├── page.tsx → /champions
│ └── /
│ └── page.tsx → /champions/任意值
└── blog/
└── /
└── page.tsx → /blog/任意/层级/方法

动态路由取参数

// app/champions//page.tsx
interface Props { params: Promise<{ id: string }>;}
export default async function ChampionPage {
const { id } = await params;// Next.js + params 是 Promise
// id 就是 URL 里的值，比如访问 /champions/Jinx。id = "Jinx"
}

编程式跳转

"use client";import { useRouter } from "next/navigation";export default function MyButton {
const router = useRouter;return (
 router.push}>
去英雄列表

);}

Link 组件

import Link from "next/link";// 比  标签好，支持预加载
查看金克斯;

四、路由守卫

No built‑in Vue‑style beforeEach guard,but several approaches exist.

再看方式一。middleware.ts

Create MIDDLEWARE.TS​

// middleware.ts
import { NextResponse } from "next/server";import type { NextRequest } from "next/server";export function middleware {
const token = request.cookies.get?.value，const isLoginPage = request.nextUrl.pathname === "/login";// 没有 token 且不是登录页，跳转到登录页
if {
return NextResponse.redirect);}
// 已登录还访问登录页，跳转首页
if {
return NextResponse.redirect);按理说，}
return NextResponse.next;// 放行
}
// 配置哪些路由需要走 middleware
export const config = {
matcher:,};

至于方式二，服务端组件里直接判断

// app/dashboard/page.tsx
import { redirect } from "next/navigation";import { getSession } from "@/lib/auth";// 自己的获取 session 函数
export default async function DashboardPage {
const session = await getSession;
if {
redirect;// 服务端直接重定向，使用者看不到页面内容
}
return 

欢迎，{session.user.name}
}

从方式三来看。客户端组件里判断

"use client";import { useEffect } from "react";老实说，import { useRouter } from "next/navigation";

export default function ProtectedPage { const router = useRouter;useEffect => { const token = localStorage.getItem;老实说，if { router.push;} },)，return

}

方式	执行时机	适合场景
middleware	请求到达前，全局权限控制	性能最好，大多数情况
服务器端 redirect	服务端渲染阶段。仅单页面	需要根据后端数据决定跳转
客户端 useEffect	浏览器渲染后	简单场景，会有短暂闪烁

推荐使用 middleware，一次配置，全局生效。

五、API 路由​

Next.js 可以在同一个项目里写后端接口，不需要单独起一个服务。其实，

app/
└── api/
└── champions/
└── route . ts → GET/POST /api/champions
` ` `
ts
// app/api/champions/route.ts
import { NextResponse } from "next/server";//处理 GET 请求
export async function GET{
const{ searchParams}=new URL;const name=searchParams.get;const data={ champions:};return NextResponse . json;}
//处理 POST 请求
export async function POST{
const body=await request . json;按理说，//处理 body...
return NextResponse . json;}
说到前端调用，ts
const res=await fetch;老实说，const data=await res . json;按理说，

六、数据获取的三种模式

理解这三种模式。就理解了Next.js 的主要价值。说起来，

SSG —— 建立时生成

ts
fetch;// 或者不传 cache 参数



建立时请求一次生成静态 HTML 

合适场景这方面。不常变化的内容 

再看优点，最快，CDN 可以缓存 


ISR —— 定时刷新

ts
fetch;老实说，// 每小时刷新



返回缓存内容，接下来后台定时重新生成 

说到合适场景。数据偶尔更新 

再看优点，兼顾性能和数据新鲜度 


SSR —— 每次请求都重新获取

ts
fetch;


每次使用者访问都重新请求数据 

合适场景的观点是，实时数据 

从优点来看。数据永远最新 


七、Image 组件

Next.js 内置的  比普通 `` 强很多：

tsx
import Image from "next/image";


说到自动做的事情。


懒加载 

自动转换为 WebP 格式 

防止布局偏移


注意加载外部域名图片需在 next.config.js 配置白名单：

js
// next.config.js
module.exports={ images:{ remotePatterns:,},}; 

八、环境变量

bash 

DATABASEURL=mysql://localhost:/mydb
NEXTPUBLICAPIURL=https://api.example.com # NEXTPUBLIC 前缀才能在浏览器用
SECRET_KEY=abc123 # 没有前缀。只能在服务端用


使用的观点是，

ts
// 服务端
const secret = process.env.SECRET_KEY;

// 客户端
const apiUrl = process.env.NEXTPUBLICAPI_URL;

九、常见错误和解决方法

再看错误1，在服务端组件里用了 useState

vbnet
Error的观点是。useState is not a function
 

解决的观点是，在文件顶部加 "use client"，或把有状态部分拆成单独的客户端组件。

错误2的观点是，外部图片不显示

javascript
说到Error，Invalid src prop。hostname not configured
 

说到解决，在 next.config.js 的 images.remotePatterns 中加入对应域名。

再看错误3，hydration 错误

sql
说到Error，Hydration failed because initial UI does not match
 

至于原因。服务端渲染 HTML 与客户端渲染结果不一致，例如使用了 Math.random 或 Date.now。

解决的观点是。把这类逻辑放到 useEffect 中，只在客户端执行。

至于错误4，params 需要 await

csharp
Error这方面。params should be awaited before using its properties
 

说到解决，

tsx
// 错误写法
const { id } = params;老实说，

// 正确写法
const { id } = await params;

十、项目目录约定速查





app/page.t s x

"文件/目录"
"作用"

app/layout.tsx"
"全局布局，所有页面的外壳"




""首页 "

app/loading.t s x""页面加载中的 UI"

app/error.t s x""页面报错时的 UI"

app/not-found.t s x""404 页面"

app/api/*/route.t s x""API 接口"

middleware.t s """请求中间件 "

public /" ""静态资源。可通过 /文件名访问 "

""本地环境变量 "

d""Next.js 配置文件 "d>

十一、开发常用命令

pnpm dev # 启动开发服务器 pnpm build # 建立生产版本 pnpm start # 启动生产服务器 pnpm lint # 检查代码规范

建立时 Next.js 会告诉你每个页面是 SSG 、SSR还是 ISR，输出类似：

Route Size First Load JS ┌ ○ / kB kB ├ ○ /augments kB kB ├ ○ /builds kB kB └ ƒ /champions/ kB kB ○ prerendered as static content ƒ server-rendered on demand

○ 表示静态，ƒ 表示动态。

---