了解Next.js

了解Next.js

九月 25, 2023

Next.js

Next.js 是什么?

  • 官方:Next.js is a flexible React framework that gives you building blocks to create fast web applications.
    • 翻译:Next.js 是一个灵活的React框架,它为我们提供快速构建web应用程序的构建块。

Building Blocks of a Web Application

— 改编自 Next.js 官网

也就是web应用构建块。这仍然是个比较抽象的概念,我们需要知道,什么是web应用构建块。

构建web应用程序时,我们需要考虑以下几点:

- 用户界面:提供应用程序,使用户与之交互。
- 路由:用户在应用程序不同部分之间导航。
- 数据获取:数据位于何处以及如何获取。
- 渲染:何时何地渲染静态或动态内容。
- 集成:使用的第三方服务(CMS、身份验证、支付等)以及如何连接它们。
- 基础架构:部署、存储和运行应用程序代码(Serverless、CDN、Edge等)的地方。
- 性能:如何为最终用户优化应用程序。
- 可扩展性:应用程序如何随着团队、数据和流量的增长而进行调整。
- 开发经验:团队构建和维护应用程序的经验。

对于应用程序的每个部分,需要决定是自己构建解决方案,还是使用库和框架等其他工具。

综上所述,用户界面、路由、数据获取、渲染…等,这些点,其实都算是一个个的构建块。而以上所有内容,我们都可以使用Next.js 实现。至于这些到底是什么,我们将一一细究。

那么

React 是啥?

官方说了: React is a JavaScript library for building interactive user interfaces.

翻译: React是一个用于构建交互式用户界面的JavaScript库。

  • 什么是用户界面:使用代码呈现给用户看的界面,就是用户界面。而一般用户界面有两种:CLI 和 GUI(命令行界面和图形化界面),而我们浏览器为我们提供的 WEB 界面,正是一种GUI界面。

  • Next.js 官方的解释是这样的:By user interfaces, we mean the elements that users see and interact with on-screen.

    • 翻译:所谓用户界面,我们指的是用户在屏幕上看到并与之交互的元素。

什么是库?

  • 官方:By library, we mean React provides helpful functions to build UI, but leaves it up to the developer where to use those functions in their application.
    • 所谓库,我们的意思是React提供了有用的函数来构建UI,但将这些函数在应用程序中的使用交予开发人员。

有了库,我们可以直接引用已经开发好的函数来构建应用程序,这可以大幅度加快我们的开发效率。我们不必在开发时深究底层,什么功能都要自己从零开始写,也就是俗称的”造轮子“。引用前人的智慧,这亦是一种智慧。

官方原文:

  • Part of React’s success is that it is relatively unopinionated about the other aspects of building applications. This has resulted in a flourishing ecosystem of third-party tools and solutions.
    • React的成功部分在于,它对构建应用程序的其他方面相对不持偏见。这使得第三方工具和解决方案的生态系统蓬勃发展。
  • It also means, however, that building a complete React application from the ground up requires some effort. Developers need to spend time configuring tools and reinventing solutions for common application requirements.
    • 然而,这也意味着,从头开始构建一个完整的React应用程序需要付出一些努力。开发人员需要花费时间配置工具,并根据常见的应用程序需求重新设计解决方案。

也就是说,这门技术海纳百川,非常强大,几乎啥都能干。这也意味着,想要开发一个React应用程序,就需要明白一个应用程序项目的各个关节,因为它非常的全面,而且是较为独立的一个技术栈,所以需要投入较多的精力去学习。

话说回来

什么是Next.js ?

官方:Next.js is a React framework that gives you building blocks to create web applications.

  • 翻译: Next.js是一个React框架,它为您提供创建web应用程序的构建块。

官方:By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.

  • 翻译: 所谓框架,我们的意思是Next.js处理React所需的工具和配置,并为您的应用程序提供额外的结构、功能和优化。

官方:You can use React to build your UI, then incrementally adopt Next.js features to solve common application requirements such as routing, data fetching, integrations - all while improving the developer and end-user experience.

  • 翻译:您可以使用React构建UI,然后逐步采用Next.js功能来解决常见的应用程序需求,如路由、数据获取、集成,同时改善开发人员和最终用户体验。

官方:Whether you’re an individual developer or part of a larger team, you can leverage React and Next.js to build fully interactive, highly dynamic, and performant web applications.

  • 翻译:无论您是个人开发人员还是更大团队的一员,都可以利用React和Next.js构建完全交互式、高度动态和高性能的web应用程序。

React是一个强大的js库,而Next.js 是一个React的框架,它为React而生!这就是Next.js,既然已经知道吾之真名了,那就!步入正题!向着开发,前进!