一、基于 Next.js 16 的關(guān)鍵變化（必須知道）

這是你在網(wǎng)上很難看到的“升級(jí)后必須掌握的關(guān)鍵點(diǎn)”。

1. Server Components 為默認(rèn)，Client Components 僅用于交互

Next 16 更強(qiáng)調(diào) SSG/SSR 和 RSC，推薦你：

• 頁(yè)面結(jié)構(gòu)統(tǒng)一使用 Server Component

• 只有交互用 “use client”

帶來(lái)的優(yōu)勢(shì)：

• 更小的 bundle

• 更快的首屏

• 直接訪問(wèn)數(shù)據(jù)庫(kù)/后端（無(wú) API）

2. 全新Cache Components（Next 16 最大變化）

Next 16 引入一個(gè)新模式：

export default async function Page() { const data = await getData(); // 自動(dòng)緩存 return <div>{data}</div>; } 

特點(diǎn)：

• fetch、讀數(shù)據(jù)庫(kù)、計(jì)算結(jié)果自動(dòng)緩存

• 緩存可按組件級(jí)別復(fù)用

• 支持手動(dòng) revalidate

你也可以強(qiáng)制禁用緩存：

export const dynamic = "force-dynamic"; 

或頁(yè)面級(jí)別緩存：

export const revalidate = 60; // 60秒 

3. 中間件新方案：proxy.ts

Next 16 引入 Proxy Routes：

app/proxy.ts 

它的作用是：

• 替代 middleware 部分用途

• 更強(qiáng)能力（可讀寫(xiě) cookies）

• 能直接攔截所有請(qǐng)求

使用示例：

export default function proxy(request) { const token = request.cookies.get("token"); if (!token) { return Response.redirect("/login"); } } 

比 middleware 更靈活。

4. 默認(rèn)使用Turbopack（更快）

生產(chǎn)環(huán)境已經(jīng)支持：

• 快速增量編譯

• 更快冷啟動(dòng)

• 更小打包體積

但現(xiàn)階段仍有一些兼容性問(wèn)題（后面會(huì)講坑點(diǎn)）。

5. 全面支持 React 19（useTransition/useForm 等）

Next 16 默認(rèn)支持：

• useFormStatus

• useActionState

• server actions 更穩(wěn)定

二、Next.js 16 的項(xiàng)目實(shí)戰(zhàn)最佳實(shí)踐

這些是做實(shí)際項(xiàng)目最關(guān)鍵的。

1. 目錄結(jié)構(gòu)最佳實(shí)踐

app/ (public)/layout.tsx # 公共布局 dashboard/ page.tsx loading.tsx error.tsx api/ user/route.ts # Route Handlers API lib/ db.ts # 數(shù)據(jù)庫(kù) services/ components/ ui/ # 客戶端組件庫(kù) server/ # 服務(wù)器組件 

建議：

2. 數(shù)據(jù)獲取的最佳實(shí)踐（強(qiáng)烈推薦）

能在 Server 取數(shù)據(jù)，一律放 Server。

最推薦的方式：

export default async function Page() { const user = await getUser(); return <UserView user={user} />; } 

避免寫(xiě)成下面這種：

（不然就是 CSR）

"use client"; useEffect(() => { fetch("/api/user").then(...) }, []); 

3. Server Action 使用策略

處理表單提交最推薦：

"use server" export async function createUser(formData) { const name = formData.get("name"); await db.user.create({ data: { name } }); } 

客戶端：

<form action={createUser}> <input name="name" /> </form> 

優(yōu)點(diǎn)：

• 自帶 CSRF 防護(hù)

• 自動(dòng) SSR 返回結(jié)果

• 網(wǎng)絡(luò)開(kāi)銷更小

三、Next.js 16 實(shí)戰(zhàn)最常見(jiàn)35 個(gè)坑點(diǎn)

1.use client忘記寫(xiě) → 事件不觸發(fā)（最常見(jiàn)）

"use client"; 

必須放在第一行。

2. Server Component 使用 window / useEffect 直接報(bào)錯(cuò)

Server Component 不能：

• useState

• useEffect

• window、document

• localStorage

3. fetch 在 Next.js 中默認(rèn)“緩存”，開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境不一致

很多人踩這里??

開(kāi)發(fā)環(huán)境：

• 不緩存

生產(chǎn)環(huán)境：

• 默認(rèn)緩存（SSG）

解決：

fetch(url, { cache: "no-store" }) 

4. fetch 自動(dòng)請(qǐng)求合并（Request Deduping）

相同 fetch 會(huì)合并成一次：

const a = fetch("/api/user"); const b = fetch("/api/user"); 

?? 結(jié)果后臺(tái)只收到 1 次請(qǐng)求。

如果你需要多次真實(shí)請(qǐng)求：

cache: "no-store" 

5. layout.tsx 會(huì)持久化渲染，狀態(tài)不會(huì)變化

這導(dǎo)致：

• 登錄后 layout 內(nèi)部 UI 不刷新

• 權(quán)限側(cè)邊欄不更新

解決：

把需要交互的部分移到 Client Component + Context。

6. metadata 不能寫(xiě)在 Client 文件中

必須寫(xiě)在 server component：

export const metadata = { title: "User", }; 

7. redirect() / notFound() 不能放在 Client Component 中

SSR 專用。

8. Route Handler 中讀取 body 只能讀一次

這會(huì)報(bào)錯(cuò)：

const body1 = await req.json(); const body2 = await req.json(); // ? 

9. 靜態(tài)資源路徑錯(cuò)誤：不能寫(xiě) public

/public/logo.png ? /logo.png ? 

10. middleware 和 proxy.ts 配置沖突

proxy 優(yōu)先級(jí)高
middleware 無(wú)法覆蓋 proxy 的行為。

11. 使用 next/image 導(dǎo)致生產(chǎn)環(huán)境 403

你必須配置：

remotePatterns 

12. Turbopack 打包時(shí)某些庫(kù)不支持 CommonJS

比如一些老庫(kù)，用 webpack 才能正常構(gòu)建。

解決：關(guān)閉 turbopack

NEXT_USE_TURBOPACK=0 

13. 環(huán)境變量必須以 NEXT_PUBLIC_ 才能給客戶端用

否則 undefined。

14. “hydration mismatch” 是 Next.js 最常見(jiàn)報(bào)錯(cuò)

原因：

• Server 渲染的內(nèi)容 與 Client 不一致

• useEffect 中修改初始渲染內(nèi)容

• 非受控 → 受控組件切換

15. 動(dòng)態(tài)導(dǎo)入組件，SSR 必須手動(dòng)關(guān)閉

const Editor = dynamic(() => import('./Editor'), { ssr: false }); 

16. 在 GitHub / Vercel 構(gòu)建時(shí) Prisma 報(bào)錯(cuò)

因?yàn)?schema 未生成：

