簡介： 本文旨在展示同構應用的概念以及 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
原文出處：阿里雲大學開發者社區