Next.js 初学者需要掌握哪些核心知识点？

更新于

2026-09-12 02:30:47

10阅读来源：SEO教程

内容介绍
文章标签
相关问答

在开始使用 Next.js 时最常见的困惑往往来自于对组件执行环境、数据获取方式还有路由处理的误解。不过，下面按主要知识点拆解，方便你定位并解决这些痛点。

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

Next.js 的 App Router 采用“文件即路由”，同时把 app/ 下的所有 React 组件默认视为服务端组件。如果不熟悉两者区别，后续就会频繁遇到“useState is not a function”之类的错误。

服务端组件

可以直接使用 async/await 在服务器上跑代码。
可直接访问数据库或外部 API，数据不会泄露给浏览器。老实说，
不支持 浏览器特有 Hook还有任何 DOM 操作。按理说，

export default async function Home {
const res = await fetch;const json = await res.json;return 
{json.title}
}

客户端组件

顶部需声明 "use client"。
可以使用 React hooks、事件绑定和任何浏览器 API。
不支持直接 async/await 请求；若需要请求请用 useEffect 或 fetch 在客户端执行。

阅读全文

标签：知识点

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

Next.js 的 App Router 采用“文件即路由”，同时把 app/ 下的所有 React 组件默认视为服务端组件。如果不熟悉两者区别，后续就会频繁遇到“useState is not a function”之类的错误。

服务端组件

可以直接使用 async/await 在服务器上跑代码。

可直接访问数据库或外部 API，数据不会泄露给浏览器。老实说，

不支持 浏览器特有 Hook还有任何 DOM 操作。按理说，

export default async function Home { const res = await fetch;const json = await res.json;return {json.title} }

客户端组件

顶部需声明 "use client"。

可以使用 React hooks、事件绑定和任何浏览器 API。

不支持直接 async/await 请求；若需要请求请用 useEffect 或 fetch 在客户端执行。

阅读全文

标签：知识点

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

服务端组件

客户端组件

相关问答

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

服务端组件

客户端组件

相关问答