prisma generate 

必須加到構(gòu)建腳本。

17. Next.js 在邊緣運(yùn)行時(shí)不支持 Node API

例如：

• fs

• path

• events

• child_process

18. next/link 的 children 不能是空標(biāo)簽

必須：

<Link href="/"><span>Home</span></Link> 

19. API route 和 Route Handler 混用會(huì)導(dǎo)致路由沖突

推薦只使用：

app/api/**/route.ts 

20. 組件變成 Client Component 會(huì)讓整個(gè)子樹(shù)變成 CSR

這是性能殺手。

盡量拆分：

• 樹(shù)頂保持 server

• 交互組件小顆粒 client

更多坑點(diǎn)（快速列表）

1. 每次刷新 global CSS 會(huì)閃屏

2. Middleware / proxy.ts 不支持 request body

3. 當(dāng) Layout 中 useSearchParams 會(huì)多次渲染

4. 動(dòng)態(tài)路由不帶 trailing slash 會(huì)沖突

5. pages/ 與 app/ 路由同名 → 沖突

6. 使用 form 表單 + JS 禁止默認(rèn)行為 → 無(wú)法 SSR

7. Route Handler 返回流式響應(yīng)復(fù)雜

8. 靜態(tài)文件增刪不會(huì)觸發(fā)熱更新

9. 錯(cuò)誤邊界 error.tsx 不能用 useEffect 捕獲

10. React Server Components 不支持一些舊 UI 庫(kù)

11. next build 不能直接使用 require

12. bundler 無(wú)法處理某些 old-style ESM

13. preload + next/script 干擾生產(chǎn)環(huán)境性能

14. Bun/PNPM 與 Turbopack 兼容性偶發(fā)問(wèn)題

15. “Concurrent features” 在 Node 16 以上才穩(wěn)定

總結(jié) 

到此這篇關(guān)于Next.js 16的實(shí)踐案例和坑點(diǎn)總結(jié)的文章就介紹到這了,更多相關(guān)Next.js16實(shí)踐和坑點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論