Next.js 入门指南

Next.js 是一个 React 框架，它包含了生产环境所需的所有功能。它提供了一些在原生 React 应用中需要自行安装和处理的功能，从而为您提供最佳的开发者体验。在本指南中，我将向您介绍 Next.js，首先解释 Next 是什么以及为什么要使用它，然后使用它创建一个基本的应用。

如果您有兴趣全面学习 Next.js，我强烈推荐这门畅销课程。

让我们开始吧。

什么是 Next.js？

Next.js 是一个基于 React、Node.js、Babel 和 Webpack 构建的框架。它默认具备原生 React 应用中不具备的便捷功能。

Next.js 为您提供最佳的开发者体验，并具备生产所需的所有功能：混合静态渲染和服务器渲染、TypeScript 支持、智能打包、路由预取等等。无需任何配置。

Next.js 允许您将网站静态导出为 HTML 或将其渲染到服务器上。它会自动拆分代码，从而减小打包体积并提高应用速度，因为最终浏览器只会加载所需的 JavaScript。

Next.js 使用基于文件系统的路由功能，支持在应用中进行路由。它会自动使用pages文件夹中的文件作为路由，这意味着你甚至无需添加额外的库即可使用 Next 构建多页应用。

Next.js 框架提供了一种使用 API 路由构建 API 的简单解决方案。您可以使用 GraphQL、Express 或您喜欢的框架构建整个 API，然后使用 API 路由将其连接到数据库。Next.js 将pages/api目录下的文件视为 API 端点。

与 React 不同，Next 内置了对 Styled JSX、Sass、CSS 模块等的支持，这使得 Next.js 应用程序易于设置样式。

创建 Next 应用

Next.js 应用可以手动创建，也可以使用 Create Next App 创建。我们选择后者，因为这是推荐的方式，它会自动为我们设置好一切。

因此，打开命令行界面 (CLI) 并运行以下命令：

  npx create-next-app my-app

项目创建完成后，让我们来探索一下文件结构：

文件结构

├── pages
|  ├── api
|  |  └── hello.js
|  ├── index.js
|  └── _app.js
├── styles
|  ├── globals.css
|  └── Home.module.css
├── package.json
└── yarn.lock
├── README.md

正如我之前提到的，Next.js 使用文件系统在应用程序中启用路由。在这里，该index.js文件是项目的主页。如果您在pages文件夹中添加新文件，它将被视为路由。

Create Next App 默认带有该api文件夹，这意味着该hello.js文件是一个 API 端点。如果你点击该 API 路由http://localhost:3000/api/hello，你将收到来自服务器的响应。

Next.js 使用 App 组件来初始化页面。该_app.js文件允许您覆盖组件的默认行为。如果您有需要在组件之间共享的全局样式或数据，请将它们放在此处。顺便说一下，下划线 ( _) 指示 Next.js 不要将该文件用作路由。

有了这个，我们现在可以通过在终端上运行以下命令来预览项目：

  yarn dev

或者npm

  npm run dev

让我们在浏览器上访问http://localhost:3000

太棒了！我们现在已经完成了 Next.js 的介绍。在本系列的下一篇中，我们将深入探讨 Next.js 的静态和动态路由。

感谢您的阅读，下次再见。

您可以在我的博客上找到其他类似的精彩内容，或者在 Twitter 上关注我以获取通知。