Next.js 是一款基于 React 框架的服务端渲染框架，它能方便地创建多页应用和单页应用，同时提供了许多有用的功能，如代码拆分、静态导出、灵活的路由、热模块替换等等。Next.js 的特性都是开箱即用的，无需进行任何配置，因此一些常见的底层问题，例如代码拆分，都已经被内置解决了。
在这篇文章中，我们将介绍 Next.js 的核心概念和基础用法，带你深入理解这款优秀的服务端渲染框架。
安装和启动
Next.js 可以通过 npm 安装：
npm install --save next react react-dom
安装完毕之后，你可以创建一个新的 Next.js 应用程序。我们将以一个简单的 Hello World 应用程序示例演示这个过程。
首先，在项目根目录下创建一个名为 pages 的目录，然后在其中创建一个名为 index.js 的文件。这个文件将成为我们应用程序的第一个页面。
在 index.js 文件中，我们将添加以下代码：
function HomePage() {
return <div>Hello Next.js</div>
}
export default HomePage这个页面将简单地渲染一行文字，它会成为我们应用程序的根页面。
接下来，在项目根目录下创建一个名为 package.json 的文件，并添加以下代码：
{
"scripts": {
"dev": "next dev"
}
}然后在终端执行以下代码，启动应用程序：
npm run dev
你将看到一个消息，内容如下：
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
现在你可以在浏览器中访问 http://localhost:3000，看到我们刚刚创建的页面了！
路由
Next.js 的路由功能非常灵活，并可根据需要进行配置。在 Next.js 中，路由实现方法非常简单，只需要在 pages 文件夹中添加一个路由文件。文件的名称就是由于路由路径而生成的文件名，例如，我们希望显示的页面权限路径是 /about，因此需要在 pages 目录下创建一个名为 about.js 文件。
function AboutPage() {
return <div>About Page</div>
}
export default AboutPage现在你可以在浏览器中访问 http://localhost:3000/about，看到我们刚刚创建的页面了！
Next.js 还支持动态路由。例如，假设我们希望通过在 URL 中传递参数来显示当前用户的个人页面，我们需要创建一个名为 [id].js 的路由文件。在该文件夹中，我们可以通过使用 getInitialProps 方法从服务端获取数据来获取特定用户的信息。
-- -------------------- ---- ------- -------- ---------- ---- -- - ------ ---------- ----------------- - ------------------------ - ----- -- ----- -- -- - ----- --- - ----- --------------------------------------------------------------- ----- ---- - ----- ---------- ------ - ---- - - ------ ------- --------
现在你可以在浏览器中通过访问 http://localhost:3000/user?id=1 查看名为 "Leanne Graham" 的用户信息。
静态资源
使用 Next.js，我们可以轻松地将静态资源（如图像、CSS、JavaScript 文件）放在 public 文件夹中。这些文件可以直接在 HTML 文件中引用，并且能够得到正确的缓存。
<img src="/logo.png" alt="Logo">
在 public 文件夹中创建一个 logo.png 文件，然后将上述代码放在任意 HTML 文件的 img 标签中。你会发现图片加载成功了！
组件
在 Next.js 中，组件是构建服务端渲染应用程序的基础。你可以轻松地创建可重复使用的组件，并使用 ES6 模块化语法导入和导出它们。
例如，我们可以在 components 目录下创建一个名为 Header 的组件，然后在根页面和其他页面中重复使用它。
-- -------------------- ---- -------
------ ---- ---- -----------
-------- -------- -
------ -
--------
-----
----- ---------
-----------
-------
----- --------------
------------
-------
------
---------
-
-
------ ------- ------现在我们可以在不同的页面组件中导入并使用该组件了。
-- -------------------- ---- -------
------ ------ ---- -------------------------
-------- ----------- -
------ -
-----
------- --
---------- ----------
------
-
-
-------- ---------- -
------ -
-----
------- --
---------- -------------
------
-
-数据获取
Next.js 提供了 getInitialProps 方法，可以用于从服务端获取数据，并在组件渲染之前关闭该数据。在这种情况下，该数据将存在于服务端渲染的 HTML 中，以提高应用程序的性能。如果你使用的是客户端路由，则会从服务端获取数据然后在客户端进行渲染。
例如，我们可以使用 isomorphic-unfetch 库来获取在名为 "Fetch Example" 的目录中的 fetch.js 文件中的数据，并将其渲染在 index.js 页面中。
-- -------------------- ---- -------
------ ----- ---- --------------------
-------- ------- ---- -- -
------ -
-------------------------
-
-
--------------------- - ----- -- -- -
----- --- - ----- ------------------------------------
----- ---- - ----- ----------
------ - ---- -
-
------ ------- -----现在我们可以在 fetch.js 文件中提供以下内容：
export default (req, res) => {
res.status(200).json({ message: 'Hello from fetch.js!' })
}SEO 优化
在搜索引擎优化（SEO）方面，Next.js 提供了一些内置功能来改善你网站的 SEO。例如，我们可以根据需要为每个页面设置其标题和描述，并通过 Head 组件将它们添加到页面的 head 部分中。
-- -------------------- ---- -------
------ ---- ---- -----------
-------- ----------- -
------ -
-----
------
------------ ----------
----- ------------------ -------------- ---- ----- --- ------- --- --- --------- --
-------
---------- ----------
------
-
-此外，我们还可以使用 robots.txt 文件定义爬虫的行为，并使用 sitemap.xml 文件说明网站的内容结构。
总结
Next.js 是一款强大、灵活且易于学习的服务端渲染框架，可以方便地构建多页应用和单页应用。本文介绍了 Next.js 的基础概念和基础用法，并附加了示例代码，希望能为你提供一个实用的指南，让你轻松上手 Next.js 并造就出更好的服务端渲染应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9429bf6b2d6eab30d2f27