不会 Next.js 你好意思说自己是 React 开发者？从零到上线一条龙

CodeAI
3 阅读7分钟

大家好，这是我的《Next.js 入门笔记》专栏第一篇文章。如果你已经会 React，但还没真正开始用 Next.js 做项目，那这篇文章就是为你准备的。

为什么选择 Next.js？

如果你用过原生 React 开发网站，一定遇到过这些问题：

  • 路由要自己配置，还要处理代码分割
  • 服务端渲染（SSR）需要搭一堆 infrastructure
  • 首屏加载慢，SEO 不友好
  • 部署到生产环境还要考虑很多配置

Next.js 就是来解决这些问题的。它是 React 的全栈框架，给你提供了一整套开箱即用的解决方案：

  • 文件系统路由，不用自己配置
  • 支持服务端渲染、静态生成、增量静态再生成，全都给你做好了
  • 自动代码分割，页面加载更快
  • 图片优化、字体优化原生支持
  • 一键部署到 Vercel，也可以部署到任何你喜欢的平台

简单说：用 Next.js，你只需要关注写业务代码，其他的框架都帮你搞定了。

本文以 Next.js 16（App Router）为基线来讲解。不同版本在默认配置、命令输出上可能有差异；如果你的本地结果和文中不同，请以 create-next-app 实际输出和官方文档为准。

在 Next.js 16 生态下，默认已包含 React 19，你可以直接使用 React 19 的能力（比如 Actions）。

本文我们就从零开始，一起创建你的第一个 Next.js 应用，运行起来，看到效果。

环境准备

在开始之前，确保你的开发环境满足要求：

Node.js 版本

Next.js 16 需要 Node.js 20.9 或更高版本。

检查你的版本：

node -v

如果版本太低，可以去 nodejs.org 下载最新版。

包管理器选择

我推荐使用 pnpm，比 npm 和 yarn 更快，节省磁盘空间。

安装 pnpm：

npm install -g pnpm

当然，如果你习惯用 npm 或者 yarn，也完全没问题，命令基本上是一样的。

创建你的第一个 Next.js 项目

Next.js 提供了官方的脚手架工具，一条命令就能创建项目。

在你的工作目录运行（本文后续统一使用 pnpm）：

pnpm create next-app@latest my-first-next-app --yes
cd my-first-next-app
pnpm dev

项目结构解读

现在我们来看一下创建好的项目结构（常见示例：TypeScript + Tailwind）：

my-first-next-app/
├── node_modules/
├── .next/                # 构建输出目录
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── .gitignore
├── eslint.config.mjs       # ESLint 配置（新版默认是 mjs 格式）
├── next-env.d.ts           # TypeScript 环境类型定义
├── next.config.ts         # Next.js 自定义配置（现在默认是 TS 格式）
├── package.json
├── postcss.config.mjs     # PostCSS 配置
├── README.md
├── tailwind.config.ts     # Tailwind CSS 配置
└── tsconfig.json          # TypeScript 配置

注意：你的实际目录可能略有不同（例如是否启用 Tailwind、是否使用 src/ 目录、配置文件后缀差异），这是正常的。

重点看 app/ 目录，这就是 App Router 的核心：

  • app/page.tsx —— 首页对应的组件。你访问网站根路径 / 的时候，就是这个组件渲染。
  • app/layout.tsx —— 根布局。所有页面都会共用这个布局。你可以在这里放导航栏、页脚，导入全局样式。
  • app/globals.css —— 全局 CSS 文件。
  • app/favicon.ico —— 默认网站图标。

默认现在已经使用了 Geist 字体 这是 Vercel 设计的现代无衬线字体，开箱即用。

其他配置文件：

  • next.config.ts —— Next.js 自定义配置，后面我们会用到。
  • tailwind.config.ts —— Tailwind CSS 配置，如果你选了 Tailwind 的话。
  • tsconfig.json —— TypeScript 配置。

page.tsx 是什么？

打开 app/page.tsx 看看页面入口内容（下面是为了讲解简化后的示例）：

export default function Home() {
  return (
    <div>
      <h1>Hello Next.js</h1>
    </div>
  );
}

就这么简单。在 App Router 中，每个 page.tsx 文件对应一个路由页面。

文件名就是路由路径：

  • app/page.tsx → / (首页)
  • app/about/page.tsx → /about (关于页面)
  • app/blog/page.tsx → /blog (博客列表)

就是这么简单，文件系统就是你的路由表。不用自己配置路由。

layout.tsx 是什么？

