初识 Next.js：从零构建现代化全栈应用

FogLetter
180 阅读7分钟

开篇：为什么又一个前端框架？

大家好，我是你们的老朋友，今天我们来聊聊 Next.js 这个让 React 开发变得更加愉悦的框架。

还记得那些年被 SPA（单页面应用）支配的恐惧吗？客户端渲染（CSR）虽然提供了流畅的用户体验，但在 SEO 和首屏加载速度上总是让人头疼。作为一个在掘金上分享过无数前端经验的创作者，我深知这些痛点。

直到我遇见了 Next.js，它像是 React 生态中的一股清流，完美地融合了服务器端渲染（SSR）和客户端渲染的优势。今天，我就带大家从零开始，探索 Next.js 的魅力所在。

第一章：环境搭建与项目初始化

1.1 神奇的 npx

让我们先从一个神奇的命令开始：

npx create-next-app@latest my-todo

这里有个小知识：npx 是 npm 5.2.0 版本后引入的工具，它可以让你直接运行 npm 包中的命令行工具，而无需先全局安装。

为什么这很酷？

  • 不需要 npm i -g create-next-app@latest
  • 不会污染全局环境
  • 适合快速尝试新技术
  • 总是使用最新版本

这就像是在餐厅点菜，你不需要买下整个厨房，只需要享用美味即可。

1.2 项目结构初探

创建完成后，你会看到这样的目录结构：

my-todo/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   └── api/
│       └── todos/
│           └── route.ts
├── components/
│   └── ui/
├── lib/
└── public/

Next.js 13+ 引入了全新的 App Router，这是对传统 Pages Router 的重大革新。文件夹即路由，让项目结构更加清晰。

第二章：理解渲染模式：CSR vs SSR

2.1 客户端渲染（CSR）的困境

传统的 React SPA 应用使用客户端渲染：

// 典型的 CSR 应用入口
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

问题在于：

  • SEO 不友好：爬虫只能看到空的 <div id="root">
  • 首屏加载慢：需要先下载 JavaScript 再渲染内容
  • 依赖客户端性能：低端设备体验较差

2.2 服务器端渲染（SSR）的救赎

Next.js 默认使用服务器端渲染：

// Next.js 页面组件默认是服务器组件
export default function Home() {
  return (
    <>
      <h1>Hello Next.js</h1>
      <div>服务器端渲染的内容</div>
    </>
  );
}

优势明显：

  • SEO 友好：服务器返回完整的 HTML
  • 首屏加载快：用户立即看到内容
  • 更好的性能：服务器分担渲染工作

什么时候该用哪种？

  • SSR：内容型网站、电商页面、需要 SEO 的页面
  • CSR：管理后台、用户面板、交互复杂的应用

Next.js 的美妙之处在于，你可以在同一个应用中混合使用这两种模式！

第三章：实战开发 Todo 应用

3.1 设计 API 路由

Next.js 的 API 路由让后端开发变得简单：

// app/api/todos/route.ts
import { NextResponse } from "next/server";
import { type Todo } from "@/app/types/todo";

// 模拟数据存储
let todos: Todo[] = [
  { id: 1, text: '学习React', completed: false },
  { id: 2, text: '学习Vue', completed: true }
];

// GET 请求处理
export async function GET() {
  return NextResponse.json(todos);
}

// POST 请求处理
export async function POST(request: Request) {
  const data = await request.json();
  const newTodo: Todo = {
    id: +Date.now(), // 使用时间戳作为ID
    text: data.text,
    completed: false
  };
  todos.push(newTodo);
  return NextResponse.json(newTodo);
}

这就是 RESTful API 设计的美学：

  • GET /api/todos - 获取所有待办事项
  • POST /api/todos - 创建新待办事项
  • PUT /api/todos - 更新待办事项
  • DELETE /api/todos - 删除待办事项

3.2 类型安全与 TypeScript

使用 TypeScript 让开发更加稳健：

// app/types/todo.ts
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

类型系统不仅能在编译时捕获错误，还能提供更好的代码提示和文档功能。

3.3 前端组件开发

// app/page.tsx
"use client"; // 标记为客户端组件

import { useState, useEffect } from "react";
import { type Todo } from '@/app/types/todo';

export default function Home() {
  const [newTodo, setNewTodo] = useState("");
  const [todos, setTodos] = useState<Todo[]>([]);

  // 获取待办事项
  const fetchTodos = async () => {
    const response = await fetch("/api/todos");
    const data = await response.json();
    setTodos(data);
  }

  // 添加待办事项
  const addTodo = async () => {
    if (!newTodo.trim()) return;
    await fetch("/api/todos", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text: newTodo })
    });
    setNewTodo("");
    fetchTodos();
  }

  useEffect(() => {
    fetchTodos();
  }, []);

  return (
    <main className="container mx-auto p-4 max-w-md">
      {/* 界面代码 */}
    </main>
  );
}

注意 "use client" 指令：这是 Next.js 13+ 的新特性，用于明确标识客户端组件。

第四章：样式与组件库集成

4.1 Tailwind CSS 配置

Next.js 与 Tailwind CSS 是天作之合：

// tailwind.config.js
const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

Tailwind 的实用类优先理念让样式开发变得高效而一致。

