JS 框架 词条目录
前端Wiki/词条/Nuxt 与 Next.js

Nuxt 与 Next.js

定义分别是 Vue 与 React 生态最主流的元框架,把路由、SSR/SSG、构建优化与工程约定整合成开箱即用方案

裸用 Vue/React 还需要自己解决路由、服务端渲染、数据预取、构建配置等一系列工程问题。Nuxt 与 Next.js 把这些沉淀为约定:文件即路由、组件自动导入、渲染模式可切换(SSR/SSG/混合)、内置图片与字体优化。上手按约定写即可,深度定制时再逐层打开。

Next.js 在 React 生态几乎已成为默认起点,App Router 带来 React Server Components 与流式渲染;Nuxt 3 则以 Nitro 为统一服务端引擎,写法更贴近 Vue 3 组合式 API。两者都把全栈能力做进框架——API 路由可以直接写服务端逻辑,前后端共用一套类型。

JavaScript
// 文件即路由的示意(Nuxt 3 / Next.js 共同的约定思想)
// pages/index.js -> 路由 /      pages/user/[id].js -> 路由 /user/123
// Nuxt 3 中一个页面组件:
export default defineComponent({
  setup: function () {
    var count = ref(0);
    return function () { return h('button', { onClick: function () { count.value++; } }, 'count: ' + count.value); };
  }
});

// Next.js 中等价的页面(App Router 风格):
'use client';
import { useState } from 'react';
export default function Page() {
  var _a = useState(0); var count = _a[0]; var setCount = _a[1];
  return <button onClick={function () { setCount(count + 1); }}>count: {count}</button>;
}
⚠ 常见误区
🔗 相关词条ViteReact
← 返回来源章节React