介绍
欢迎来到 Next.js 文档!
¥Welcome to the Next.js documentation!
什么是 Next.js?
¥What is Next.js?
Next.js 是一个用于构建全栈 Web 应用的 React 框架。你可以使用 React Components 来构建用户界面,并使用 Next.js 来实现附加功能和优化。
¥Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.
在底层,Next.js 还抽象并自动配置 React 所需的工具,例如打包、编译等。这使你可以专注于构建应用,而不是花时间进行配置。
¥Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration.
无论你是个人开发者还是大型团队的一员,Next.js 都可以帮助你构建交互式、动态且快速的 React 应用。
¥Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.
主要特性
¥Main Features
Next.js 的一些主要功能包括:
¥Some of the main Next.js features include:
特性 | 描述 |
---|---|
路由 | 基于文件系统的路由构建在服务器组件之上,支持布局、嵌套路由、加载状态、错误处理等。 |
渲染 | 使用客户端和服务器组件进行客户端和服务器端渲染。使用 Next.js 在服务器上进一步优化静态和动态渲染。在 Edge 和 Node.js 运行时上进行流式传输。 |
数据获取 | 通过服务器组件中的 async/await 简化数据获取,以及用于请求记忆、数据缓存和重新验证的扩展 fetch API。 |
样式 | 支持你喜欢的样式方法,包括 CSS 模块、Tailwind CSS 和 CSS-in-JS |
优化 | 图片、字体和脚本优化,以改善应用的核心网络生命和用户体验。 |
TypeScript | 改进了对 TypeScript 的支持,提供更好的类型检查和更高效的编译,以及自定义 TypeScript 插件和类型检查器。 |
如何使用这些文档
¥How to Use These Docs
在屏幕左侧,你将找到文档导航栏。文档的页面按从基础到高级的顺序组织,因此你可以在构建应用时逐步遵循它们。但是,你可以按任何顺序阅读它们或跳至适用于你的用例的页面。
¥On the left side of the screen, you'll find the docs navbar. The pages of the docs are organized sequentially, from basic to advanced, so you can follow them step-by-step when building your application. However, you can read them in any order or skip to the pages that apply to your use case.
在屏幕右侧,你将看到一个目录,可以更轻松地在页面的各个部分之间导航。如果你需要快速查找页面,可以使用顶部的搜索栏,或搜索快捷方式(Ctrl+K
或 Cmd+K
)。
¥On the right side of the screen, you'll see a table of contents that makes it easier to navigate between sections of a page. If you need to quickly find a page, you can use the search bar at the top, or the search shortcut (Ctrl+K
or Cmd+K
).
要开始,请查看 安装 指南。
¥To get started, check out the Installation guide.
应用路由与页面路由
¥App Router vs Pages Router
Next.js 有两个不同的路由:应用路由和页面路由。App Router 是一个较新的路由,允许你使用 React 的最新功能,例如服务器组件和流式。Pages Router 是原始的 Next.js 路由,它允许你构建服务器渲染的 React 应用,并继续支持旧版 Next.js 应用。
¥Next.js has two different routers: the App Router and the Pages Router. The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming. The Pages Router is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications.
在侧边栏的顶部,你会注意到一个下拉菜单,可让你在应用路由和页面路由功能之间切换。由于每个目录都有独特的功能,因此跟踪选择的选项卡非常重要。
¥At the top of the sidebar, you'll notice a dropdown menu that allows you to switch between the App Router and the Pages Router features. Since there are features that are unique to each directory, it's important to keep track of which tab is selected.
页面顶部的面包屑还将指示你正在查看 App Router 文档还是 Pages Router 文档。
¥The breadcrumbs at the top of the page will also indicate whether you're viewing App Router docs or Pages Router docs.
必备知识
¥Pre-Requisite Knowledge
尽管我们的文档旨在适合初学者,但我们需要建立一个基线,以便文档能够专注于 Next.js 功能。每当我们引入新概念时,我们都会确保提供相关文档的链接。
¥Although our docs are designed to be beginner-friendly, we need to establish a baseline so that the docs can stay focused on Next.js functionality. We'll make sure to provide links to relevant documentation whenever we introduce a new concept.
为了充分利用我们的文档,建议你对 HTML、CSS 和 React 有基本的了解。如果你需要温习 React 技能,请查看我们的 React 基础课程,它将向你介绍基础知识。然后,进一步了解 构建仪表板应用 的 Next.js。
¥To get the most out of our docs, it's recommended that you have a basic understanding of HTML, CSS, and React. If you need to brush up on your React skills, check out our React Foundations Course, which will introduce you to the fundamentals. Then, learn more about Next.js by building a dashboard application.
无障碍
¥Accessibility
为了在使用屏幕阅读器阅读文档时获得最佳辅助功能,我们建议使用 Firefox 和 NVDA,或 Safari 和 VoiceOver。
¥For optimal accessibility when using a screen reader while reading the docs, we recommend using Firefox and NVDA, or Safari and VoiceOver.
加入我们的社区
¥Join our Community
如果你对与 Next.js 相关的任何问题有疑问,欢迎你随时在 GitHub 讨论、Discord、X(Twitter) 和 Reddit 上向我们的社区提问。
¥If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions, Discord, X (Twitter), and Reddit.