Nextjs初体验，和Nuxt的异同

lemooljiang

Published: 04 Jul 2026 › Updated: 04 Jul 2026

Nextjs初体验，和Nuxt的异同

现在很多开源的AI项目都是采用的Nextjs方案，和自己采用的Nuxt方案有些出入。初看起来，差别挺大的，但细看之下，好像又不是很大。

Next.js 是一个用于构建全栈Web应用程序的React框架。有两个关键词：全栈，React。Nuxt也是全钱，不过是基于Vue开发的。所以它们在流程上有相同，但具体的实现有不同。国内不少用Vue的，我也是早早就入坑了，所以在选型上就用了Nuxt。

刚创建的新项目

以npx create-next-app@latest创建新项目后，npm run dev就可以运行啰。对项目结构倒是可以认真看下。

项目结构

public/ -> 静态资源目录
app/ -> App Router目录
    └─layout.tsx -> 跟布局(必须存在 且必须包含html body标签)
    └─page.tsx -> 首页
    └─globals.css -> 全局样式
next-env.d.ts -> TypeScript类型定义文件
next.config.ts -> Next.js配置文件
tsconfig.json -> TypeScript配置文件
postcss.config.mjs -> PostCSS配置文件(主要用于处理tailwindcss)
package.json -> 包管理文件
README.md -> 项目说明文件

项目结构和Nuxt几乎一致！ Nuxt升级4时改了很多结构，那时就有些疑惑，现在看来是要和国际接轨啊。

几点相同之处

特性	说明
SSR/SSG 支持	都支持服务端渲染（SSR）和静态站点生成（SSG），提升首屏加载速度和 SEO
文件系统路由	都基于文件目录结构自动生成路由，无需手动配置
API 路由	都可以在项目内直接编写后端 API（Next.js 的 `app/api`，Nuxt 的 `server/api`）
自动代码分割	都支持按路由自动分割代码，优化加载性能
热更新（HMR）	开发时都支持模块热替换，提升开发体验
TypeScript 支持	都原生支持 TypeScript
中间件/插件系统	都支持中间件、插件扩展机制
部署友好	都支持多种部署目标（Vercel、Netlify、Node.js 服务器等）

不同之处

维度	Next.js	Nuxt.js
底层框架	React	Vue
维护方	Vercel	Nuxt 团队（社区驱动）
路由模式	`app/` 目录（App Router）或 `pages/` 目录	`pages/` 目录，基于 Vue Router
状态管理	无内置方案，常用 Zustand、Redux、Jotai 等	内置 Pinia（原 Vuex），与 Vue 深度集成
数据获取	`getServerSideProps`、`getStaticProps`、`fetch`（App Router）	`useFetch`、`useAsyncData`、`$fetch`（组合式 API）
样式方案	灵活，支持 CSS Modules、Tailwind、Styled Components 等	内置 Scoped CSS、CSS Modules，对 Vue 单文件组件（SFC）支持更好
生态工具链	需要自行配置状态管理、表单处理等	开箱即用程度更高，内置模块系统、布局系统、错误处理等
约定 vs 配置	相对灵活，配置空间较大	约定优于配置，目录结构规范更严格
服务端能力	App Router 支持 Server Components、Server Actions	支持 Nitro 引擎，服务端能力也很强
学习曲线	需要同时掌握 React 生态（Hooks、Context 等）	对 Vue 开发者更友好，组合式 API 直观
社区/企业	企业级应用广泛，Vercel 生态完善	Vue 生态首选，在亚洲市场尤其流行

AI时代，再去纠结选型意义不大，很多可以采用AI辅助了。不过对于已有编程基础的人来讲，有个更称手的工具还是难能可贵的。

Leave Nextjs初体验，和Nuxt的异同 to:

Written by lemooljiang

Designer , Poet , Technology enthusiasts

Best Posts From lemooljiang

We have not curated any of lemooljiang's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

Nextjs初体验，和Nuxt的异同