简介
Next.js 是一个基于 React 的轻量级框架，它提供了一些强大的功能，如自动代码分割、服务器端渲染、静态文件导出等。使用 Next.js 可以快速构建出一个高性能、SEO 友好的应用程序。在这篇文章中，我们将使用 Next.js 构建一个多页面应用。
创建 Next.js 应用
首先，我们需要安装 Node.js 和 npm。然后，我们可以使用以下命令来创建一个新的 Next.js 应用程序：
npx create-next-app my-app
这将创建一个名为 my-app 的新项目，并安装所有必需的依赖项。
添加多个页面
在 Next.js 中，我们可以通过在 pages 目录下创建文件来创建页面。例如，我们可以在 pages 目录下创建一个名为 about.js 的文件来创建一个关于页面。在该文件中，我们可以编写以下代码：
-- -------------------- ---- -------
------ ---- ---- ------------
------ ------- -------- ------- -
------ -
--
------
--------------------
-------
--------------
------- -- --- ----- ---------
---
--
-在上面的代码中，我们使用了 Head 组件来设置页面的标题。然后，我们使用了一些简单的 HTML 元素来定义页面的内容。
现在，我们可以通过访问 http://localhost:3000/about 来查看我们的关于页面。
创建导航菜单
为了让用户能够浏览我们的多个页面，我们需要在应用程序中添加一个导航菜单。我们可以在 pages 目录下创建一个名为 _app.js 的文件，并在其中编写以下代码：
-- -------------------- ---- -------
------ ---- ---- ------------
-------- ------- ---------- --------- -- -
------ -
--
-----
----- ---------
-----------
--------- --
----- --------------
------------
-------
------
---------- -------------- --
---
--
-
------ ------- ------在上面的代码中，我们使用了 Link 组件来创建一个链接，该链接将用户带到我们的主页和关于页面。我们还将我们的页面组件作为属性传递给 MyApp 组件，并在其中呈现它们。
添加样式
为了使我们的应用程序看起来更好，我们可以添加一些样式。我们可以在 styles 目录下创建一个名为 global.css 的文件，并在其中编写以下代码：
-- -------------------- ---- -------
---- -
------- --
-------- --
------------ -------------- ------------------- ----- --- ------- -------
------- ---------- ---- ----- ----- ----- --------- ----- -----------
-
--- -
-------- -----
----------------- --------
-
--- - -
------------- -----
-在上面的代码中，我们定义了一些基本的样式，如页面的字体和导航菜单的背景颜色。然后，我们可以在 _app.js 文件中引用这个样式文件：
import '../styles/global.css';
现在，我们可以在浏览器中查看我们的多页面应用程序，并使用导航菜单在不同的页面之间切换。
结论
在本文中，我们介绍了使用 Next.js 构建多页面应用程序的过程。我们学习了如何创建多个页面、添加导航菜单和样式。Next.js 提供了许多有用的功能，如自动代码分割、服务器端渲染和静态文件导出，使我们能够轻松地构建高性能、SEO 友好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674053aa5ade33eb7233388c