简介：本文旨在展示同构应用的概念以及 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 时，你用两个简单的动作即可构建你的第一个页面：
在你的源目录下创建一个叫做 pages 的目录
构建你的第一个 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
原文出处：阿里云大学开发者社区