Next.js让你的React应用SEO更友好

简介： 本文旨在展示同构应用的概念以及 Next.js 是如何解决的。我们提供了一些详细的代码片段。

原文作者：Arnaud Lewis
译者：UC 国际研发 桥川

----

为了可以在 Google 上获得一个好的排名并为你的网站提升曝光量，SEO 已经成为非常最重要的环节。如果你曾想过如何继续使用 React 开发 Web 应用，同时又没有糟糕的 SEO 和首屏加载延迟的缺点，那你应该了解一下 Next.js。

Next.js 的目标是为开发者提供一个与开发简单 React 应用相近的开发体验，同时又能获得同构应用的所有好处。它降低了学习难度并让 React 社区更容易接受。

本文旨在展示同构应用的概念以及 Next.js 是如何解决的。我们提供了一些详细的代码片段。

配置你的环境

你只需要在系统上安装 Node.js 就可以开始构建 Next.js 应用。当然，你也需要在你的项目中安装以下依赖：

Next：

Express：

next-routes:

这三个库是你开始所需的所有基础了。

Next.js 默认基于页面的路由

Next.js 提供了一个开箱即用的路由系统。它是完全基于页面的，且无需配置的路由系统。

基于页面的路由意味着一个组件基于它在项目中的路径与一个 url 关联。

当开始使用 Next.js 时，你用两个简单的动作即可构建你的第一个页面：

1. 在你的源目录下创建一个叫做 pages 的目录
2. 构建你的第一个 React 组件

pages/index.js

通过访问你网站的主页，你应该可以看到 Hello Next.js 展示在那。

使用基于页面的路由，每个页面都对应一个组件。这是一个常见的系统，你可以在静态网站生成器中找到它。

构建动态路由

Next.js 内置的基于页面的路由是很容易使用的，但大多数时候你需要动态 URL。想象一下，你需要一个在路由级别管理的动态参数，并将其作为属性注入组件中。这就是需要用到动态路由的地方了。

Next.js 有一个内置的服务器实现，需要替换它来实现动态路由。
你很快就会看到，你将设置一个简单的 Express 服务器。Express 是 Node.js 社区的一个知名的框架，因为它的易用性和强大的 url 匹配系统。

配置你的路由
在此示例中，你将会发现 next-rotues ，一个用于处理服务器端和客户端路由的简单工具。

因为我们使用 Express 服务器实现，你的路由将会有与模式匹配完全相同的语法，你可以在 Express 文档找到详细信息。

routes.js

在上面的示例中，你有 product 和 bl-ogpost 两个动态路由。在这两个路由里，我们都传递了一个 uid 参数到对应的组件。

设置你的服务器
路由准备完毕后，你只需设置服务器并为其提供路由配置即可。

server.js

更新你的构建环境以包含服务器

当实现了 Express 服务器后，就需要考虑它并更新构建脚本了。

package.json

在应用中导航

这是 next-routes 非常便利的地方。
通过输出路由，你就有了一个功能完备的路由器，这样你在应用中导航就无需担心你是在服务器端还是客户端。
有两种方式可以在组件之间导航：

1、声明式的使用 Link 组件

pages/blogpost.js:

想看完整文章内容：点击这里

英文原文：https://prismic.io/blog/seo-with-react-and-nextjs

原文出处：阿里云大学开发者社区