简介
欢迎阅读 Next.js 文档!
什么是 Next.js?
Next.js 是一个用于构建全栈 Web 应用的 React 框架。您可以使用 React 组件构建用户界面,并通过 Next.js 获得额外功能和优化。
在底层,Next.js 还抽象并自动配置了 React 所需的工具链,如打包、编译等。这让您可以专注于应用开发,而无需花费时间在配置上。
无论您是独立开发者还是团队一员,Next.js 都能帮助您构建交互式、动态且高效的 React 应用。
主要特性
Next.js 的主要功能包括:
特性 | 描述 |
---|---|
路由系统 (Routing) | 基于文件系统的路由方案,构建在服务端组件 (Server Components) 之上,支持布局、嵌套路由、加载状态、错误处理等功能 |
渲染方式 (Rendering) | 支持客户端组件 (Client Components) 和服务端组件 (Server Components) 的客户端渲染 (CSR) 与服务端渲染 (SSR)。通过 Next.js 进一步优化为静态生成 (Static Rendering) 和动态渲染 (Dynamic Rendering)。支持 Edge 和 Node.js 运行时的流式渲染 (Streaming) |
数据获取 (Data Fetching) | 在服务端组件中使用 async/await 简化数据获取,扩展的 fetch API 支持请求记忆化、数据缓存和重新验证 |
样式方案 (Styling) | 支持多种样式方案,包括 CSS 模块 (CSS Modules)、Tailwind CSS 和 CSS-in-JS |
性能优化 (Optimizations) | 提供图片、字体和脚本优化,改善应用的核心 Web 指标 (Core Web Vitals) 和用户体验 |
TypeScript 支持 | 增强的 TypeScript 支持,提供更好的类型检查和编译效率,支持自定义 TypeScript 插件和类型检查器 |
文档使用指南
在页面左侧可以看到文档导航栏。文档内容按从基础到高级的顺序组织,您可以在构建应用时循序渐进地阅读。当然,您也可以按任意顺序跳转到需要的章节。
页面右侧会显示当前页面的目录结构,方便快速定位章节。如需搜索文档,可使用顶部搜索栏或快捷键(Ctrl+K
或 Cmd+K
)。
建议从安装指南开始阅读。
应用路由 vs 页面路由
Next.js 提供两种路由方案:应用路由 (App Router) 和页面路由 (Pages Router)。应用路由是新方案,支持 React 最新特性如服务端组件 (Server Components) 和流式传输 (Streaming)。页面路由是传统方案,用于构建服务端渲染的 React 应用,目前仍为旧版应用提供支持。
在侧边栏顶部,您可以通过下拉菜单切换应用路由和页面路由功能。由于两种方案存在专属特性,请注意当前选择的标签类型。
页面顶部的面包屑导航也会显示当前查看的是应用路由文档还是页面路由文档。
预备知识
虽然本文档对新手友好,但我们假设您已掌握某些基础知识。在介绍新概念时,我们会提供相关文档链接。
为了获得最佳学习效果,建议您先掌握 HTML、CSS 和 React 基础知识。如需复习 React,请参考我们的 React 基础课程,然后通过构建仪表盘应用来学习 Next.js。
无障碍访问
为了在使用屏幕阅读器时获得最佳体验,推荐使用 Firefox + NVDA 或 Safari + VoiceOver 组合。
加入社区
如有任何关于 Next.js 的问题,欢迎通过 GitHub Discussions、Discord、Twitter 或 Reddit 联系我们。