王尘宇

简介：本文旨在展现同构应用的概念以及 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/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

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