layout.tsx 是布局组件，它会包裹住所有子页面。你可以把它想象成一个模板。

打开 app/layout.tsx：

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">{children}</body>
    </html>
  );
}

看到 {children} 了吗？你的页面内容会渲染在这里。所以所有页面都会被这个根布局包裹。

这就意味着：

  • 你可以在 layout.tsx 放导航栏，所有页面都会显示导航栏
  • 你可以导入全局 CSS，所有页面都会应用这些样式
  • <html> 和 <body> 标签都是在这里定义的，每个页面不用重复写

后面我们会讲嵌套布局，现在你只需要记住：layout 是共用的布局模板。

运行开发服务器

好了，现在我们可以运行项目了。执行：

pnpm dev
# 如果你用 npm：npm run dev
# 如果你用 bun：bun dev

从 Next.js 16 开始，Turbopack 就是默认的打包工具，比 Webpack 更快，启动开发服务器更快，热更新也更快。如果你想用 Webpack，运行 next dev --webpack。

打开浏览器，访问 http://localhost:3000，你应该就能看到 Next.js 的默认欢迎页面了。

成功了！你的第一个 Next.js 应用已经跑起来了。

体验热更新

Next.js 开发服务器支持热模块替换（HMR），也就是说，你修改代码，浏览器会自动更新，不用手动刷新。

我们来试试。打开 app/page.tsx，修改一下内容：

export default function Home() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-4xl font-bold text-center my-8">
        我的第一个 Next.js 应用
      </h1>
      <p className="text-center text-lg">欢迎来到 Next.js 的世界 🎉</p>
    </div>
  );
}

如果你选了 Tailwind，这些样式就能直接生效。保存文件，切回浏览器，你会看到内容已经更新了。是不是很快？

这就是热更新的魔力，改完代码立即看到效果，开发体验非常流畅。

注意：在 Next.js 16 的默认行为下，next build 不再自动运行 ESLint。建议你在 package.json 保留 lint 脚本，并在 CI/CD 中显式执行 pnpm lint（或对应包管理器命令）。

动手练习：添加一张图片

现在我们来动手练习一下，给首页加一张图片。

Next.js 提供了内置的 <Image> 组件用来优化图片，比原生 <img> 标签好用多了，自动做懒加载、自动响应式。

首先，找一张你喜欢的图片，放到 public/ 目录下。脚手架项目通常自带 public/；如果你手动删掉了，再创建一个：

mkdir public

比如我放一张 hello.jpg 进去。

然后修改 app/page.tsx：

import Image from "next/image";

export default function Home() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-4xl font-bold text-center my-8">
        我的第一个 Next.js 应用
      </h1>
      <p className="text-center text-lg mb-8">欢迎来到 Next.js 的世界 🎉</p>
      <div className="flex justify-center">
        <Image
          src="/hello.jpg"
          alt="Hello"
          width={800}
          height={600}
          className="rounded-lg"
        />
      </div>
    </div>
  );
}

保存，刷新浏览器，你就能看到图片了。

注意：放在 public/ 目录下的静态资源，可以直接通过 / 路径访问。

把代码提交到 GitHub

现在我们已经有了第一个可运行的 Next.js 应用，建议把代码提交到 GitHub 保存起来。

首先，初始化 git：

git init
git add .
git commit -m "init: my first next.js app"

然后去 GitHub 创建一个仓库，把代码推上去：

git remote add origin git@github.com:你的用户名/my-first-next-app.git
git push -u origin main

如果提示找不到 main 分支，可以先执行：

git branch -M main
git push -u origin main

搞定！你的第一个 Next.js 项目已经安全托管在 GitHub 上了。

总结

第一篇文章就到这里，我们一起完成了：

  1. 了解了 Next.js 解决什么问题
  2. 准备好了开发环境
  3. 使用 create-next-app 创建了项目，认识了常见配置文件
  4. 看懂了 App Router 的项目结构
  5. 理解了 page.tsx 和 layout.tsx 的作用
  6. 启动了开发服务器，体验了热更新
  7. 把代码推送到了 GitHub

代码： 本篇文章完整代码我放在了 GitHub 上，点击这里查看。

下一篇文章，我们一起来学习路由，怎么创建多个页面，怎么跳转链接，不见不散。

这个专栏是我的 Next.js 入门笔记，每周更新一篇，跟着步骤走，你也能从零到一掌握 Next.js。如果你觉得有用，欢迎点赞收藏关注，这对我真的很重要，谢谢 🙏

avatar
文章
阅读
粉丝