Introduction

Welcome to the Next.js documentation!

欢迎访问 Next.js 文档!

What is Next.js?

什么是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 是一个构建全栈的web应用框架. 你可以使用 React 组件来构建用户界面,并使用 Next.js 来提供额外的功能和优化。

interfaces: 界面

optimizations: 优化

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所需的工具,如捆绑、编译等。这使您可以专注于构建应用程序,而不是花时间进行配置。

Under the hood: 在底层

Whether you’re an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.

无论你是个体开发者还是大团队中的一员, Next.js都能帮助你构建交互式、动态和快速的React应用.

interactive: 交互的

Main Features

主要特性

Some of the main Next.js features include:

Next.js的一些主要特性包括:

Feature Description
Routing A file-system based router / built on top of Server Components / that supports layouts, nested routing, loading states, error handling, and more
路由 一个基于服务器组件的文件系统路由器,支持布局、嵌套路由、加载状态、错误处理等功能。
Rendering Client-side and Server-side Rendering with Client and Server Components. Further optimized with Static and Dynamic Rendering / on the server with Next.js. Streaming on Edge and Node.js runtimes.
渲染 使用客户端和服务器组件进行客户端和服务器端渲染。利用 Next.js 进一步优化服务器上的静态和动态渲染。在 Edge 和 Node.js 运行时进行流式处理。
Data Fetching Simplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation.
数据拉取 通过在Server Components中使用async/await简化了数据获取,并提供了一个扩展的fetch API,用于请求的记忆化、数据缓存和重新验证。
Styling Support for your preferred styling methods, including CSS Modules, Tailwind CSS, and CSS-in-JS
样式 支持您偏爱的样式方法,包括CSS模块,Tailwind CSS和CSS-in-JS。
Optimizations Image, Fonts, and Script Optimizations to improve your application’s Core Web Vitals and User Experience.
优化 图像、字体和脚本优化,以改善应用程序的核心网络性能指标和用户体验。
TypeScript Improved support for TypeScript, with better type checking and more efficient compilation, as well as custom TypeScript Plugin and type checker.
TypeScript 改进了对 TypeScript 的支持,提供更好的类型检查和更高效的编译,同时还提供了自定义TypeScript插件和类型检查器。

A file-system based router: 一个基于文件系统的路由器, file-system based为形容词,基于文件系统的

request memoization:请求记忆化

revalidation: 重新验证

request memoization, data caching,为什么这里要用request memoization,而不是request caching,有什么区别吗?

"request memoization"和"request caching"之间有一些区别:

  • Request Caching(请求缓存)是指在发送请求后,将请求和响应的结果缓存起来,以便在后续的请求中直接使用缓存的结果,而无需再次发送请求到服务器。这样可以减少对服务器的请求,提高性能和效率。

  • Request Memoization(请求记忆化)是一种更加智能的缓存方式,它不仅仅缓存了请求的结果,还会缓存请求时的参数和上下文信息。当相同的请求再次被发送时,会首先检查缓存中是否存在相同参数的请求,并且仍处于有效期内。如果存在缓存,就直接返回缓存的结果,而无需再次发送请求。与简单的请求缓存相比,请求记忆化更加精细化,可以根据请求的参数进行缓存的判断。

因此,在这里使用"request memoization"表示使用了更加智能和精细化的缓存方式,不仅缓存了请求的结果,还会根据请求参数进行缓存的判断,提高了数据获取的效率和性能。

preferred:更喜欢的,优先的

efficient:高效的

as well as: 不仅…而且… He can play the guitar as well as the piano. (他既会弹吉他也会弹钢琴。)

App Router vs Pages Router

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.

Next.js有两种不同的路由器:app路由器和pages路由器。app路由器是新的路由器,这允许你使用React的最新特性,比如Server Components和Streaming。

Pages路由器是原始的Next.js路由器,他允许你构建服务端渲染的React应用并且继续支持较旧的Next.js应用。

original: 最初的

Pre-Requisite Knowledge

必备知识

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.

虽然我们的文档旨在使初学者易于理解,但我们需要建立一个基准,以便文档可以专注于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 Next.js Foundations Course, which will introduce you to the fundamentals.

为了充分利用我们的文档,建议您具备基本的 HTML、CSS 和 React 知识。如果您需要复习 React 技能,请查看我们的 Next.js Foundations Course,该课程将为您介绍基本原理。

Although: 虽然、尽管

establish:建立

functionality:功能

relevant:有关

whenever:每当

concept:概念

get the most out of:充分利用

recommended:推荐

brush up:复习

fundamentals:基本原理