初识 Next.js

Next.js 是由 Vercel 开发的 React 全栈框架，提供了服务端渲染、静态生成、API 路由等开箱即用的功能。

创建项目

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

项目结构（App Router）

Next.js 13+ 推荐使用 App Router：

my-next-app/
├── app/
│   ├── layout.tsx       # 根布局
│   ├── page.tsx         # 首页
│   ├── globals.css      # 全局样式
│   └── blog/
│       └── page.tsx     # /blog 页面
├── public/              # 静态资源
├── next.config.js       # 配置文件
└── package.json

第一个页面

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Hello Next.js!</h1>
      <p>这是我的第一个 Next.js 页面</p>
    </main>
  )
}

与 Nuxt.js 的对比

特性	Next.js	Nuxt.js
基础框架	React	Vue
路由方式	文件系统路由	文件系统路由
渲染模式	SSR/SSG/ISR	SSR/SSG/SPA
部署	Vercel / 自建	任意 Node 环境
状态管理	Zustand / Redux	Pinia

初識 Next.js

Next.js 是由 Vercel 維護的 React 全端框架，內建伺服器渲染、靜態產生、API 路由等能力。

建立專案

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

項目結構（App Router）

Next.js 13 起建議使用 App Router：

my-next-app/
├── app/
│   ├── layout.tsx       # 根版面
│   ├── page.tsx         # 首頁
│   ├── globals.css      # 全域樣式
│   └── blog/
│       └── page.tsx     # /blog 頁面
├── public/              # 靜態資源
├── next.config.js       # 設定檔
└── package.json

第一個頁面

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Hello Next.js!</h1>
      <p>這是我的第一個 Next.js 頁面</p>
    </main>
  )
}

與 Nuxt 對照

特性	Next.js	Nuxt.js
基礎框架	React	Vue
路由方式	檔案系統路由	檔案系統路由
渲染模式	SSR / SSG / ISR	SSR / SSG / SPA
部署	Vercel / 自建	任意 Node 環境
狀態管理	Zustand / Redux	Pinia

兩者皆以「約定優於設定」組織路由；差異主要在生態（React 與 Vue）與預設渲染模型。

Introduction to Next.js

Next.js is a React framework for building full-stack web applications. It adds file-based routing, optimized bundling, and first-class support for server rendering and static generation on top of React, so you can ship fast, SEO-friendly pages without assembling tooling from scratch.

Create a project

Use the official starter with your preferred package manager:

npx create-next-app@latest my-app
cd my-app
npm run dev

During setup you can enable TypeScript, ESLint, Tailwind CSS, and the App Router (app/). The dev server typically runs at http://localhost:3000.

Project structure (App Router)

A typical layout looks like this:

my-app/
├── app/
│   ├── layout.tsx    # Root layout (shell, fonts, providers)
│   ├── page.tsx      # Home route (/)
│   └── globals.css
├── public/           # Static assets
├── next.config.mjs
└── package.json

app/page.tsx is the entry for /. Nested folders under app/ map to URL segments; layout.tsx wraps child routes and persists across navigations.

Your first page

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Hello, Next.js</h1>
    </main>
  );
}

Export a default React component from page.tsx for each route. Metadata and data loading integrate here without a separate router config file.

Next.js vs Nuxt

Both are meta-frameworks with file-based routing and SSR/SSG. Nuxt is Vue-centric (Vite or webpack under the hood) with conventions like pages/ and layouts/. Next.js is React-centric and uses the app/ directory (or legacy pages/) with React Server Components by default in the App Router. If your team is on Vue, Nuxt is the natural fit; for React ecosystems and hiring pools, Next.js is the standard choice. Conceptually—layouts, dynamic routes, and hybrid rendering—map closely between the two.