Next.js入门指南：从零构建现代Web应用

发表于 更新于 分类于 ，

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。它提供了服务端渲染（SSR）、静态站点生成（SSG）、路由系统等开箱即用的特性，让开发者能够专注于业务逻辑的实现。

白话理解：如果说 React 是一套”乐高积木”，那 Next.js 就是一份”乐高说明书 + 预制底板”——它帮你规定好怎么组装、怎么优化，你只需要专心搭出自己想要的形状。

1. 什么是 Next.js？

Next.js 被称为 “The React Framework for the Web”。它解决了纯 React 应用在 SEO、首屏加载速度和路由配置上的痛点。

主要特性包括：

  • 混合渲染：支持服务器端渲染 (SSR) 和 静态生成 (SSG)。

    白话理解 SSR：网页内容在服务器上就已经”画好了”再发给浏览器——像餐厅做好菜端上来，而不是给你食材让你自己炒。
    白话理解 SSG：在构建阶段就把所有页面”印刷”成成品，用户访问时直接发成品——像提前印好的报纸，拿到就能看，不用现场排版。

  • 路由系统：基于文件系统的路由（App Router）。

    白话理解 App Router：Next.js 13+ 的路由系统，文件夹结构就是 URL 结构——放一个文件夹就多一个页面路径，就像在图书馆里按楼层和房间号找书一样直观。

  • 全栈能力：支持 API Routes，可直接编写后端逻辑。
  • 自动优化：图片、字体和脚本的自动优化。

2. 环境准备

在开始之前，请确保你的系统已安装 Node.js（建议 v18.17 或更高版本）。

1
node -v

3. 创建项目

我们将使用官方脚手架 create-next-app 来创建一个新项目。打开终端，运行以下命令：

1
npx create-next-app@latest my-next-app

在安装过程中，你可能会遇到以下提示，建议选择如下配置：

1
2
3
4
5
6
Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  Yes
Would you like to use `src/` directory?  Yes
Would you like to use App Router? (recommended)  Yes
Would you like to customize the default import alias (@/*)?  No

项目创建完成后，生成的目录结构大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
my-next-app/
├── public/           # 静态资源（图片、字体等）
├── src/
│   └── app/          # 应用路由和页面
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── .eslintrc.json    # ESLint 配置
├── next.config.js    # Next.js 配置
├── package.json      # 项目依赖和脚本
├── postcss.config.js # PostCSS 配置
├── tailwind.config.ts # Tailwind CSS 配置
└── tsconfig.json     # TypeScript 配置

安装完成后，进入项目目录并启动开发服务器：

1
2
cd my-next-app
npm run dev

访问 http://localhost:3000，你应该能看到 Next.js 的欢迎页面。

4. 实战：创建你的第一个页面

在 Next.js 的 App Router 模式中，app 目录下的文件夹结构即对应路由结构。

白话理解：你在 app 目录里建了一个 about 文件夹，浏览器就自动多了一个 /about 页面——就像在商场里多开一间店铺，门牌号自动就有了。

创建关于页面

  1. 在 src/app 目录下创建一个名为 about 的文件夹。
  2. 在 about 文件夹中创建一个 page.tsx 文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// src/app/about/page.tsx
import Link from 'next/link';

export default function About() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">关于我们</h1>
      <p className="mt-4">这是一个使用 Next.js 构建的示例页面。</p>
      
      <div className="mt-8">
        <Link href="/" className="text-blue-500 hover:underline">
          返回首页
        </Link>
      </div>
    </div>
  );
}

现在访问 http://localhost:3000/about，你就能看到刚才创建的页面了。Next.js 自动为你处理了路由映射。

5. 组件与布局

Next.js 使用 layout.tsx 来定义共享布局。根目录下的 app/layout.tsx 是全局布局，适用于所有页面。

你可以修改 src/app/layout.tsx 来添加全局导航栏：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "我的 Next.js 应用",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN">
      <body className={inter.className}>
        <nav className="p-4 bg-gray-100 border-b">
          <ul className="flex gap-4">
            <li><Link href="/">首页</Link></li>
            <li><Link href="/about">关于</Link></li>
          </ul>
        </nav>
        {children}
      </body>
    </html>
  );
}

这样，导航栏就会出现在应用的所有页面上。

6. 数据获取

Next.js 简化了数据获取流程。在 App Router 中，你可以直接在组件中进行异步数据获取（因为组件默认是 Server Components）。

白话理解 Server Components：在服务器上运行的组件，浏览器不需要下载它们的 JavaScript——就像外卖平台帮你算好了总价，你的手机不用自己做加法，减轻了浏览器的负担。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// src/app/posts/page.tsx

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

export default async function Posts() {
  const posts = await getData();

  return (
    <div className="p-24">
      <h1 className="text-2xl font-bold mb-4">文章列表</h1>
      <ul>
        {posts.slice(0, 5).map((post: any) => (
          <li key={post.id} className="mb-2 p-4 border rounded hover:bg-gray-50">
            {post.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

7. 结语

这只是 Next.js 的冰山一角。它还有更多强大的功能，如：

  • API Routes：在 app/api 中构建后端接口。
  • Middleware：请求拦截与处理。
  • Image Optimization：使用 <Image /> 组件自动优化图片。

希望这篇指南能帮你快速开启 Next.js 开发之旅！

8. 自我检验清单

完成本文学习后，你应该能做到以下几点：

  • 能使用 create-next-app 创建一个新的 Next.js 项目并成功启动开发服务器
  • 能解释 SSR（服务端渲染）和 SSG（静态站点生成）的区别及各自适用场景
  • 能通过在 app 目录下创建文件夹和 page.tsx 来新增页面路由
  • 能使用 layout.tsx 实现跨页面的共享布局（如导航栏、页脚）
  • 能在 Server Components 中使用 fetch 进行异步数据获取
  • 能区分 Server Components 和 Client Components，知道何时需要添加 'use client'
  • 能使用 <Link> 组件实现页面间的客户端导航
  • 能描述 Next.js 相比纯 React SPA 在 SEO 和首屏性能上的优势

9. 参考资料