本文将介绍 Next.js，一个基于 React 的渐进式应用框架。我们将介绍 Next.js 的大部分功能，从基础知识入手，带你深入了解这个框架。
前置知识
在学习 Next.js 之前，你需要熟悉以下知识：
- React 基础
- Node.js 基础
- ES6+
如果你已经熟悉了以上知识，那么就可以开始学习 Next.js 了。
什么是 Next.js？
Next.js 是一个基于 React 的渐进式应用框架，可以帮助我们快速构建应用程序。Next.js 提供了许多常见任务的简单解决方案，如服务器渲染、静态导出、TypeScript 支持以及代码分割等。
Next.js 除了提供基础的 React 功能，还可以自动优化应用程序以提高性能，例如优化图片、渲染等待状态、优化离线支持，以及许多其他功能。
安装和设置
要开始使用 Next.js，我们需要先安装 create-next-app 脚手架工具，可以通过以下命令进行安装：
npm init next-app my-next-app # 或者使用 yarn yarn create next-app my-next-app
这样就会在当前目录下创建一个名为 my-next-app 的新项目。
接下来，我们要运行这个新项目。进入到项目目录中，我们可以运行以下命令启动项目：
npm run dev # 或者使用 yarn yarn dev
当你运行上述命令时，你的项目就会启动了。你可以在浏览器中访问 http://localhost:3000 查看 Next.js 应用的首页。
页面路由
Next.js 的页面路由系统非常简单，可以通过在 pages 文件夹中添加新的 .js 文件来创建页面。例如，创建一个名为 about.js 的文件，就可以在 http://localhost:3000/about 查看该页面。
function About() {
return <h1>About Page</h1>
}
export default About另外，我们还可以在 Next.js 中使用带参数的动态路由、选项式参数路由，以及可选的 catch-all 路由。
例如，使用动态路由：
-- -------------------- ---- -------
-------- --------- --------- -- -
------ ----------- --- ----------------
-
------ ----- -------- --------------------------- -
----- - ------ - - -------
------ -
------ -
---------- ----------
--
-
-
------ ------- -------以上代码可以在 http://localhost:3000/product/123 上展示 Product ID: 123 的结果。
API 路由
除了页面路由，Next.js 还提供了 API 路由系统。我们可以在 pages/api 文件夹下创建 .js 文件，然后通过向其添加请求处理程序来定义某些 API 路由。例如：
-- -------------------- ---- -------
------ ------- ----- ---- -- -
----------------------
-
--- --
----- -------
--
-
--- --
----- -------
--
--
-当我们运行上述代码时，可以通过 http://localhost:3000/api/users URL 查看 API 的响应。
数据获取
Next.js 允许我们为页面获取数据，并将数据作为 props 传递给页面组件。我们可以在页面组件中使用 getServerSideProps 或 getStaticProps 来获取数据。
如果需要在每个页面请求时获取最新数据，可以使用 getServerSideProps。如果数据在构建时不会更改，则我们可以使用 getStaticProps 来在构建时预取数据。例如：
-- -------------------- ---- -------
-------- ------ ----- -- -
------ -
----
------------- --- ---- -- -- -
--- --------------------
---
-----
-
-
------ ----- -------- --------------------------- -
----- --- - ----- --------------------------------------
----- ---- - ----- ----------
------ -
------ -
------ -----
--
-
-
------ ------- ----使用以上代码，我们可以在用户列表页面展示这些用户。
CSS 和资源
Next.js 为我们提供了一个灵活的 CSS 方案，可以在我们的应用中引入各种样式表。我们可以通过 import 语句在页面、组件文件中引入样式，例如：
-- -------------------- ---- -------
------ ------ ---- ---------------------
-------- ------ -
------ -
---- -----------------------------
------ ------------
------
-
-
------ ------- ----我们还可以使用 styled-jsx 这一内置样式解决方案，可以将 CSS 导入到 HTML 文件中。
另外，Next.js 还支持在构建过程中优化图像，以减少应用程序的大小。
部署
Once you've created your Next.js application, you will want to deploy your application. There are a number of options for deploying Next.js applications including custom server, static HTML export, and Vercel.
Custom Server
Next.js can be deployed using a custom server.
-- -------------------- ---- -------
----- - ------------ - - ---------------
----- - ----- - - --------------
----- ---- - ---------------
----- --- - ------ --- --
----- ------ - -----------------------
--------------------- -- -
------------------ ---- -- -
----- --------- - -------------- -----
----- - --------- ----- - - ---------
-- --------- --- ----- -
--------------- ---- ----- ------
- ---- -- --------- --- ----- -
--------------- ---- ----- ------
- ---- -
----------- ---- ----------
-
--------------- ----- -- -
-- ----- ----- ---
-------------- ----- -- -----------------------
--
--Static Export
Next.js can also export your application as static HTML pages which can be served using any static file server.
npm run build npm run export
Following the export command, you will have a out directory that contains the static HTML files. You can then serve these files any way you wish.
Vercel
Finally, Vercel is a cloud platform built for static sites and serverless functions. It offers a seamless deployment experience that requires no DevOps experience.
npm i -g vercel vercel login vercel
Vercel will then deploy your app to a globally available URL.
结论
我们已经介绍了 Next.js 的基础知识。在本文中，我们了解了如何使用 Next.js 构建服务器渲染应用、如何使用页面和 API 路由、如何获取数据、以及如何部署应用程序。如果您是从头开始学习 Next.js，那么本文应该为您提供了一个不错的出发点，帮助您入门并实现您的第一个 Next.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772393a6d66e0f9aad5ddbb