什么是 Next.js？

特性	React	Next.js
定位	UI 库	全栈框架
路由	需要额外配置（如 React Router）	内置文件系统路由
数据获取	手动管理	内置数据获取、缓存、重验证
渲染方式	客户端渲染 (CSR)	支持服务端渲染、静态生成等多种方式
API	需要后端服务	内置 API Routes
SEO	较差	优秀（支持服务端渲染）
构建优化	需要手动配置	自动代码分割、懒加载
适用场景	小型应用、SPA	企业级应用、博客、电商等

2.2 为什么企业级应用选择 Next.js？

开箱即用：不需要配置路由、数据获取、优化等
SEO 友好：搜索引擎可以抓取内容（因为支持服务端渲染）
性能优秀：自动优化图片、代码分割、懒加载
开发效率高：文件系统路由、内置 API、TypeScript 支持
生态成熟：丰富的插件和工具

3️⃣ 本项目的技术栈

3.1 完整技术栈

本项目使用了以下技术栈：

3.2 技术栈说明

技术	版本	作用
Next.js	16.1.1	全栈框架，提供路由、API、渲染等功能
React	19.2.0	UI 库，构建用户界面
TypeScript	5.9.3	类型安全的 JavaScript 超集
Tailwind CSS	4.1.17	实用优先的 CSS 框架
Google Gemini	3 Pro	AI 模型，提供智能对话能力
LangGraphJS	1.0.2	AI 状态图框架，管理复杂对话逻辑
LangChain	1.1.5+	AI 应用开发框架，提供工具集成
Supabase	2.89.0	后端服务，提供数据库、认证等功能

4️⃣ Next.js 的核心优势

4.1 文件系统路由

在 Next.js 中，你只需要在 app 目录下创建文件夹和文件，路由会自动生成。

app/
├── page.tsx              → /
├── about/
│   └── page.tsx          → /about
├── artifact/
│   └── [id]/
│       └── page.tsx      → /artifact/123
└── api/
    └── chat/
        └── route.ts      → /api/chat

4.2 服务端渲染 (SSR)

服务端渲染意味着 HTML 在服务器上生成，然后发送给浏览器。

优势：

⚡ 更快的首屏加载速度
🔍 更好的 SEO（搜索引擎可以抓取内容）
📱 更好的用户体验（无需等待 JavaScript 加载）

4.3 内置 API Routes

Next.js 允许你在同一个项目中创建 API 端点，无需单独的后端服务。

例如：app/api/chat/route.ts

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const body = await request.json();
  // 处理逻辑...
  return NextResponse.json({ success: true });
}

4.4 自动代码分割

Next.js 会自动将代码分割成小块，只加载用户当前需要的代码。

这意味着：

🚀 更快的页面加载速度
💾 更小的初始 bundle 大小

5️⃣ 实战案例：本项目的页面结构

5.1 主页组件

让我们看看本项目的首页代码：app/page.tsx

'use client';

import { useRef, useMemo, useState, useEffect } from 'react';

// 导入组件
import { ProtectedRoute } from './components/ProtectedRoute';
import SessionSidebar from './components/SessionSidebar';
import { ChatHeader } from './components/ChatHeader';
import { MessageList } from './components/MessageList';
import { ChatInput, type ChatInputHandle } from './components/ChatInput';

// 导入自定义 Hooks
import { useChatMessages } from './hooks/useChatMessages';
import { useSessionManager } from './hooks/useSessionManager';
import { useChatHistory } from './hooks/useChatHistory';
import { useSendMessage } from './hooks/useSendMessage';

/**
 * 聊天页面主组件
 *
 * 该组件是聊天应用的主页面,负责:
 * 1. 整合所有子组件(头部、侧边栏、消息列表、输入框)
 * 2. 管理聊天消息状态
 * 3. 管理会话(session)状态
 * 4. 处理消息发送和历史记录加载
 *
 * 架构说明:
 * - 使用自定义 hooks 分离业务逻辑
 * - 组件只负责 UI 渲染和状态组合
 * - 所有复杂逻辑都封装在 hooks 中
 */
export default function ChatPage() {
  // 组件逻辑...
}

5.2 全局布局

让我们看看全局布局：app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import { AuthProvider } from "./contexts/AuthContext";

export const metadata: Metadata = {
  title: "LangGraph Chat App",
  description: "Chat application powered by LangGraph",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN">
      <body className="bg-[#050509] text-slate-200 antialiased selection:bg-blue-500/30 overflow-hidden">
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

代码解析：

这是 Next.js 的Server Component（默认不写 'use client'）
metadata 导出用于设置页面的 SEO 信息
AuthProvider 包裹所有子组件，提供全局认证状态
children 是所有子页面组件的占位符

5.3 配置文件

Next.js 配置：next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactStrictMode: false, // 禁用 React 严格模式
  typescript: {
    // 在构建时忽略 TypeScript 类型错误
    ignoreBuildErrors: true,
  },
  experimental: {
    // 使用系统 TLS 证书以解决网络问题
    turbopackUseSystemTlsCerts: true,
  },
};

export default nextConfig;

代码解析：

reactStrictMode: false - 开发模式下禁用 React 的严格检查
ignoreBuildErrors: true - 构建时忽略 TypeScript 错误（开发阶段使用）
turbopackUseSystemTlsCerts: true - 使用系统 TLS 证书（解决某些网络问题）

6️⃣ Next.js 学习路径

6.1 学习阶段规划

6.2 阅读顺序建议

第一阶段：打好基础

什么是 Next.js？（本文）
项目结构与配置详解
路由系统基础

第二阶段：核心功能

API Routes 完全指南
Server vs Client Components
数据获取模式
流式响应实现（重点！）

第三阶段：进阶知识

React Hooks 与导航
中间件与认证模式
企业级分层架构

第四阶段：综合应用

完整项目功能复盘

7️⃣ 练习题

选择题：Next.js 与 React 的主要区别是什么？
- A. React 是框架，Next.js 是库
- B. Next.js 包含路由、API 等功能，React 只是 UI 库
- C. 它们完全相同
- D. React 比 Next.js 功能更多
简答题：为什么企业级应用通常选择 Next.js 而不是纯 React？

代码题：根据 Next.js 的文件系统路由规则，以下文件会生成什么路由？

app/
├── page.tsx
├── about/
│   └── page.tsx
└── product/
    └── [id]/
        └── page.tsx

思考题：查看本项目的 app/layout.tsx，它为什么不需要 'use client' 指令？

📚 参考资源

官方文档

本项目相关文件

✅ 总结

Next.js 是一个功能强大的 React 全栈框架，它提供了：

📁 文件系统路由
🌐 服务端渲染
🔌 内置 API Routes
⚡ 自动优化
📦 丰富的生态系统

企业级应用选择 Next.js 的原因：

开箱即用，无需繁琐配置
SEO 友好，利于搜索引擎抓取
性能优秀，自动优化
开发效率高，生态成熟

本项目的技术栈：

Next.js 16 + React 19 + TypeScript 5
Tailwind CSS 4
Google Gemini 3 Pro + LangGraphJS + LangChain
Supabase

下一步：阅读下一篇文章《项目结构与配置详解》，深入了解 Next.js 的项目结构。

登录以继续阅读

解锁完整文档、代码示例及更多高级功能。

立即登录

什么是 Next.js？

登录以继续阅读

On this page