4.2 使用 shadcn/ui 组件库

shadcn/ui 是一个现代化的组件库：

# 初始化 shadcn/ui
npx shadcn@latest init

# 安装需要的组件
npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add card

与传统组件库不同，shadcn/ui 采用按需安装的方式，只把你需要的组件代码添加到项目中，极大减少了打包体积。

// 使用 shadcn/ui 组件
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

export default function TodoCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Todo List</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex gap-2 mb-4">
          <Input
            placeholder="Add new todo..."
          />
          <Button>Add</Button>
        </div>
      </CardContent>
    </Card>
  );
}

第五章：数据获取与渲染策略

5.1 服务器端数据获取

Next.js 支持在服务器组件中直接获取数据：

// app/repos/page.tsx
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { type Repo } from '@/app/types/repo';

export default async function ReposPage() {
  // 直接在服务器组件中获取数据
  const response = await fetch('https://api.github.com/users/fogletter/repos');
  const repos: Repo[] = await response.json();

  return (
    <main className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">GitHub Repositories</h1>
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {repos.map((repo) => (
          <Card key={repo.id}>
            {/* 卡片内容 */}
          </Card>
        ))}
      </div>
    </main>
  );
}

这种方式的好处是：

  • 数据获取在服务器完成，减轻客户端压力
  • 内容对爬虫完全可见，SEO 友好
  • 代码更加简洁，不需要 useEffect 和状态管理

5.2 混合渲染策略

在实际项目中，你可以根据需求混合使用不同的渲染策略：

// 部分在服务器渲染，部分在客户端交互
"use client";

import { useState } from "react";

export default function MixedComponent({ serverData }) {
  // serverData 在服务器获取
  const [clientState, setClientState] = useState(null);

  // 客户端交互逻辑
  const handleInteraction = async () => {
    const response = await fetch('/api/data');
    const data = await response.json();
    setClientState(data);
  };

  return (
    <div>
      <div>服务器数据: {serverData}</div>
      <div>客户端状态: {clientState}</div>
      <button onClick={handleInteraction}>加载更多</button>
    </div>
  );
}

第六章：API 路由的进阶用法

6.1 完整的 RESTful API

让我们完善之前的 Todo API：

// app/api/todos/route.ts
import { NextResponse } from "next/server";
import { type Todo } from "@/app/types/todo";

let todos: Todo[] = [/* 初始数据 */];

// GET 所有待办事项
export async function GET() {
  return NextResponse.json(todos);
}

// POST 创建新待办事项
export async function POST(request: Request) {
  try {
    const data = await request.json();
    const newTodo: Todo = {
      id: +Date.now(),
      text: data.text,
      completed: false
    };
    todos.push(newTodo);
    return NextResponse.json(newTodo);
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to create todo' },
      { status: 500 }
    );
  }
}

// PUT 更新待办事项
export async function PUT(request: Request) {
  try {
    const data = await request.json();
    todos = todos.map(todo =>
      todo.id === data.id ? { ...todo, completed: data.completed } : todo
    );
    return NextResponse.json(todos);
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to update todo' },
      { status: 500 }
    );
  }
}

// DELETE 删除待办事项
export async function DELETE(request: Request) {
  try {
    const data = await request.json();
    todos = todos.filter(todo => todo.id !== data.id);
    return NextResponse.json(todos);
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to delete todo' },
      { status: 500 }
    );
  }
}

第七章：部署与优化

7.1 构建优化

Next.js 提供了开箱即用的优化：

# 构建生产版本
npm run build

# 启动生产服务器
npm start

Next.js 会自动进行：

  • 代码分割：按页面分割代码，减少初始加载体积
  • 图片优化：自动提供现代图像格式（WebP）
  • 字体优化：自动优化和预加载字体
  • 缓存策略：智能静态和动态内容缓存

7.2 部署选择

Next.js 可以部署到多种平台：

  • Vercel：Next.js 开发团队创建，体验最佳
  • Netlify：优秀的替代方案，功能丰富
  • AWS：使用 Amplify 或自定义部署
  • 自有服务器：使用 Docker 容器化部署

结语：Next.js 的开发生态

经过这一番探索，我们可以看到 Next.js 的强大之处：

  1. 全栈能力：前后端一体化开发，减少上下文切换
  2. 渲染灵活：支持 SSR、CSR 等多种渲染模式
  3. 性能优异：开箱即用的优化和代码分割
  4. 开发体验：热重载、TypeScript 支持、优雅的错误处理
  5. 生态系统：丰富的插件和集成选项

Next.js 特别适合：

  • 内容型网站（博客、新闻站、电商）
  • SEO 重要的应用
  • 需要良好性能的用户体验
  • 全栈开发项目

作为掘金的创作者，我强烈建议你尝试 Next.js，特别是如果你正在寻找一个既能提供优秀用户体验，又能满足 SEO 需求的现代框架。

Next.js 不仅仅是一个框架，它代表了 Web 开发的未来方向——更加集成、更加高效、更加开发者友好。

希望这篇笔记能帮助你快速上手 Next.js，如果有任何问题，欢迎在评论区讨论！记得点赞收藏哦～

avatar
文章
阅读
粉丝