【Next.js 入门指南】01-核心概念与项目初始化

1. Next.js 是什么如果你正在寻找一个能帮你快速构建现代化 React 应用的框架Next.js 绝对值得一试。简单来说Next.js 是基于 React 的一个全栈框架它最大的特点就是**服务端渲染SSR和静态生成SSG**能力。这意味着你的页面可以在服务器端就渲染好然后直接发送给浏览器而不是像传统 React 应用那样完全依赖客户端 JavaScript 来渲染内容。我第一次接触 Next.js 是在一个需要 SEO 优化的项目中。当时用纯 React 开发的应用在搜索引擎中的表现很差因为爬虫很难抓取动态生成的内容。换成 Next.js 后页面加载速度和搜索排名都有了明显提升。这让我意识到Next.js 不仅仅是另一个 React 框架它解决了很多实际开发中的痛点。Next.js 的核心优势可以总结为以下几点服务端渲染和静态生成这是 Next.js 的招牌功能。服务端渲染意味着页面在服务器上就已经生成好浏览器拿到的是完整的 HTML这对 SEO 和首屏加载速度非常有利。静态生成则更进一步在构建时就把页面预先生成为静态文件适合内容不经常变化的场景。文件系统路由在 Next.js 中你不需要手动配置路由。只要在app或pages目录下创建文件Next.js 会自动为你生成对应的路由。比如app/about/page.tsx会自动映射到/about路径。混合渲染模式你可以根据需要对不同的页面采用不同的渲染策略。某些页面可以静态生成某些可以服务端渲染某些甚至可以客户端渲染非常灵活。开箱即用的优化Next.js 内置了代码分割、图片优化、字体优化等功能你不需要额外配置就能获得不错的性能表现。提示如果你是从传统 React 开发转向 Next.js最需要适应的可能就是它的服务端优先理念。在 Next.js 中默认所有组件都是服务端组件只有在必要时才转为客户端组件。2. 环境准备与项目创建2.1 安装 Node.js在开始 Next.js 项目之前你需要确保系统已经安装了 Node.js。Next.js 要求 Node.js 版本至少是 16.8但我推荐安装最新的 LTS长期支持版本。你可以到 Node.js 官网下载安装包或者使用 nvmNode Version Manager来管理多个 Node.js 版本。安装完成后打开终端运行以下命令检查版本node -v npm -v如果能看到版本号输出说明安装成功。我建议同时更新 npm 到最新版本npm install -g npmlatest2.2 选择代码编辑器虽然你可以使用任何编辑器开发 Next.js 应用但 VS Code 无疑是最受欢迎的选择因为它有丰富的 React 和 Next.js 生态插件。以下是我推荐的几个必备插件ES7 React/Redux/React-Native snippets提供 React 组件的代码片段Prettier代码格式化工具保持代码风格一致Tailwind CSS IntelliSense如果你打算使用 Tailwind CSSTypeScript Vue Plugin更好的 TypeScript 支持2.3 创建 Next.js 项目创建 Next.js 项目非常简单官方提供了create-next-app脚手架工具。打开终端运行npx create-next-applatest这个命令会启动一个交互式向导询问你一些项目配置选项项目名称输入你的项目文件夹名称是否使用 TypeScript强烈建议选择 Yes是否使用 ESLint选择 Yes 以获得代码检查是否使用 Tailwind CSS根据项目需求选择是否使用 src 目录个人偏好我喜欢保持项目根目录整洁是否使用 App Router这是 Next.js 13 推荐的路由方式是否自定义导入别名初学者可以先选 No创建过程完成后进入项目目录并启动开发服务器cd your-project-name npm run dev默认情况下开发服务器会运行在http://localhost:3000。打开浏览器访问这个地址你应该能看到 Next.js 的欢迎页面。3. 项目结构解析3.1 初始文件结构新创建的 Next.js 项目会包含以下主要文件和目录your-project-name/ ├── app/ │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── public/ ├── node_modules/ ├── package.json ├── next.config.js └── tsconfig.jsonapp/这是 App Router 的核心目录你的页面和路由都在这里定义public/存放静态资源如图片、字体等node_modules/项目依赖package.json项目配置和依赖管理next.config.jsNext.js 配置文件tsconfig.jsonTypeScript 配置如果选择了 TypeScript3.2 关键文件详解layout.tsx是每个路由段的共享布局文件。默认的布局文件定义了整个应用的基本 HTML 结构import ./globals.css export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( html langen body{children}/body /html ) }page.tsx是路由的主页面组件。默认的页面内容就是你在欢迎界面上看到的内容export default function Home() { return ( main h1Hello World!/h1 /main ) }globals.css是全局样式文件。Next.js 默认使用 CSS Modules但如果你选择了 Tailwind CSS这个文件的内容会有所不同。4. 路由与导航4.1 文件系统路由Next.js 最让我喜欢的功能之一就是它的文件系统路由。你不需要手动配置路由表只需要在app目录下创建对应的文件夹和文件Next.js 会自动为你生成路由。例如如果你想创建一个/about页面只需要在app目录下创建about文件夹在about文件夹中创建page.tsx文件// app/about/page.tsx export default function About() { return h1About Page/h1 }这样访问http://localhost:3000/about就能看到这个页面了。这种约定优于配置的方式大大简化了路由管理。4.2 动态路由对于需要参数的路由比如博客文章详情页可以使用方括号语法创建动态路由。例如app/ blog/ [slug]/ page.tsx这样访问/blog/hello-world或/blog/another-post都会匹配到这个路由你可以在组件中通过参数获取具体的 slug 值export default function BlogPost({ params, }: { params: { slug: string } }) { return h1Blog Post: {params.slug}/h1 }4.3 导航组件在 Next.js 中你应该使用Link组件而不是传统的a标签进行页面导航。Link会预加载目标页面的资源提供更流畅的导航体验。import Link from next/link export default function Nav() { return ( nav Link href/Home/Link Link href/aboutAbout/Link /nav ) }注意虽然Link最终会渲染为a标签但它内部实现了智能的预加载和路由处理这是普通a标签无法提供的。5. 服务端组件与客户端组件5.1 理解渲染方式Next.js 最核心的概念之一就是区分服务端组件和客户端组件。默认情况下所有组件都是服务端组件这意味着它们会在服务器端渲染然后发送到客户端。服务端组件的特点无法使用浏览器 API如window、document无法使用 React 的状态useState和副作用useEffect无法使用事件处理如onClick客户端组件则相反它们会在浏览器中渲染可以访问所有浏览器 API 和 React 特性。要创建一个客户端组件你需要在文件顶部添加use client指令use client import { useState } from react export default function Counter() { const [count, setCount] useState(0) return ( button onClick{() setCount(count 1)} Clicked {count} times /button ) }5.2 组件组合策略在实际项目中最佳实践是尽可能使用服务端组件只在必要时使用客户端组件。这种模式被称为组件组合。例如你可以在服务端组件中嵌入客户端组件// app/page.tsx (服务端组件) import Counter from ./Counter export default function Home() { return ( main h1Server Component/h1 Counter / /main ) }// app/Counter.tsx (客户端组件) use client export default function Counter() { // 客户端逻辑... }这种架构带来了几个好处服务端组件可以安全地访问数据库或其他敏感资源减少了发送到客户端的 JavaScript 代码量提高了首屏加载性能6. 数据获取与缓存6.1 服务端数据获取在服务端组件中你可以直接使用fetch获取数据Next.js 会自动缓存响应async function getData() { const res await fetch(https://api.example.com/data) return res.json() } export default async function Page() { const data await getData() return ( ul {data.map((item) ( li key{item.id}{item.name}/li ))} /ul ) }Next.js 对fetch进行了扩展提供了额外的缓存控制选项// 不缓存 const res await fetch(https://api.example.com/data, { cache: no-store }) // 每10秒重新验证 const res await fetch(https://api.example.com/data, { next: { revalidate: 10 } })6.2 客户端数据获取如果你需要在客户端获取数据可以使用useEffect和useStateuse client import { useState, useEffect } from react export default function ClientComponent() { const [data, setData] useState(null) useEffect(() { fetch(/api/data) .then((res) res.json()) .then(setData) }, []) if (!data) return divLoading.../div return div{data.message}/div }6.3 静态渲染与动态渲染Next.js 支持两种构建时渲染策略静态渲染页面在构建时生成适合内容不经常变化的页面动态渲染页面在每次请求时生成适合内容频繁变化的页面你可以在next.config.js中配置全局的渲染行为或者通过fetch的cache选项控制单个数据请求的缓存策略。在实际项目中我通常会混合使用这两种策略。例如产品列表页可以静态生成而产品详情页可以动态渲染或使用增量静态再生ISR。