面向 Vue 开发者的 Next.js 快速入门指南

你 Vue 写得很熟，模板、响应式、Vue Router 闭着眼都能来。但一打开 Next.js 文档，满屏的 App Router、Server Component、React。第一反应是不是：这玩意儿从哪儿学起？

说实话，不用从零学 React 再学 Next。会 Vue，你的底子已经够用了。说实话，不用从零学 React 再学 Next。会 Vue，你的底子已经够用了。这篇按「Vue 思维」给你画一张 Next.js 的入门地图：先搞清楚它是什么、和 Vue 差在哪儿，再动手跑起来。

01 它到底是什么？

Next.js 不是「另一个 Vue」。它是基于 React 的全栈框架 ，自带路由、服务端渲染、API 路由，开箱能用。你可以把它想成：React + 文件即路由 + 服务端能力，打包好的那种。

和 Vue 生态对照一下心里就有数了：

Vue 是框架，Nuxt 是「Vue 的全栈增强版」。
React 是库，Next.js 就是「React 的全栈增强版」。

所以：你要补的不是「前端框架」那一课，而是「React 语法 + Next 那套约定」。前者和 Vue 很多概念能一一对应。后者主要是记规则和目录结构。

02 Vue 思维对照表：不用从零背

用你已有的 Vue 概念，直接映射到 React/Next，会轻松很多。

你熟悉的（Vue）	Next.js / React 里大概长这样
`<template>` 里写 HTML	在组件里写 JSX （JS 里写 HTML，用 `className` 代替 `class`）
`v-model` 双向绑定	`useState` + 受控组件，自己写 `value` 和 `onChange`
`v-if` / `v-for`	用三元运算符、`&&`、`.map()` 在 JSX 里搞定
`computed`	`useMemo()` 或普通函数算出来再渲染
`watch` / 生命周期	`useEffect()`，依赖数组相当于「什么时候再跑」
Vue Router	文件即路由：`app/xxx/page.tsx` 就是路由 `/xxx`
Vuex / Pinia	用 React 的 `useState`、Context，或 Zustand 等库
插槽 `<slot>`	`props.children` 或具名 props

有两点最容易踩坑，提前说一嘴：

事件和属性名 ：都用小驼峰，比如 onClick、className，不能写 class。
状态不能直接改 ：没有「改个属性就自动更新」这种事，要用 setState 这类 API 去「换掉」状态。

剩下的，写两个页面、改两个组件，手感就来了。

03 五分钟跑起来

先别啃文档。把项目拉起来，看一遍目录，比看十页教程都管用。

在终端里执行：

bash 复制代码

npx create-next-app@latest my-next-app
cd my-next-app
pnpm install   # 或 npm i
pnpm dev       # 或 npm run dev

按提示选：TypeScript、ESLint、Tailwind、src/ 目录、App Router，一路回车就行。浏览器打开 http://localhost:3000，能看到默认页就说明环境没问题。

重点看这两个目录：

app/ ：所有路由和页面都在这里。app/page.tsx 是首页，app/about/page.tsx 就是 /about。和 Nuxt 的 pages/ 很像，只是这里一个路由对应一个 page.tsx。
app/layout.tsx ：全局布局，包住所有页面，类似 Vue 里包 <router-view> 的那层布局。

改一改 app/page.tsx 里的字，保存，看页面热更新。有这一步，你就已经「摸到」Next.js 了。

04 第一个分水岭：服务端组件和客户端组件

Next.js 默认组件是服务端组件 ：在服务器上渲染成 HTML，再发到浏览器。不碰 useState、useEffect、事件绑定的部分，可以全部放在服务端，对首屏和 SEO 都友好。

一旦你要「交互」------点一下、填个表、用 useState------就必须告诉 Next：这是客户端组件。在文件顶部加一行：

ts 复制代码

'use client';

有这行，这个文件里的组件才会在浏览器里跑，才能用 Hooks、事件。

一句话记 ：默认是服务端，要交互就加 'use client'。和 Vue 里「默认都能交互」不太一样，但习惯就好。

05 数据拿取：别一上来就 useEffect

在 Vue 里你可能习惯在 onMounted 里 fetch。在 Next 的服务端组件里，直接 async/await 就行，不用 Hooks：

ts 复制代码

// app/posts/page.tsx（服务端组件，默认）
async function PostsPage() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

数据在服务端拿完，和 HTML 一起送到前端。需要交互的列表（比如每项有个按钮）再单独拆成客户端组件，用 'use client'。

06 路由和导航

Next 用的是基于文件的路由 ，不用手写路由表。在 app 下建文件夹就行：

app/page.tsx → /
app/about/page.tsx → /about
app/blog/[id]/page.tsx → /blog/123，id 在组件里拿 params

跳转用 Link，别用 <a>，否则会整页刷新：

tsx 复制代码

import Link from 'next/link';
<Link href="/about">关于</Link>

和 Vue Router 的 <RouterLink> 一个道理。

07 小结：你真正要补的课

React 语法 ：JSX、useState、useEffect，和 Vue 的模板、ref、watch 一一对应着学，很快。
Next 的约定 ：app/ 目录、page.tsx、layout.tsx、'use client'，多写几个页面就熟。
服务端 vs 客户端 ：默认服务端，要交互就 'use client'，这是和 Vue 最不一样的地方，也是 Next 的威力所在。

不用追求一次全懂。先按这篇把项目跑起来，改几个页面，加一个「客户端小组件」，再慢慢看官方教程里的数据缓存、Server Actions、中间件，会顺很多。

会 Vue，就已经站在这条起跑线上了。剩下的，只是多写几行 JSX 而已。